Octarine
Editing and Formatting

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.