Mermaid - Custom CSS & Scripts in Markdown

Question

tl;dr For a Markdown page on Github, how can I specify a styling sheet and source script for a mermaid diagram?

I'm looking through mermaid's Flowchart documentation and foud a lot of cool features like being able to specify a callback. However, I'm struggling to figure out how one would go about doing this in Markdown.

I've figured out how to change the theme from this question, and am using inline classDef for styling as explained in the docs, but still not sure how I'd go about using a custom styling sheet and defining a callback that's not just a hyperlink.

Answer 1

Mermaid's syntax allows you to use inline directives in the Mermaid content, that directs how it should render. You can pass it the same parameters you would pass in init(), such as this example for sequence diagrams.

I did a quick test with the following, and it seems to work:

I am in a Markdown file and I want to show you a diagram:

```mermaid
%%{
  init: {
    "sequence": {
      "actorFontFamily": "monospace",
      "actorFontWeight": "bold",
      "messageFontFamily": "monospace",
      "messageFontWeight": "bold",
      "noteFontWeight": "bolder"
    }
  }
}%%

sequenceDiagram
  autonumber
  participant Browser
  participant AppServer

  rect rgb(255, 255, 255, 0.05)
    note over Browser, AppServer: (Phase 1) Authentication Check

    Browser ->> AppServer: GET /admin { Cookie:  }
    Browser ->> Browser: useSession
  end
end
```

Changing things like font sizes does not always result in an apparent change (I suppose the SVG must be scaled to the available size in your browser), but you can try changing the "theme" to verify the directive is being processed.

Answer 2

You probably cannot.

GitHub strips most styling out of its README files. I would be very surprised if there were a special case permitting custom styling of Mermaid diagrams.