How Obsidian renders Mermaid
Obsidian renders Mermaid natively from fenced code blocks with the mermaid language tag — no plugin required. Diagrams appear in reading view and in live preview.
The Mermaid version is bundled with the app, so it updates when Obsidian updates. Desktop and mobile releases can briefly differ, which occasionally makes a diagram render on one device and fail on another.
```mermaid
mindmap
root((Vault))
Notes
Diagrams
Templates
```What works well
Obsidian tends to carry a relatively recent Mermaid version, so newer diagram types often work in Obsidian before they work on GitHub or in Notion.
Diagrams inherit the vault's theme. Community themes and CSS snippets can restyle Mermaid output, which is powerful for personal knowledge bases.
What to watch out for
Theme and CSS-snippet styling is local to your vault: a diagram that looks great in your setup renders with default styling for anyone else, and differently again once pasted into GitHub or Notion.
Click directives and other interactions are limited by the app's security settings; do not rely on them.
Publishing pipelines (Obsidian Publish, static site exporters, sync to other tools) each render Mermaid with their own version and rules — validate against the weakest target in your pipeline, not against Obsidian itself.
On mobile, complex diagrams can be slow, and pinch-zooming large flowcharts is clumsy — smaller diagrams serve the reading experience better.
Recommended workflow
Author freely in Obsidian — it is one of the most capable Mermaid hosts. The risk is downstream: notes that later move to GitHub, GitLab, Notion, or a blog.
Before a diagram leaves your vault, run it through the MermaidPen studio with the preset that matches its destination, apply the safe repairs, and export SVG or PNG if the destination is unreliable.