Mermaid

WHAT IS IT?

Mermaid is a JavaScript library that turns Markdown-like text into SVG diagrams (flowcharts, sequence, class, Gantt, ER, state, journey…). The goal: write your diagrams inside the source code, version them with Git, and let GitHub, Notion, Obsidian, VS Code and most modern tools render them automatically.

WHY IS IT INTERESTING?

• Plain-text diagrams: No more binary .drawio files that can't be diffed. A PR touching a diagram reads like a code PR.
• Native support everywhere: GitHub, GitLab, Notion, Obsidian, Azure DevOps, VS Code, JetBrains… rendering is built into the platform, no pipeline needed.
• Wide catalog: Flowcharts, sequence, class, ER, state, Gantt, pie, git graph, journey, C4, mindmap, timeline, sankey, quadrant chart… Most technical-doc needs are covered.
• Live editor: mermaid.live lets you iterate quickly in a preview mode, then copy-paste the code into your docs.
• Embeddable: Available via npm, CDN, CLI (PNG/SVG rendering) and an API. Drops into any doc generator, blog or web app.

USE CASES

• Architecture diagrams in a README, versioned next to the code
• Sequence diagrams to document an API or auth flow
• Project roadmap as Gantt directly in the docs, no Excel or external tool
• ER data model sitting next to migrations in the repo
• CI/CD workflow or business-logic schematics in internal documentation