With Mermaid you can create charts and diagrams with just a few simple text commands. Mermaid perfectly integrates with Markdown, so it is very easy to embed Mermaid charts into Notebooks documents.

When embedding a Mermaid diagram in Markdown, make sure to enclose it in a fenced code block. This declares that the contained text is Mermaid code. Here is an example:

graph TD;

The leading and trailing backticks ``` form the code block, mermaid on the first line indicates that the contained code should be interpreted as Mermaid code, and everything in between is the actual Mermaid code.

There is one more hint: when copying Mermaid code and pasting it into a document, iOS or macOS may convert some of the characters to their smart counterparts. This could turn -- into , for example, which invalidates the Mermaid code. So if you encounter any issues, watch out for these smart characters.

How to Use Mermaid in Markdown