Skip to content

Mermaid diagram syntax in Obsidian

Mermaid is a diagramming and charting tool that uses text definitions to generate diagrams, which is natively supported within [[Obsidian]].^[600-developer-tools-obsidian-johnny-ob-037.md]

Syntax and Diagram Types

Mermaid diagrams are created inside standard code blocks by specifying the language identifier mermaid.^[600-developer-tools-obsidian-johnny-ob-037.md] Obsidian supports various diagram types, including flowcharts, sequence diagrams, and Gantt charts.

Flowcharts

Flowcharts can be oriented either horizontally or vertically using the graph directive^[600-developer-tools-obsidian-johnny-ob-037.md].

  • Horizontal Flowchart: Defined using graph LR (Left-Right).^[600-developer-tools-obsidian-johnny-ob-037.md]
  • Vertical Flowchart: Defined using graph TD (Top-Down).^[600-developer-tools-obsidian-johnny-ob-037.md]

Shape Syntax^[600-developer-tools-obsidian-johnny-ob-037.md]: * Square nodes: A[Text] * Rounded nodes: B(Text) * Rhombus (Decision) nodes: C{Text}

Connection Syntax^[600-developer-tools-obsidian-johnny-ob-037.md]: * Standard arrow: A --> B * Text label on arrow: C --> |label| D or C -- label --> D

Sequence Diagrams

Sequence diagrams illustrate object interactions in a specific time sequence^[600-developer-tools-obsidian-johnny-ob-037.md].

  • Syntax: Use sequenceDiagram followed by participant interactions^[600-developer-tools-obsidian-johnny-ob-037.md].
  • Message Types:
    • ->>: Solid line with arrow (Async/Sync request)^[600-developer-tools-obsidian-johnny-ob-037.md]
    • -->>: Dotted line with arrow (Response)^[600-developer-tools-obsidian-johnny-ob-037.md]
    • +/-: Optional activation indicators (e.g., ->>+ for activate, -->>- for deactivate)^[600-developer-tools-obsidian-johnny-ob-037.md]
  • Features: Supports loop blocks and Note annotations (e.g., Note right of John: Text).^[600-developer-tools-obsidian-johnny-ob-037.md]

Gantt Charts

Gantt charts are used for project scheduling and are defined using gantt.^[600-developer-tools-obsidian-johnny-ob-037.md]

Task Properties^[600-developer-tools-obsidian-johnny-ob-037.md]: * Status: done, active, or default (empty). * Scheduling: * Specific dates: 2014-01-06,2014-01-08 * Duration: 3d * Dependencies: after des1

Sources

^[600-developer-tools-obsidian-johnny-ob-037.md]