Mermaid
Create diagrams from markdown-like text
87.4k|stable|mermaid@11.14.0
import mermaid from 'mermaid';
mermaid.contentLoaded();
const graphDefinition = 'graph TD;A-->B;';
mermaid.render('myDiagram', graphDefinition);
Text-based diagram syntax — Write flowcharts, sequence diagrams, and UML using markdown-like notation.
Multiple diagram types — Supports flowcharts, sequence diagrams, class diagrams, state diagrams, mind maps, and more.
Live editor — Preview and modify diagrams in real-time with an interactive web interface.
GitHub integration — Embed diagrams directly in markdown files on GitHub and other platforms.
NPM/CDN distribution — Use as a JavaScript library or include via CDN in your projects.
Mermaid solves documentation rot by letting developers and non-programmers create diagrams as easily as writing markdown. With 87k+ stars and integration across GitHub, documentation platforms, and popular apps, it's the industry standard for diagram-as-code. Active development and strong community make it production-ready.
Node 12+ for development; browser with JavaScript support for usage
Source on GitHub
pavilion