Skip to content

Mermaid diagrams in Obsidian

Mermaid is a diagramming and charting tool that is supported natively by Obsidian.^[600-developer__tools__obsidian__Johnny-OB-037.md] It allows users to create a wide variety of visual graphics—such as flowcharts, sequence diagrams, and Gantt charts—directly within markdown notes using text-based code.^[600-developer__tools__obsidian__Johnny-OB-037.md]

To render a diagram, users must enclose the specific Mermaid syntax within a fenced code block designated for the language.^[600-developer__tools__obsidian__Johnny-OB-037.md]

Diagram Types

Obsidian's support for Mermaid extends to several standard diagram types, allowing for the visualization of logic, time, and project management.

Flowcharts

Flowcharts can be generated to visualize processes or algorithms.^[600-developer__tools__obsidian__Johnny-OB-037.md] The direction of the flow is defined by the graph declaration:

  • Horizontal Flowcharts (graph LR): This configuration renders the flow of the diagram from left to right.^[600-developer__tools__obsidian__Johnny-OB-037.md]
  • Vertical Flowcharts (graph TD): This configuration renders the flow of the diagram from top to down.^[600-developer__tools__obsidian__Johnny-OB-037.md]

Within these graphs, nodes can represent different shapes (e.g., squares [...] for steps, rounded brackets (...) for start/end points, and braces {...} for conditions), and arrows (-->) define the relationships between them.^[600-developer__tools__obsidian__Johnny-OB-037.md]

Sequence Diagrams

Sequence diagrams are used to show the interaction between different participants or objects over time.^[600-developer__tools__obsidian__Johnny-OB-037.md] The syntax uses specific operators to define the type of message:

  • ->>: Used to depict a message sent from one participant to another (e.g., Alice->>John: Hello John).^[600-developer__tools__obsidian__Johnny-OB-037.md]
  • -->>: Used to depict a reply or return message (e.g., John-->>Alice: Hi Alice).^[600-developer__tools__obsidian__Johnny-OB-037.md]
  • + and -: These activation modifiers can be appended to show focus or control, such as ->>+ to activate a participant.^[600-developer__tools__obsidian__Johnny-OB-037.md]

These diagrams also support loops and notes to add context to specific parts of the sequence.^[600-developer__tools__obsidian__Johnny-OB-037.md]

Gantt Charts

Project timelines and schedules can be visualized using Gantt charts.^[600-developer__tools__obsidian__Johnny-OB-037.md] The syntax allows for the definition of tasks, their dates, duration, and current status (e.g., done or active).^[600-developer__tools__obsidian__Johnny-OB-037.md]

Sources