$ loading▍
$ loading▍
Describe a diagram in text and watch it draw itself: flowcharts, sequence, class, state, ER, Gantt and more. Export crisp SVG or PNG, or share a link.
Mermaid
Saved in this browser as you type.
Preview
Rendering…
drag to pan · ctrl/⌘ + scroll to zoom · double-click to reset
Every diagram type Mermaid supports, redrawn a moment after you stop typing, with the error line pointed out when something's off.
Crisp SVG for docs and slides, or PNG at 2× or 4× with a transparent or solid background.
Send a link with the diagram in it, or copy a ```mermaid block for GitHub, GitLab, Notion or the Markdown Live Preview.
// faq
Mermaid is a text syntax for diagrams: you describe boxes and arrows in plain text and it draws them. GitHub, GitLab, Notion, Obsidian and many docs tools render it natively, so diagrams live next to your code and diff cleanly.
Flowcharts, sequence, class, state, entity-relationship, Gantt, pie, user journey, git graph, mindmap, timeline, quadrant charts and more. The templates menu has a starting point for the common ones.
Use “copy as Markdown” and paste it into a README, issue or pull request. GitHub renders ```mermaid code blocks as diagrams.
Export at 4× for print or large screens. Labels are drawn as SVG text so PNG export works everywhere; if you use custom fonts, they only appear if they're installed on your device.
Your draft is saved in this browser automatically. Nothing is uploaded; a share link contains the diagram text itself.
Looking for something bigger? The products are full apps: an encrypted password vault, self-hosted CI/CD, and more.