Mermaid Diagram in Obsidian

January 26, 2026

How to use Mermaid Diagram in Obsidian

Mermaid is a text-based diagram tool. You write simple syntax, and it renders diagrams automatically (Markdown, Obsidian, GitHub, etc.).

Wrap Mermaid code in a fenced block:

```mermaid
graph TD
  A --> B
  B --> C
```

Flowchart

graph LR
  Start --> Process --> End

Sequence diagram

sequenceDiagram
  Alice->>Bob: Hello
  Bob-->>Alice: Hi

Class diagram

classDiagram
  Animal <|-- Dog
  Animal : +int age

State diagram

stateDiagram-v2
  Idle --> Running

Gantt

gantt
  title Project
  Task1 :done, t1, 2024-01-01, 3d

I often find that my Mermaid diagram is too long to fit in Obsidian page size. Instead of zooming out, use Obsidian CSS script.

.markdown-preview-view .mermaid svg {
    max-width: 100%;
  }

This auto-scale Mermaid diagrams to page width.

Now it’s done. Try out Mermaid in your vault!