Skip to content

Mermaid Chart

Purpose

Code-first diagramming. Write diagrams as text (flowcharts, sequence diagrams, gantt charts, state diagrams, ER diagrams) and render to SVG. Works natively in Markdown Preview Enhanced (VS Code) and Obsidian plugins.

How we use it

Embedded in vault markdown files via ```mermaid code blocks. Renders live in Obsidian reading mode and VS Code markdown preview. Useful for governance diagrams, flow documentation, and architecture sketches that should live as text (diff-able, version-controllable).

Setup & credentials

MCP server pre-configured for validation + rendering. Free for basic use, paid for team features.

Owner

tbd

  • [[obsidian]] — native rendering in vault
  • [[excalidraw]], [[miro]], [[figma]] — alternative (non-code-first) diagram tools

Notes

Best for diagrams that need to live alongside code/documentation as text — unlike Figma or Miro which produce binary artifacts.