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.