OSS Tanbou
View on GitHub

Mermaid — Diagrams-as-code for flowcharts, sequences, UML, and more from Markdown-like text

OSS health 96
About these scores

Discovery score is an unbounded weighted, log-compressed index of stars, watchers, forks, and contributors. Growth momentum is its change over the observed period; OSS health is a 0–100 score from available repository recency, Community Health, and release data.

Stars
90,266
Primary language
TypeScript
License
MIT
Repository last updated
Sep 15, 2026

Overview

Mermaid is a TypeScript/JavaScript diagramming tool that renders flowcharts, sequence, class, state, ER, Gantt, mindmap, and other diagrams from Markdown-inspired text definitions. It integrates with tools including GitHub Markdown and keeps diagrams as version-control-friendly source text. The latest stable core package as of September 16, 2026 is mermaid@12.0.0.

Features and best fit

Based on official documentation; not hands-on tested · Content checked:

Keep 20+ diagram types as text source alongside documentation and code review

Flowcharts, sequence, class, state, ER, Gantt, mindmap, and other diagrams can be written as text and rendered through the Live Editor, GitHub Markdown, or application integrations. Built with shows TypeScript + JavaScript.

Sources: [2]

Mermaid 12 bundles ELK as the default layout and adds new appearance and UML capabilities

Mermaid 12 bundles ELK as the default layout engine, introduces redux-color/neo defaults, and adds UML use-case diagrams. Work also includes newer diagram forms such as agentflow-beta.

Sources: [3]

For teams that want architecture and workflow diagrams diffed and reviewed like code

Text definitions can act as the source of truth next to READMEs, ADRs, design docs, and generated documentation instead of storing an opaque drawing file.

Version 12 is a breaking release with new layout, appearance, and runtime floors

Mermaid 12 requires ES2024, Safari 17.4+, and Node.js 22.12+, and its default layout changes from dagre to ELK, so existing diagrams may move. Default theme/look also change. Pin layout/theme/look when visual stability matters, and review security configuration when rendering untrusted diagram text.

Sources: [3][2]

Official sources

  1. [1]mermaid-js/mermaid — GitHub repository metadata(2026-09-16)
  2. [2]Mermaid — README(2026-09-16)
  3. [3]Mermaid 12.0.0 release(2026-09-16)
Supplemental curator note

Version 12 changes default layout/theme/look and runtime floors. Pin configuration when existing diagram appearance must remain stable.

Try it in 3 steps

  1. 1

    Open the Live Editor

    Use the official Live Editor for the shortest evaluation path without installing a package.

    https://mermaid.live/
  2. 2

    Write a first diagram

    Edit the text definition and verify that the preview updates immediately.

    flowchart TD → A[Start] --> B[Done]
  3. 3

    Use the source text or export an image

    Keep the text in GitHub Markdown or export an image. Mermaid 12 changes default layout/theme/look, so pin configuration when appearance must remain stable.

    Copy Mermaid text / Export SVG or PNG / Embed in Markdown
Check the official README

Growth

Growth trends · Last 30 days

90,266 Stars

Trend data is still being collected.

Development activity

Last 90 days · weekly

Commits (last 30 days)
436
Open PRs
312

Development activity is still being collected.

Built with

Categories and tags

Categories

Tags

GitHub data

GitHub dataView detailed GitHub data
View on GitHub

GitHub Topics

  • documentation
  • flowchart
  • javascript
  • typescript
  • uml-diagrams
  • diagrams
  • diagrams-as-code
  • mindmap
Stars
90,266
Forks
9,262
Watchers
648
Open issues
1,473
Primary language
TypeScript
License
MIT
Repository last updated
Sep 15, 2026
Write a related article

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Report incorrect information

Tell us if any listing information is incorrect or outdated.