Rendering Mermaid Charts

You can embed Mermaid Charts content into a Markdown document in Markdown Monster using either a Mermaid Markdown Code Snippet or using their Raw HTML Syntax. Markdown Monster can preview the resulting chart in the previewer.

Here's what the Mermaid Markdown Syntax looks like:

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

Alternately you can use the Raw Html Syntax that Mermaid natively uses:

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

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

Raw Html Syntax does not Html Encode

Note that if using the RawHtml syntax <div class="mermaid">, the Mermaid content between the brackets is not Html Encoded. This means you need to escape brackets < > with < >, double quotes " with &quote;, ampersands with & etc.

Using the triple tick mermaid syntax, the Mermaid content is Html Encoded. For this reason it's typically best to use the triple tick syntax, but the raw syntax is available for special needs that need to match the raw mermaid syntax.

Enabling and Disabling Mermaid Rendering

Mermaid rendering is enabled by default in v2.7.5 and later, but not enabled by default in prior versions. The setting is configurable as it adds a little overhead for checking for the Mermaid tags in content and adding a large file dependency if Mermaid content is found.

In order to enable or disable Mermaid diagram rendering in Markdown Monster you need to:

• Enable Mermaid Rendering (Tools | Settings | Mermaid Diagrams)
• You may have to restart Markdown Monster for the change in settings to take (RenderExtension has to reload/not load)

Specify Mermaid Script Version

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

If you're pasting a mermaid chart for the very first time into a document, the chart won't render because the associated script is not in the page. By default MM caches pages and replaces only the content in order to provide smooth updates. However, in this scenario the Mermaid script is not loaded which means no preview. There are several ways around this:

• Refresh the Browser (f5 or Refresh Browser from context Menu)
• Activate another tab then back to the tab with Mermaid
• Enable the AlwaysUsePreviewRefresh = true Configuration setting

Once Mermaid is enabled, MM automatically checks for Mermaid tags in the document and if it finds them adds the Mermaid library to the current page. It then renders the chart content using the standard Mermaid Charting syntax for its preview rendering.

JavaScript Code Required to Render Mermaid Charts

Markdown Monster automatically adds the necessary script to execute Mermaid chart to display diagrams in the previewer. There's nothing else you need to do for previewing Mermaid.

But this specific preview implementation is specific to Markdown Monster, and not part of the raw HTML or Markdown output - that is up to the hosting application that you plan to use the Markdown or rendered HTML in which has to support Mermaid rendering.

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.

The basics of this are:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<script>
    mermaid.initialize({startOnLoad:true});
</script>
<style>
    .mermaid {  /* add custom styling */  }
</style>

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 diagrams. The code below is from Markdown Monster which uses an event to trigger a re-render when the Previewer content is refreshed (without a full page reload):

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/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 Mermaid charts in your own HTML content to refresh as content is updated.

Generating Mermaid in Output

If you want to generate Mermaid output that is properly rendered there are a couple of ways you can do this:

• Print to PDF
• Save As HTML (self-Contained or loose files dependencies)

Print to PDF

PDF output can be generated with Markdown MOnster, but Mermaid diagrams will only work if you use the Print to PDF feature, rather than the Save As PDF functionality. The latter will not work with Mermaid diagrams, while the former does work to capture the Mermaid charts in PDF. Print to PDF uses graphics rendering of page output so it is more flexible for script generated output like Mermaid and MathML as opposed to the text/script based rendering in the Save As PDF feature.

To use this feature:

• Make sure the HTML Preview is active
• Use the Context Menu
• Use the Print Option
• Select Save As PDF
• Pick a file name to save to

Export to HTML

In order to export a page with Mermaid content you'll need to export including all of the related resources in the page, which includes the very large Mermaid library.

To use this feature:

• Make sure the HTML Preview is active
• Use the Context Menu
• Use the Print Option
• Select Save As HTML
• Select Save As Type Self-Contained, or Loose Files, or Zip
• Pick a file name to save to

If you choose self-contained the file will be very large due to the size of the Mermaid library. If you choose loose files all the files will be stored in a folder, or a zip file if you chose the Zip file option.