mermaid について
mermaidは、要件に合う図の種類を選び、対応する構文リファレンスを参照してMermaidコードを生成するスキルです。フローチャートからグラフ、アーキテクチャ図まで扱います。
主な機能
- 01要件に応じた図の種類の選択
- 02種類別の構文リファレンス参照
- 03Mermaidコードの生成
- 04テーマとスタイルの適用
- 05そのまま描画できる形式で出力
活用シーン
- 01プロセスや判断フローの図示
- 02API連携やクラス構造の整理
- 03タイムライン、データ、構成の可視化
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ wh-2099/ mermaid-skill --skill mermaidインストール後、Claude Code で/mermaidを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/architecture.mdblock.mdc4.mdclassDiagram.mdconfig-configuration.mdconfig-directives.mdconfig-layouts.mdconfig-math.mdconfig-theming.mdconfig-tidy-tree.mdcynefin.mdentityRelationshipDiagram.mdeventmodeling.mdexamples.mdflowchart.mdgantt.mdgitgraph.mdishikawa.mdkanban.mdmindmap.mdpacket.mdpie.mdquadrantChart.mdradar.mdrailroad.mdrequirementDiagram.mdsankey.mdsequenceDiagram.mdstateDiagram.mdswimlanes.md詳細
Mermaid 図ジェネレーター
ユーザーの要件に基づいて、高品質な Mermaid 図のコードを生成します。
ワークフロー
- 要件の理解: ユーザーの説明を分析し、最適な図の種類を判断します
- ドキュメントの確認: 該当する図の種類の構文リファレンスを読みます
- コードの生成: 仕様に従って Mermaid コードを生成します
- スタイルの適用: 適切なテーマとスタイル設定を適用します
図の種類のリファレンス
適切な図の種類を選択し、該当するドキュメントを読んでください。
| 種類 | ドキュメント | 用途 |
|---|---|---|
| フローチャート | flowchart.md | プロセス、判断、手順 |
| シーケンス図 | sequenceDiagram.md | やり取り、メッセージング、API 呼び出し |
| クラス図 | classDiagram.md | クラス構造、継承、関連 |
| 状態図 | stateDiagram.md | 状態マシン、状態遷移 |
| ER 図 | entityRelationshipDiagram.md | データベース設計、エンティティ間の関係 |
| ガントチャート | gantt.md | プロジェクト計画、スケジュール |
| 円グラフ | pie.md | 比率、分布 |
| マインドマップ | mindmap.md | 階層構造、ナレッジグラフ |
| タイムライン | timeline.md | 歴史的な出来事、マイルストーン |
| Git グラフ | gitgraph.md | ブランチ、マージ、バージョン |
| 象限図 | quadrantChart.md | 4 象限分析 |
| 要求図 | requirementDiagram.md | 要件のトレーサビリティ |
| C4 図 | c4.md | システムアーキテクチャ(C4 モデル) |
| サンキー図 | sankey.md | 流れ、変換 |
| XY チャート | xyChart.md | 折れ線グラフ、棒グラフ |
| ブロック図 | block.md | システムコンポーネント、モジュール |
| パケット図 | packet.md | ネットワークプロトコル、データ構造 |
| カンバン | kanban.md | タスク管理、ワークフロー |
| アーキテクチャ図 | architecture.md | システムアーキテクチャ |
| レーダーチャート | radar.md | 多次元比較 |
| ツリーマップ | treemap.md | 階層データの可視化 |
| ユーザージャーニー | userJourney.md | ユーザー体験のフロー |
| ZenUML | zenuml.md | シーケンス図(コードスタイル) |
設定とテーマ
出力仕様
生成する Mermaid コードは、次の条件を満たす必要があります。
-
- そのまま描画できる正しい構文にする
- 適切な改行とインデントを使い、明確な構造にする
- 意味が明確なノード名を使用する
- 見た目を改善する必要がある場合はスタイルを含める
出力例
flowchart TD
A[Start] --> B{Condition}
B -->|Yes| C[Execute]
B -->|No| D[End]
C --> D
ユーザーの要件: $ARGUMENTS
コメント
Markdown 対応