Mermaid

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.

Viewing and Exporting Diagrams

Diagrams use your current theme's colors and update instantly when you switch themes.

Hover over a rendered diagram to:

• View fullscreen and zoom in, zoom out, or reset the zoom
• Download diagram as SVG or PNG

Exported files include the current theme's colors, so they look the same outside Octarine. PNG exports are rendered at 2x resolution.

Rendering Engine

Octarine renders diagrams with Pele, a lightweight renderer that supports every diagram type built into Mermaid 12.1 and reads the same syntax. Diagrams load quickly, and a note only loads the code for the diagram types it uses. Layout and visual style can differ slightly from diagrams rendered by mermaid.js on other sites.

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.