Mermaid Diagrams

Visualise diagrams in your Markdown with Mermaid

Updated over a week ago

Mermaid is a diagram and charting tool that allows you to quickly visualize data in a few lines of code. You can create:

  • Flowcharts

  • Sequence Diagrams

  • Class Diagrams

  • State Diagrams

  • Entity Relationship Diagrams

  • User Journeys

  • Gantt Charts

  • Pie Charts

  • Requirement Diagrams

Quick Flowchart Example

To get started with Mermaid in Supernotes create a code block and then label that as a Mermaid block, like so:

Write your Mermaid code inside the code block. Once you're done, finish the card and a little "sushi" button will appear in the bottom-right of the code block, to the left of the "copy code" button. Clicking the sushi button will process the mermaid and visualize it. In this view you can zoom and pan around the rendered diagram.

To find more tutorials and examples, head on over to the official Mermaid documentation.

Did this answer your question?