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>

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

Check out Mermaid Sample Page

You can check out a Mermaid Sample Markdown Page by using File -> Open From Url and using the following Gist Url:

https://github.com/RickStrahl/MarkdownMonster/blob/master/SampleDocuments/MermaidCharts.md

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

Note that the preview is not rendering all the content correctly which is limitation of the IE control.

Limited Preview Support

Markdown Monster's internal preview has only very limited and sometimes incorrect support for previewing Mermaid generated charts due to the Internet Explorer Web Browser control used. You can however preview the document in your external browser using Shift-F12 - all modern browsers (Chrome, Firefox, Edge) can render Mermaid charts properly.

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 pages you will have to add the required script code to your own pages.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.1.2/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 you might need to update and re-render 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.


© West Wind Technologies, 2019 • Updated: 01/28/19
Comment or report problem with topic