Markdown Monster Mermaid Sample

MarkdownMonster-Mermaid.md

Mermaid

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.

@icon-warning Internal Preview Limitations

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.

Sequence Diagram

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>

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

A Gannt Chart

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

Hmm, using MM 2.4.13, even in the browser preview, I still see the code and not the diagram
sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great!

Same. I just see the code and not the diagram too

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.

Please post things like this as a Github issue. Better to follow up on and for others to find.

I've created a GitHub issue for this:
RickStrahl/MarkdownMonster#960

And I think I have a fix for this as well.

Fixed in 2.5.7.1+