Using Mermaid charts

Once enabled Mermaid charts can be added to any FAQ using the Mermaid syntax and wrapping the code in a div with the mermaid class. Eg:

<div class="mermaid"></div>

Chart code can be added to any FAQ. E.g:

<div class="mermaid">
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
</div>

The code above renders the following chart:

graph LR; A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D

More examples can be found on the Mermaid website here.

A live Mermaid editor can be used here: https://knsv.github.io/mermaid/live_editor/

Was this FAQ helpful?
FAQ details:
Published date: 10/02/2017
Last updated: 10/02/2017 (Support)
Author: Support
^ Top of Page