Mermaid (ソフトウェア)

Mermaid（マーメイド）は、Markdownに似たテキストベースの構文を使用して、フローチャート、シーケンス図、ガントチャートなどの図やグラフ（ダイアグラム）を生成するためのJavaScriptライブラリである。

主な目的は、ドキュメントと開発の実態が乖離していく「Doc-Rot」（ドキュメントの腐敗）問題を解決することにある。テキストベースであるため、Gitなどのバージョン管理システムと親和性が高く、ドキュメントを図とともにコードベースで管理することを容易にする。

2019年には、JavaScript Open Source Awardの「最もエキサイティングな技術の利用」 (The Most Exciting Use of Technology）部門を受賞した。

概要 Mermaidは、ブラウザやコマンドラインツール（CLI）、あるいはMermaidをサポートする各種アプリケーション上で、専用の構文で記述されたテキストをSVG形式の図にレンダリングする。

公式が提供する「Mermaid Live Editor」を使用することで、ブラウザ上でリアルタイムに構文を編集し、描画結果を確認しながら図を作成することができる。

主な特徴と構文 Mermaidは、Markdownの記述方法に触発されたシンプルで読みやすい構文を採用している。各ダイアグラムタイプ（後述）ごとに、専用の構文が定義されている。

サポートされる主な図の種類 Mermaidは以下のような、ソフトウェア開発やプロジェクト管理で頻繁に使用される多様な図をサポートしている。

フローチャート (Flowchart) プロセスの流れや意思決定を示す。シーケンス図 (Sequence Diagram) オブジェクト間のインタラクション（メッセージのやり取り）を時系列で示す。ガントチャート (Gantt Chart) プロジェクトのスケジュールやタスクの進捗を管理するために使用される。クラス図 (Class Diagram) オブジェクト指向プログラミングにおけるクラスの構造と関係性（継承、関連など）を示す。ステート図 (State Diagram) オブジェクトやシステムが取りうる状態と、その状態間の遷移を示す。 ER図 (Entity Relationship Diagram) データベース設計などで使用される、エンティティ（実体）とリレーション（関連）を示す。円グラフ (Pie Chart) 全体に対する各部分の割合を示す。要求図 (Requirement Diagram) システムの要求事項とその関係性を示す。 Gitグラフ (Gitgraph) Gitのブランチ、コミット、マージの履歴を視覚化する。

統合と利用例 Mermaidは、多くの主要なWebサービス、ドキュメントツール、Wiki、テキストエディタでネイティブサポートされているか、プラグインを通じて利用可能である。

ネイティブサポート

GitHub Markdownファイル（.md）やWiki内で、```mermaid のコードブロックを使用することで図を描画できる。 GitLab GitHubと同様に、Markdown内でネイティブサポートされている。 Azure DevOps WikiページでMermaid構文がサポートされている。 Notion 「Mermaid」ブロックとして挿入可能。 GitBook インテグレーション機能を通じてMermaidブロックを挿入できる。

主なプラグイン対応

ドキュメント生成ツール Sphinx、MkDocs、VuePress、VitePressなど。 Wikiエンジン MediaWiki、DokuWiki、TiddlyWikiなど。テキストエディタ Visual Studio Code、Atom、Vim、Obsidianなど。

脚注

Mermaid (ソフトウェア)

Źródło i licencja