Repolode
Submit
mermaid-js

mermaid-js/mermaid

Mermaid generates diagrams such as flowcharts, sequence diagrams and Gantt charts from Markdown-like text definitions.

Open-source alternative to:Lucidchartdraw.io

View on GitHubWebsite
Stars
90,776
Forks
9,374
Open issues
1,938
Last commit
10 hours ago

What is it?

Mermaid is a JavaScript and TypeScript diagramming tool that turns text definitions into rendered diagrams. You write a short text description such as a flowchart or sequence diagram, and Mermaid renders it as an SVG in the browser or during a build step. Because the diagram is plain text, it can be stored alongside code, edited in a pull request, and regenerated whenever the underlying system changes.

The project supports a wide range of diagram types, including flowcharts, sequence, class, state, ER, Gantt, pie, git graph, mindmap, timeline, user journey and C4 diagrams. It can be used through an npm package, a CDN script, or the online Live Editor, and GitHub renders Mermaid code blocks directly in Markdown files.

Mermaid includes a default sanitization pass for untrusted input and an optional sandboxed iframe rendering mode for sites that accept diagram code from external users, at the cost of some interactive features.

Key features

  • 01Renders flowcharts, sequence, class, state, ER, Gantt and many other diagram types from text.
  • 02Diagrams are plain text, so they diff and review cleanly in version control.
  • 03Works in GitHub Markdown, through an npm package, or via a CDN script.
  • 04Offers themes, colors, fonts and layout direction customization.
  • 05Provides a sandboxed rendering mode for untrusted diagram input.

Use cases

  • Keeping architecture and sequence diagrams in a repository next to the code they describe.
  • Embedding diagrams in GitHub README files and documentation sites.
  • Generating charts such as Gantt or pie charts inside a build pipeline.
  • Letting non-programmers draft diagrams in the online Live Editor.

Quick start

  1. 1

    Try diagrams instantly in the Mermaid Live Editor at mermaid.live

Topics

#diagrams#diagrams-as-code#flowchart#uml-diagrams#documentation#markdown#javascript#typescript#mindmap

FAQ

What is mermaid?
Mermaid generates diagrams such as flowcharts, sequence diagrams and Gantt charts from Markdown-like text definitions. Mermaid is a JavaScript and TypeScript diagramming tool that turns text definitions into rendered diagrams. You write a short text description such as a flowchart or sequence diagram, and Mermaid renders it as an SVG in the browser or during a build step. Because the diagram is plain text, it can be stored alongside code, edited in a pull request, and regenerated whenever the underlying system changes.
Is mermaid free to use? What license does it have?
mermaid is open source under the MIT license. Check the license terms before using it in commercial products.
Is mermaid still maintained?
Actively maintained. The last commit to mermaid was on Oct 20, 2026.
What can I use mermaid for?
Keeping architecture and sequence diagrams in a repository next to the code they describe. Embedding diagrams in GitHub README files and documentation sites. Generating charts such as Gantt or pie charts inside a build pipeline. Letting non-programmers draft diagrams in the online Live Editor.
How do I install mermaid?
Try diagrams instantly in the Mermaid Live Editor at mermaid.live
Where can I get mermaid?
The source code and installation instructions are on GitHub: https://github.com/mermaid-js/mermaid

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects