LogoOctarine Docs
Editing and Formatting

Mermaid

Generate diagrams via code

Mermaid lets you create diagrams and visualizations using text-based descriptions. From flowcharts to sequence diagrams, Mermaid transforms simple text into professional diagrams right within your notes.

Creating a Mermaid Diagram

  1. Slash command: Type /mermaid and press Enter
  2. Code block: Create a code block and set the language to mermaid
  3. Markdown: Use triple backticks with mermaid as the language
  4. Keyboard Shortcut: Use Cmd/Ctrl + Shift + M to add a block with an example.

Supported Diagram Types

Example

Basic flowchart with nodes and connections:

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do this]
    B -->|No| D[Do that]
    C --> E[End]
    D --> E

Learn More

For complete Mermaid syntax, advanced features, and additional diagram types, visit the official Mermaid documentation.