My Scully.io plugin scully-plugin-mermaid will provide a PostRenderer for Mermaid.js graphs, charts and diagrams embedded in Markdown files.

With this PostRenderer you can write Mermaid.js syntax inside code snippets in your Markdown files that will be rendered by Scully and post-rendered by Mermaid.js. So in fact descriptions like the following in your Markdown files will be converted into SVG graphics:

```mermaid
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Some note.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
```

The above example will result in a graphic like this one:

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#2d2d2d',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#ffffff',
      'lineColor': '#F8B229',
      'secondaryColor': '#006100',
      'tertiaryColor': '#ffffff'
    }
  }
}%%
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Some note.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

Check out how to set it up by reading the docs in the Github repository.

You haven't heard about Scully yet? Check out my article series about the static site generator Scully.