Marked ( Markdown ) + Mermaid ( Flow Chart & Diagrams )

Struggling to get Mermaid - https://github.com/knsv/mermaid to work with Marked - https://github.com/chjj/marked From what I gather I should be able to write the following in mark

Solution 1:

I tested your code as far as to get the console.log writing the mermaid div.

There is nothing wrong with your marked instantiation and nothing wrong with your renderer. However... the markdown in the console log was not ok.

By adding new lines before and after the graph definition the expeced div was printed to the console.:

\ngraph TD;A-->B;A-->C;B-->D;C-->D;\n

I hope this helps.

/Knut

Solution 2:

I had that issue as well. Try this string format, it worked for me:

'graph TB\n'+'A --> B\n'+'A --> C\n'+'B --> D\n'+'C --> D\n'

Solution 3:

For me, Mermaid diagrams render fine in Marked 2 (version: 2.6.4).

Example markdown source:

<script src="https://unpkg.com/mermaid@8.8.4/dist/mermaid.min.js"></script>
```mermaid
graph TD;A-->B;A-->C;B-->D;C-->D;

```

Caveat: it seems Mermaid needs to be invoked twice after each edit. So after an edit, once Marked 2 has updated its streaming preview, I need to hit "Refresh".

Marked 2 settings:

• "Generating typographically correct quotes and punctuation" unchecked
• Syntax highlighting: unchecked
• Processor: either MultiMarkdown or Discount

Related posts on the Marked 2 forum:

• Using mermaid in Marked 2
• Mermaid Diagrams in Documents