Mermaid
A JavaScript library that turns Markdown-like text into flowcharts, sequence diagrams, Gantt charts and more.
Flowcharts, sequence, ER and Gantt diagrams from code that diffs cleanly in version control.
Mermaid renders diagrams from a short text syntax, so documentation diagrams live in Markdown and update with the code. It suits developers and technical writers; it is not a drag-and-drop drawing tool.
What it is
You write a definition such as a flowchart or sequence diagram and Mermaid renders it as SVG in the page. The README lists 20+ diagram types including class, state, ER, Gantt, pie, Git graph, mindmap, timeline and Sankey, and GitHub renders Mermaid code blocks natively.
Who it's for
It suits developers, architects and docs teams who keep diagrams next to code and want reviewable diffs. It does not suit people who want to arrange shapes by hand; layout is automatic and fine control takes work.
Key features
20+ diagram types
Flowchart, sequence, class, state, ER, Gantt, pie, Git graph, mindmap, timeline, Sankey and more.
Markdown-style syntax
Diagrams are plain text, so they diff and review like code.
Native GitHub rendering
Mermaid code blocks render directly in Markdown on GitHub.
Live editor
Prototype at mermaid.live without installing anything.
Sandboxed render mode
A security level renders diagrams in a sandboxed iframe so scripts in user text cannot run.
Themes and layout options
Themes, colors, fonts and layout direction are configurable.
Up and running in 3 steps
Our honest verdict
What's great
- Diagrams stored as text show real diffs in pull requests, unlike image files.
- Already renders inside GitHub Markdown, so many teams need no setup at all.
- Includes a sandboxed iframe security level for sites that accept diagram text from the public.
- Drops into any web page via npm or a CDN such as jsDelivr.
Where it falls short
- You write syntax rather than drag shapes, so non-technical teammates face a learning curve (the live editor helps).
- Layout is automatic; precise positioning of a large diagram is hard compared with a drawing tool.
- Embedding in a public site needs care: the README warns that user-supplied diagram text can carry malicious scripts unless you choose a safe security level.
- The newer Mermaid.ai products (AI credits, workflow runs, team seats) are paid; the open-source library is only the rendering engine.
Pricing & license
The library is MIT-licensed and free to embed. Mermaid.ai, the company's hosted product, lists Basic (free, 3 diagrams), Plus at $10 per user per month and Premium at $20 per user per month, billed annually, and Enterprise on custom pricing (https://mermaid.ai/pricing).
Open remote AI-training roles
870 open remote AI-training roles, updated November 14, 2026; most pay $20–$170 an hour. Zekai lists them free; the application goes to the employer’s platform.
Alternatives
Use it, or have us set it up
FAQ
Do I need to install anything?
No for GitHub Markdown and the live editor. For your own site you add the mermaid package from npm or a CDN.
Is Mermaid safe to use with user-written diagrams?
The README says text from the public can contain scripts, and describes a sandboxed iframe security level that stops JavaScript in the diagram from running.
What does the paid Mermaid.ai cost?
Its pricing page shows Basic free, Plus at $10 per user per month and Premium at $20 per user per month billed annually; the open-source library stays MIT.
