Rendering Mermaid Charts

You can embed Mermaid Charts content into a Markdown page an HTML block like this:

```mermaid
  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
      
```

Alternately you can use HTML syntax:

<div class="mermaid">
graph LR
  A --- B
  B-->C[fa:fa-ban forbidden]
  B-->D(fa:fa-spinner);
</div>

MM automatically pulls in the Mermaid library and renders the chart content using the standard Mermaid Charting syntax.

Here's what Mermaid content looks like in the internal preview and previewed in Chrome:

Enabling Mermaid Rendering

Mermaid rendering is not enabled by default as it has a dependency on a very large JavaScript library and requires script tags to execute in the rendered Markdown content. In order to use Mermaid diagrams in your code you need to:

  • Enable Allow Script Tags in Markdown (Tools menu)
  • Enable Mermaid Rendering (Tools | Settings | Mermaid Diagrams)
  • Make sure you use the Chromium Previewer
  • You may have to restart Markdown Monster for all settings to take

If you don't use the Chromium Previewer, MM puts a clickable placeholder into the document that opens the document in an external browser.

Specify Mermaid Script Version

You can specify a specific version of Mermaid using the MermaidDiagramsUrl configuration setting. By default MM uses the current un-specified version.

JavaScript Code Required to Render Mermaid Charts

Markdown Monster automatically adds the necessary script to execute Mermaid charts in a page. If you use the Markdown in your own pages outside of Markdown Monster, you will have to add the required script code to your own pages in order for Mermaid to render properly.

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({startOnLoad:true});
</script>

This will render scripts when the document loads once.

If you dynamically change the document in JavaScript that affects the Mermaid code (like page navigation in SPA apps), you might need to update and re-render the charts:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.1.2/mermaid.min.js"></script>
<script>
mermaid.initialize({startOnLoad:false});
</script>
<script>
function renderMermaid(){
    mermaid.init(undefined,document.querySelectorAll(".mermaid"));
}
$(function() {
    $(document).on('previewUpdated', function() {        
        renderMermaid();
    });
    renderMermaid();
});
</script>

The previewUpdated() event here demonstrates how to update, but you'll need to implement your own trigger that causes the preview to render all charts on the page on client side updates.


© West Wind Technologies, 1996-2021 • Updated: 05/13/21
Comment or report problem with topic