OSS探訪
GitHubで見る

Mermaid — Markdown-like textからflowchart・sequence・UML等を生成するdiagrams-as-code library

OSS健全度 96
スコアの見方

発掘スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした独自指標（上限なし）。成長モメンタムは観測期間内の同スコアの差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
90,266
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/15

概要

Mermaidは、Markdown風text definitionからflowchart、sequence、class、state、ER、Gantt、mindmap等をrenderするTypeScript/JavaScript diagramming toolです。GitHub Markdownを含む多くのtoolへ統合され、diagramをsource textとしてversion controlできます。2026年9月16日時点のcore package最新安定版はmermaid@12.0.0です。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

20+ diagram typeをtext sourceとして管理し、docs/code reviewへ組み込む

flowchart、sequence、class、state、ER、Gantt、mindmap等をtextで記述でき、Live EditorやGitHub Markdown、application integrationでrenderできます。Built withはTypeScript + JavaScriptを表示します。

出典：[2]

12.0.0でELK default layout・新theme/look・UML use caseを導入

Mermaid 12はELKをdefault layout engineとしてbundleし、redux-color/neoのdefault appearanceを導入しました。UML use case diagramも追加され、agentflow-beta等の新しいdiagram表現も進んでいます。

出典：[3]

architectureやworkflow図をcodeと同じrepositoryでdiff/reviewしたいteamに

GUI drawing fileではなくtextをsource of truthにできるため、README・ADR・設計書・CI生成物と一緒にdiagramをversion controlしたい用途に向きます。

12.0.0はbreaking releaseで、layout・appearance・runtime floorが変わる

12.0.0はES2024、Safari 17.4+、Node.js 22.12+を要求し、default layoutがdagreからELKへ変わるため既存diagramの配置が変わり得ます。default theme/lookも変更されました。旧見た目を維持する場合はlayout/theme/lookを明示する必要があります。untrusted diagram入力ではsecurity configurationも確認します。

出典：[3][2]

参考にした公式資料

  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)
編集部からの補足

v12はdefault layout/theme/lookとruntime floorが変わるbreaking releaseです。既存diagramの見た目を固定したい場合は設定を明示してください。

3ステップで試す

  1. 1

    Live Editorを開く

    packageをinstallせず、公式Live Editorで最短評価できます。

    https://mermaid.live/
  2. 2

    最初のdiagramを書く

    text definitionを編集してpreviewが即時更新されることを確認します。

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

    textまたは画像として利用

    GitHub Markdown等へtextを保存するか画像としてexportします。v12ではlayout/theme/lookのdefaultが変わるため、見た目を固定する場合はconfigを明示します。

    Copy Mermaid text / Export SVG or PNG / Embed in Markdown
公式READMEで確認

成長

成長の推移 · 直近30日

90,266 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）
436
Open PR
312

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
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
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/15
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。

Mermaidとは？テキストから図を生成するDiagrams as Code OSSを解説 | OSS探訪