mcpField
M
mermaid-diagrams

mermaid-diagrams

github.com/oakoss開発20170 回インストール11 週間前に更新
リポジトリ

mermaid-diagrams について

mermaid-diagramsは、Mermaidのテキスト定義から図を作成するスキルです。Markdownやドキュメントサイトで、アーキテクチャ、データモデル、フロー、タイムラインを記録する開発者向けです。

主な機能

  1. 01フローチャートとシーケンス図
  2. 02ER図とクラス図
  3. 03状態図とマインドマップ
  4. 04ガントチャートとタイムライン
  5. 05アーキテクチャ図、C4図など

活用シーン

  1. 01システムアーキテクチャの文書化
  2. 02データモデルと関係の可視化
  3. 03リクエストフローの図示
  4. 04ドキュメントへのプロジェクトタイムライン追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oakoss/agent-skills --skill mermaid-diagrams

インストール後、Claude Code で/mermaid-diagramsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
class-diagrams.md
entity-relationship.md
extended-diagrams.md
flowcharts.md
other-diagrams.md
sequence-diagrams.md

詳細

Mermaid 図

概要

Mermaid は、Markdown に着想を得たテキスト定義を SVG 図にレンダリングする、JavaScript ベースの作図ツールです。フローチャート、シーケンス図、ER 図、クラス図、状態図、ガントチャート、円グラフ、マインドマップ、Git グラフを Markdown ファイル内で直接作成できます。

使用する場面： システムアーキテクチャのドキュメント化、データモデルの可視化、リクエストフローの図解、プロジェクトのタイムライン作成、GitHub／GitLab の README やドキュメントサイトへの図の埋め込み。

使用しない場面： ピクセル単位で正確なデザインモックアップ、インタラクティブなダッシュボード、カスタムアートワークや、階層・関係構造を超える複雑な空間レイアウトが必要な図。

クイックリファレンス

図の種類宣言主なポイント
フローチャートflowchart TD方向：TB、TD、BT、RL、LR。サブグラフをサポート
シーケンス図sequenceDiagram参加者、メッセージ、ループ、alt／opt／par ブロック
ER 図erDiagramカラスの足記法、PK／FK／UK 属性
クラス図classDiagramUML の関係、可視性修飾子、注釈
状態図stateDiagram-v2遷移、複合状態、フォーク／ジョイン、選択
ガントチャートganttセクション、日付／期間付きタスク、マイルストーン
円グラフpie数値を含むラベル、任意のタイトル
マインドマップmindmapインデントに基づく階層、複数のノード形状
Git グラフgitGraphコミット、ブランチ、マージ、チェリーピック、タグ
アーキテクチャ図architecture-betaグループ内のサービス、方向付きエッジ（T／B／L／R）
ブロック図block-beta列レイアウト、ブロック矢印、ネストされたブロック
タイムラインtimelineイベントを含む期間、グループ化用のセクション
サンキーダイアグラムsankey-betaノード間のフロー量、CSV 形式のデータ
XY チャートxychart-betax／y 軸を使った棒グラフと折れ線グラフ
象限図quadrantChartラベル付きの軸とデータポイントを備えた四象限プロット
カンバンkanbanタスクカード、担当者、優先度を含む列
パケット図packet-betaビット範囲フィールドを含むネットワークパケット構造
要件図requirementDiagram要件、要素、検証リンク
C4 図C4ContextC4 モデル：コンテキスト、コンテナー、コンポーネント、デプロイメント

よくある間違い

間違い正しいパターン
flowchart の代わりに graph を使うサブグラフのエッジや新しい機能には flowchart を使います
シーケンスで矢印の後にスペースがないAlice->>Bob: msg ではなく Alice->>Bob:msg とします
ER 図でカーディナリティの順序が間違っている左のカーディナリティ、線、右のカーディナリティの順にします
サブグラフ／ループ／alt の後に end を忘れるすべてのブロックキーワードに対応する end が必要です
予約語をノード ID として使う予約語を引用符で囲むか、エイリアスを使います
言語タグのないコードブロックを使う言語指定子として常に ```mermaid を使います
v1 と v2 の状態図構文を混在させる現行機能では一貫して stateDiagram-v2 を使います
特殊文字を含むラベルを引用符で囲まない特殊文字を含むラベルは二重引用符で囲みます
ガントチャートで dateFormat がないタスク定義の前に必ず dateFormat を宣言します
マインドマップでスペースの代わりにタブを使うマインドマップのインデントにはタブではなくスペースが必要です

委任

  • 図の検出と調査：コードベース内の既存の図を見つけるには Explore エージェントを使います
  • 図のレビュー：図の正確性をコードと照合して確認するには Task エージェントを使います
  • アーキテクチャのドキュメント作成：ドキュメントの品質を確認するには code-reviewer エージェントを使います

参考資料

コメント

Markdown 対応