Create Mermaid diagrams in Obsidian including flowcharts, sequence diagrams, class diagrams, and more. Use when visualizing processes, system architectures, workflows, or any structured relationships in Obsidian notes.
/plugin marketplace add BitYoungjae/marketplace/plugin install obsidian-blocks@bityoungjae-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
class-diagram.mdflowchart.mdgantt.mdgitgraph.mdmindmap.mdpie.mdreference.mdsequence.mdstate.mdObsidian has built-in Mermaid support. Use fenced code blocks with mermaid language identifier.
For common syntax (styling, comments, themes), see reference.md.
Rendering Differences: Obsidian's Mermaid version may lag behind mermaid.js releases. Some cutting-edge features may not work.
Theme Interaction: Diagram colors adapt to Obsidian theme. Use explicit styles for consistent appearance across themes.
Performance: Very large diagrams (50+ nodes) may slow down rendering. Split into multiple diagrams if needed.
Export: PDF export converts diagrams to images. For external sharing, capture as PNG/SVG.
No JavaScript: Click events and JavaScript callbacks are disabled for security.
| Use Case | Diagram Type | Keyword |
|---|---|---|
| Process flow, decision trees | Flowchart | flowchart |
| API calls, message passing | Sequence | sequenceDiagram |
| OOP design, relationships | Class | classDiagram |
| Project timeline, scheduling | Gantt | gantt |
| State machine, lifecycle | State | stateDiagram-v2 |
| Git branching strategy | Gitgraph | gitGraph |
| Brainstorming, hierarchies | Mindmap | mindmap |
| Proportions, percentages | Pie Chart | pie |
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
Key syntax:
TD (top-down), LR (left-right), BT, RL[rect], (rounded), {diamond}, [(cylinder)], ((circle))-->, -.-> (dotted), ==> (thick)-->|text| or -- text -->For details: flowchart.md
sequenceDiagram
participant C as Client
participant S as Server
participant D as Database
C->>S: HTTP Request
activate S
S->>D: Query
D-->>S: Result
S-->>C: Response
deactivate S
Key syntax:
->> (sync), -->> (response), -) (async)activate/deactivate or +/- suffixloop, alt/else, opt, par/and, criticalNote right of A: text, Note over A,B: textFor details: sequence.md
classDiagram
class Animal {
+String name
+int age
+makeSound() void
}
class Dog {
+fetch() void
}
Animal <|-- Dog : extends
Key syntax:
+ public, - private, # protected, ~ package<|-- inheritance, *-- composition, o-- aggregation, --> association+method(args) returnTypeFor details: class-diagram.md
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Requirements :a1, 2024-01-01, 7d
Design :a2, after a1, 5d
section Development
Implementation :2024-01-15, 14d
Testing :7d
Key syntax:
dateFormat: Date format (YYYY-MM-DD, etc.)name :id, start, duration or name :after id, durationdone, active, crit, milestoneFor details: gantt.md
stateDiagram-v2
[*] --> Idle
Idle --> Processing : start
Processing --> Success : complete
Processing --> Error : fail
Success --> [*]
Error --> Idle : retry
Key syntax:
[*]State1 --> State2 : eventstate Name { ... }state fork_name <<fork>>, <<join>>For details: state.md
gitGraph
commit id: "init"
branch develop
checkout develop
commit id: "feat-1"
commit id: "feat-2"
checkout main
merge develop id: "v1.0" tag: "release"
Key syntax:
commit: Add commit, optional id:, tag:, type:branch name: Create branchcheckout name: Switch branchmerge name: Merge branchFor details: gitgraph.md
mindmap
root((Project))
Frontend
React
TypeScript
Backend
Node.js
PostgreSQL
DevOps
Docker
CI/CD
Key syntax:
root((circle)), (rounded), [square], ))cloud((For details: mindmap.md
pie showData
title Browser Market Share
"Chrome" : 65
"Safari" : 19
"Firefox" : 8
"Edge" : 5
"Other" : 3
Key syntax:
title: Optional chart titleshowData: Display values on segments"Label" : valueFor details: pie.md
flowchart LR
A[Normal] --> B[Styled]
style B fill:#f96,stroke:#333,stroke-width:2px
flowchart LR
A:::highlight --> B --> C:::highlight
classDef highlight fill:#ff0,stroke:#f00,stroke-width:2px
flowchart TD
%% This is a comment
A --> B
For complete documentation on common features:
For diagram-specific guides (Session 2-4):
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.