Markdown のコードブロックに `mermaid` と指定するだけでフローチャートやシーケンス図をブラウザ上で描画します。図のソースがテキストなので Git 差分管理ができます。
技術用語
394
Mermaid
マーメイド
体験区分：少しだけ触った
推奨読者レベル：Level 2-4
何をしてくれるか
どこで出会うか
GitHub や Notion のドキュメントで見かけます。AI に「Mermaid で構成図を出して」と頼むと README や PR にそのまま貼れる形で返ってきます。
Before / After
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 への依頼
レビュー・更新
関連用語
F-140·term_tool
バイブコーディング図鑑