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

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+