Mermaid JS

It's possible to add Mermaid JS diagrams to pages. To do this it needs to be turned on for the page by adding the following to the page frontmatter:

mermaid: true

Once turned on you can add diagrams by using the code block of the type mermaid.

For example:

<pre class="mermaid">
%%{init: {'theme':'forest'}}%%
graph TD
A[Public web] -->|HTTP request| B(Firewall)
B --> C{Is port open}
C -->|Yes| D[App]
C -->|No| E[Return error]
</pre>

Renders as:

%%{init: {'theme':'forest'}}%%
graph TD
A[Public web] -->|HTTP request| B(Firewall)
B --> C{Is port open}
C -->|Yes| D[App]
C -->|No| E[Return error]

Last updated: