Mermaid (ソフトウェア)
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2025/11/14 15:51 UTC 版)
|
この記事の出典や参考文献は、一次資料や記事主題の関係者による情報源に頼っています。
|
|
この記事には大規模言語モデル（生成AI）による文章が転載されている可能性があります。 (2025年11月)
|
 |
|
| 開発元 | Knut Sveidqvistと貢献者 |
|---|---|
| 初版 | 2014年 |
| 最新版 | |
| リポジトリ | |
| プログラミング 言語 |
JavaScript |
| 対応OS | クロスプラットフォーム |
| 種別 | 図やグラフの生成 |
| ライセンス | MITライセンス |
| 公式サイト | mermaid |
Mermaid（マーメイド）は、Markdownに似たテキストベースの構文を使用して、フローチャート、シーケンス図、ガントチャートなどの図やグラフ（ダイアグラム）を生成するためのJavaScriptライブラリである[2][3]。
主な目的は、ドキュメントと開発の実態が乖離していく「Doc-Rot」（ドキュメントの腐敗）問題を解決することにある[3]。テキストベースであるため、Gitなどのバージョン管理システムと親和性が高く、ドキュメントを図とともにコードベースで管理することを容易にする[3]。
2019年には、JavaScript Open Source Awardの「最もエキサイティングな技術の利用」 (The Most Exciting Use of Technology）部門を受賞した[4]。
概要
Mermaidは、ブラウザやコマンドラインツール（CLI）[5]、あるいはMermaidをサポートする各種アプリケーション上で、専用の構文で記述されたテキストをSVG形式の図にレンダリングする[2][3]。
公式が提供する「Mermaid Live Editor」[6]を使用することで、ブラウザ上でリアルタイムに構文を編集し、描画結果を確認しながら図を作成することができる。
主な特徴と構文
Mermaidは、Markdownの記述方法に触発されたシンプルで読みやすい構文を採用している[2]。各ダイアグラムタイプ（後述）ごとに、専用の構文が定義されている。
サポートされる主な図の種類
Mermaidは以下のような、ソフトウェア開発やプロジェクト管理で頻繁に使用される多様な図をサポートしている。
- フローチャート (Flowchart)
- プロセスの流れや意思決定を示す[7]。
- シーケンス図 (Sequence Diagram)
- オブジェクト間のインタラクション（メッセージのやり取り）を時系列で示す[8]。
- ガントチャート (Gantt Chart)
- プロジェクトのスケジュールやタスクの進捗を管理するために使用される[9]。
- クラス図 (Class Diagram)
- オブジェクト指向プログラミングにおけるクラスの構造と関係性（継承、関連など）を示す[10]。
- ステート図 (State Diagram)
- オブジェクトやシステムが取りうる状態と、その状態間の遷移を示す[11]。
- ER図 (Entity Relationship Diagram)
- データベース設計などで使用される、エンティティ（実体）とリレーション（関連）を示す[12]。
- 円グラフ (Pie Chart)
- 全体に対する各部分の割合を示す[13]。
- 要求図 (Requirement Diagram)
- システムの要求事項とその関係性を示す[14]。
- Gitグラフ (Gitgraph)
- Gitのブランチ、コミット、マージの履歴を視覚化する[15]。
統合と利用例
Mermaidは、多くの主要なWebサービス、ドキュメントツール、Wiki、テキストエディタでネイティブサポートされているか、プラグインを通じて利用可能である[16]。
ネイティブサポート
- GitHub
-
Markdownファイル（
.md）やWiki内で、```mermaidのコードブロックを使用することで図を描画できる[3][17]。 - GitLab
- GitHubと同様に、Markdown内でネイティブサポートされている[18]。
- Azure DevOps
- WikiページでMermaid構文がサポートされている[19]。
- Notion
- 「Mermaid」ブロックとして挿入可能[16]。
- GitBook
- インテグレーション機能を通じてMermaidブロックを挿入できる[20]。
主なプラグイン対応
- ドキュメント生成ツール
- Sphinx、MkDocs、VuePress、VitePressなど。
- Wikiエンジン
- MediaWiki、DokuWiki、TiddlyWikiなど。
- テキストエディタ
- Visual Studio Code、Atom、Vim、Obsidianなど。
脚注
- ^ “Release 11.0.0”. 23 August 2024. 2024年9月22日閲覧.
- ^ a b c “About Mermaid” (英語). mermaid.js.org. 2025年11月14日閲覧。
- ^ a b c d e “mermaid/README.md at mermaid@11.12.1 · mermaid-js/mermaid” (英語). GitHub. 2025年11月14日閲覧。
- ^ “JavaScript Open Source Awards - GitNation” (英語). osawards.com. 2025年11月14日閲覧。
- ^ “GitHub - mermaid-js/mermaid-cli at 11.12.0” (英語). GitHub. GitHub, Inc.. 2025年11月14日閲覧。
- ^ “Mermaid” (英語). mermaid.js.org. 2025年11月14日閲覧。
- ^ “Flowcharts Syntax” (英語). mermaid.js.org. 2025年11月14日閲覧。
- ^ “Sequence diagrams” (英語). mermaid.js.org. 2025年11月14日閲覧。
- ^ “Gantt diagrams” (英語). mermaid.js.org. 2025年11月14日閲覧。
- ^ “Class diagrams” (英語). mermaid.js.org. 2025年11月14日閲覧。
- ^ “State diagrams” (英語). mermaid.js.org. 2025年11月14日閲覧。
- ^ “Entity Relationship Diagrams” (英語). mermaid.js.org. 2025年11月14日閲覧。
- ^ “Pie chart diagrams” (英語). mermaid.js.org. 2025年11月14日閲覧。
- ^ “Requirement Diagram” (英語). mermaid.js.org. 2025年11月14日閲覧。
- ^ “GitGraph Diagrams” (英語). mermaid.js.org. 2025年11月14日閲覧。
- ^ a b “Integrations” (英語). mermaid.js.org. 2025年11月14日閲覧。
- ^ Woodward, Martin; Biagianti, Adam (14 February 2022). “Include diagrams in your Markdown files with Mermaid”. The GitHub Blog (英語). GitHub, Inc. 2025年11月14日閲覧.
- ^ “GitLab Flavored Markdown (GLFM) | GitLab Docs”. docs.gitlab.com. 2025年11月14日閲覧。
- ^ “Markdown Syntax for Files, Widgets, Wikis - Azure DevOps” (英語). learn.microsoft.com. Microsoft. 2025年11月14日閲覧。
- ^ “Mermaid – GitBook Integrations” (英語). www.gitbook.com. 2025年11月14日閲覧。
関連項目
外部リンク
- 公式ウェブサイト
- Mermaid Live Editor - 公式ライブエディタ
- mermaid - GitHub
- Mermaid (ソフトウェア)のページへのリンク
