Markdown のコードブロックに `mermaid` と指定するだけでフローチャートやシーケンス図をブラウザ上で描画します。図のソースがテキストなので Git 差分管理ができます。
技術用語
394
Mermaid
マーメイド
体験区分：少しだけ触った
推奨読者レベル：Level 2-4
何をしてくれるか
どこで出会うか
GitHub や Notion のドキュメントで見かけます。AI に「Mermaid で構成図を出して」と頼むと README や PR にそのまま貼れる形で返ってきます。
イメージ
開発フローでの位置
設計・議論
ドキュメント作成
AI への依頼
レビュー・更新
2026.04·needs_review
「Mermaid で構成図を Claude に書いてもらって、PR にそのまま貼りました。」
Mermaidの見方
395
この用語の見どころ
1
役割
テキストから図を自動生成する軽量な記法です。
2
うれしさ
図がテキストなので Git 管理でき、AI にも生成を頼めます。
3
注意点
細かいレイアウト調整は苦手で、複雑な図には不向きです。
4
どこで役立つか
README・PR・仕様書など、テキスト主体のドキュメントで役立ちます。
5
はじめに
GitHub でのレンダリングと `graph TD` の基本構文を把握するところから始めます。
6
深掘り先
PlantUML、Excalidraw、Markdown
非エンジニアのつまずき
- 昔は AI 生成のクセが強く、図を整えるのに相当苦労した記憶があります。
- AI 利用者には自然な選択肢でも、それ以外の人には認知度が低く通じません。
- どこまで描けるのか、無料と有料の範囲の違いが分かりにくいです。
私のコメント
- 第一印象:フローチャートをテキストでさっと描けると知り、便利さに驚きました。
- 良い点:動的に更新できるため、即興で図を起こせる手軽さが嬉しいです。
- ダメな点:大きな図だと文字が小さくなり、構文エラーか描画失敗かの判別も難しいです。
- 誰向けか:今後さらに広がりそうな記法で、全ての人にとって触る価値があります。
関連用語
備考
GitHub の Mermaid サポートは 2022 年 2 月に正式対応（Markdown のコードブロックで自動レンダリング）。
F-140·term_tool
バイブコーディング図鑑