Mermaid is a JavaScript based parsing engine that allows you to embed blocks of graph markup into a page. Markdown Monster supports two different approaches using either code block or HTML tag syntax to embed the mermaid blocks.
Note the MM internal preview can't properly display or refresh all chart types, but you can preview in your system browser via
Shift-F12
to see proper representation.
You can use a mermaid
code block:
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
to produce the following:
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alternately you can use <div class="mermaid"></div>
to embed the code block logic:
<div class="mermaid">
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
</div>
Here's another example (use Shift-F12
to preview):
```mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
</div>
```
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
It works, but I think the issue is that the preview has to do a force refresh after the pasted text because the Mermaid script is not loaded in the document.
The issue is that MM only loads mermaid content on demand and some updates do not reload the entire preview, but rather just push the new content in. Because that happens after the header loads the first refresh essentially can't load the Mermaid content. A full refresh of the browser forcing a reload of the entire document from disk fixes this.
Note that this is only an issue when the first mermaid chart is added. Once the document loads from disk with a Mermaid chart, or the page is re-activated via tab switch, everything works fine and additional mermaid diagrams entered by hand or pasted work fine. This is how I missed this as I've been testing with existing documents that have mermaid already embedded.
Not sure if there's a workaround for that.