Mermaid
Generate diagrams from Markdown-like text, for docs and code.
- Stars
- 91k
- Forks
- 9.4k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 4 days ago
- Type
- Dev tool
What it is
Mermaid is a JavaScript tool that turns short text descriptions into diagrams such as flowcharts and sequence diagrams. You write the diagram in a Markdown-inspired syntax and the renderer draws it, so the diagram can be edited as plain text. Its stated purpose is to keep documentation up to date with development.
- Write a flowchart in text inside a Markdown file and render it on GitHub
- Create sequence diagrams to document how services talk to each other
- Generate diagrams automatically as part of a production script
- Build and share diagrams with the online Mermaid Live Editor
Great for
- Developers who want diagrams stored as text alongside their code and docs
- Teams whose documentation is written in Markdown and needs diagrams
- Non-programmers who want to make diagrams using the Live Editor
- Projects that generate documentation as part of a build or production script
Not ideal for
- People who need pixel-precise, freeform illustration; the README describes it as text-defined diagrams rendered by a renderer
- Users who need a visual drag-and-drop editor as their main workflow, since the README centers on text input via the Live Editor
How to get it
- 1
Install with a package manager
You'll need: Node.js (version not stated in the README excerpt)
Install the npm package
npm install mermaid - 2
Run it
- Install the mermaid package with npm, or use the Live Editor in the browser
- Write a diagram definition in Mermaid text syntax
- Render it with the library, or paste it into the Live Editor to see the result
- 3
Get the most out of it
- Try diagram definitions in the Live Editor before adding them to a project
- Use the Integrations and Usages list to find tools that already support Mermaid
- Follow the Beginner's Guide and Tutorials linked from the README
Downloads
Strengths
- Diagrams are plain text, so they are easy to edit, diff, and version-control
- Works inside tools such as GitHub, according to the README
- Large, active open-source project with a published documentation site
Trade-offs
- Layout and styling are controlled by the renderer, so fine visual control is limited by what the syntax supports
- Requires learning the Mermaid syntax for each diagram type
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| mermaid (this) | 91k | Dev tool | beginner | 4 days ago | Developers who want diagrams stored as text alongside their code and docs |
| editor.md | 14.3k | Library | beginner | 2.5 years ago | Web developers who want a Markdown input box inside their own site or admin panel |
| flowy | 12.1k | Library | intermediate | 2.3 years ago | Web developers adding a visual flowchart editor to an existing web app |
| docsify | 31.6k | Dev tool | beginner | 4 days ago | Open-source maintainers who want a documentation site from existing Markdown files |
| docz | 23.6k | Dev tool | intermediate | 12 months ago | React developers who want a documentation site for a component library |
| drawnix | 15k | App | beginner | 2 months ago | People who want a simple free whiteboard for brainstorming and diagrams |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.