Mermaid lets you create diagrams using text-based syntax.
Use triple backticks and the mermaid keyword to render diagrams in Obsidian:
graph TD A --> B
ā¤ Flowcharts
graph TD
A[Start] --> B{Is it working?}
B -- Yes --> C[Great!]
B -- No --> D[Fix it]
D --> B
Basic Structure
graph TD A[Start] --> B{Is it working?} B -- Yes --> C[Great!] B -- No --> D[Fix it] D --> B
-
graph TD= Top-down -
graph LR= Left-to-right
Node Shapes
graph LR A[Rectangle] B(Rounded) C{Diamond} D((Circle)) E[[Subroutine]] F[/Parallelogram/] G[\Input/] H{{Database}}
Arrow Types
graph LR A --> B A --- C A -.-> D A ==> E A -->|Label| F
Subgraphs
graph TD subgraph Group 1 A1 --> A2 end subgraph Group 2 B1 --> B2 end A2 --> B1
š„ Sequence Diagram
sequenceDiagram participant Alice participant Bob Alice->>Bob: Hello Bob, how are you? Bob-->>Alice: I'm good, thanks!
š State Diagram
stateDiagram-v2 [*] --> Idle Idle --> Working : start() Working --> Completed : finish() Completed --> [*]
š Gantt Chart
gantt title Project Timeline dateFormat YYYY-MM-DD section Planning Requirements :a1, 2025-04-01, 3d Design :after a1, 5d section Development Coding :2025-04-10, 10d Testing :5d
š§ Mindmap
mindmap Root šæ Branch A š Leaf A1 š Leaf A2 šæ Branch B š Leaf B1
šļø Class Diagram
classDiagram class Animal { +String name +eat() } class Dog { +bark() } Animal <|-- Dog
š Entity Relationship Diagram (ERD)
erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE_ITEM : contains CUSTOMER { string name string email } ORDER { int id date orderDate }
š„§ Pie Chart
pie title Storage Breakdown "Apps" : 40 "Media" : 25 "System" : 20 "Other" : 15
š§© Callouts (Not Mermaid, but useful in Obsidian)
> [!note] Note Title
>
> This is a note callout.
Types: note, info, tip, warning, danger, example, quote
š§° Obsidian Tips
-
Use Live Preview or Reading View to see Mermaid diagrams.
-
Works out of the box ā no plugin required.
-
For advanced styling, use custom CSS snippets or the Mermaid Plugin.