用語集 › 🛠️ 開発ツール › Mermaid
【マーメイド】

Mermaid とは？

💡 テキストを書くだけで図が浮かび上がる魔法のインク
📌 このページのポイント
Mermaid: テキストから図を自動生成 ```mermaid graph LR A[開始] --> B{判定} B -->|Yes| C[処理] B -->|No| D[終了] → 自動変換 開始 判定 Yes No 処理 終了 対応する図の種類 フローチャート シーケンス図 ER図 ガントチャート マインドマップ GitHub / Notion / GitLabなどがネイティブ対応 画像ファイル不要でGitによるバージョン管理が可能
Mermaidのテキストから図への変換イメージ
ひよこ ひよこ

Mermaidって、テキストで図が描けるってどういうこと？

ペンギン先生 ペンギン先生

たとえば「A --> B --> C」と書くだけで、Aの箱からBの箱、Bの箱からCの箱に矢印が伸びるフローチャートが自動的に生成されるんだ。マウスでドラッグして図を描く必要がないよ

ひよこ ひよこ

フローチャート以外にも描けるの？

ペンギン先生 ペンギン先生

シーケンス図、ER図、ガントチャート、クラス図、状態遷移図、円グラフ、マインドマップなど、10種類以上の図に対応しているよ。技術ドキュメントで使いたい図はだいたいカバーされているね

ひよこ ひよこ

GitHubで使えるって聞いたけど本当？

ペンギン先生 ペンギン先生

そうだよ。GitHubのMarkdownファイルやIssue、PRの説明文に ```mermaid と書いてMermaid記法を書くと、自動的に図がレンダリングされるんだ。2022年からネイティブ対応していて、追加のツールは不要だよ

ひよこ ひよこ

画像ファイルで管理するのと何が違うの？

ペンギン先生 ペンギン先生

テキストだからGitで差分が見えるのが最大のメリットだよ。画像だと「何が変わったか」がわからないけど、Mermaidなら「矢印を1本追加した」とかがすぐわかる。レビューもしやすいし、コンフリクトの解消も簡単だね

ひよこ ひよこ

凝ったデザインにしたいときはどうするの？

ペンギン先生 ペンギン先生

テーマやスタイル設定でカラーやフォントを変えられるよ。ただし、ピクセル単位での細かい配置調整は苦手だから、プレゼン用の凝った図はdraw.ioやFigmaのほうが向いているね。Mermaidは「素早く、正確に、バージョン管理できる図」が得意なツールだよ

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「Mermaid」って出てきたら「テキストを書くだけで図を自動生成してくれるツール」と思えればだいたいOK！
📖 おまけ：英語の意味
「Mermaid」 ＝ 人魚
💬 「人魚」という意味の英単語が名前の由来。テキストという海の中から美しい図が浮かび上がる、というイメージだよ
🔗 あわせて読みたい
← 用語集にもどる