Mermaid
Generate diagrams via code
Need to visualize a process or create a diagram? Mermaid lets you do that with just text—no design tools required. Write a simple description, and Mermaid turns it into a professional-looking diagram right in your note.
Creating a Mermaid Diagram
There are a few ways to add one:
Type /mermaid and press Enter, or create a code block and set the language to mermaid. You can also use triple backticks with mermaid as the language if you're writing in Markdown. And if you want a quick start with an example, just press Cmd/Ctrl + Shift + M.
Example
Here's a basic flowchart to show you how it works:
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Do this]
B -->|No| D[Do that]
C --> E[End]
D --> E
That's it—Mermaid handles the rest and renders it for you.
Learn More
Mermaid supports flowcharts, sequence diagrams, class diagrams, and a lot more. For the full syntax and advanced features, check out the official Mermaid documentation.