mcpField
C
charts-flow

charts-flow

github.com/vladm3105ドキュメント17109 回インストール1 日前に更新
リポジトリ

charts-flow について

charts-flowは、SDD文書のMermaidアーキテクチャ図を作成・管理するスキルです。図を相互参照付きの別ファイルに分け、構文検証とSVGプレビューを行います。

主な機能

  1. 01参照付きMermaid図ファイルの作成
  2. 02インライン図の別ファイルへの移行
  3. 03構文検証とSVGプレビュー生成
  4. 046種類のアーキテクチャ図に対応

活用シーン

  1. 01SDD文書へのアーキテクチャ図の追加
  2. 02複雑なインライン図のファイル移行
  3. 03複数文書間での図の再利用

インストール

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

$npx skills add https://github.com/vladm3105/aidoc-flow-framework --skill charts-flow

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

詳細

charts-flow

目的

SDD ドキュメント用の Mermaid アーキテクチャ図を生成し、管理します。図は親ドキュメントの隣にある個別の diagrams/ ファイルに配置します。これにより、親ドキュメントを軽量に保ってレンダリングしやすくするとともに、安定した図 ID と相互参照リンクによって親ドキュメントとの追跡可能性を維持します。

このプラグインで図を扱うスキルはこれだけです。Mermaid の生成、検証、SVG レンダリングはすべてここで行います。

使用するタイミング

以下の場合に charts-flow を使用します。

  • BRD、PRD、ADR、SPEC、または IPLAN にアーキテクチャ図（フローチャート、シーケンス図、クラス図、状態図、コンポーネント図、またはデプロイメント図）を追加する場合。
  • 既存のインライン mermaid ブロックを個別の図ファイルに移行する場合。
  • 複雑なインライン図が原因で親ドキュメントのレンダリングが遅い場合、または複数のドキュメントで図を再利用する必要がある場合。

単純な表やリスト（Markdown を使用）、インラインで問題なくレンダリングできる小さな図、または SDD 図の規約の対象外となるアーキテクチャ以外のチャート（ガント図、円グラフ）には使用しないでください。

動作

新しい図を作成する

  1. ファイル名から親ドキュメント ID（例：PRD-01）を特定し、そのフォルダーを探します。
  2. 親ドキュメントの隣に diagrams/ がなければ作成し、Document Control ブロック（親ドキュメントへのリンク、図の種類、日付）、概要、mermaid ブロック、親ドキュメントへのリンクを含む References セクションを記述した {PARENT-ID}-diag_{description}.md を作成します。
  3. SVG をレンダリングし（利用可能であれば mmdc CLI、そうでなければ Mermaid Live を使用）、構文を検証します。その後、図ファイルへのリンクとともに、折りたたみ可能な <details> ブロック内に SVG プレビューを親ドキュメントに埋め込みます。

インライン図を移行する

  • 親ドキュメント内の mermaid ブロックをすべて確認し、それぞれを個別の図ファイルに移動します（複数ある場合は番号を付けます）。その後、元のブロックを SVG プレビューと参照リンクに置き換え、ドキュメントの流れを保ちます。

対応する種類：フローチャート／グラフ、シーケンス図、クラス図、状態図、コンポーネント図、デプロイメント図。相互参照を双方向に解決できるよう、各図ファイルは同じ Document Control ＋ References の構成に従います。

図の規約（レイヤーごと）：図は視覚モデルを所有するレイヤーに関連付けます。BRD（C4 L1 ＋ DFD L1）、PRD（C4 L2 ＋ DFD L2 ＋主要なシーケンス図）、ADR（意思決定のシーケンス図）、SPEC（C4 L3 ＋ DFD L3）です。レイヤーテンプレートで指定された @diagram: タグを使用し、${CLAUDE_PLUGIN_ROOT}/framework/governance/DIAGRAM_STANDARDS.md に従ってください。

品質ゲート：図ファイルが正しい diagrams/ フォルダーにあること、ファイル名が {PARENT-ID}-diag_{description}.md と一致していること、親ドキュメントへのバックリンクを含む Document Control があること、Mermaid 構文が有効であること、SVG が埋め込まれていること、すべての相互参照が解決されること、SVG が 1 MB 未満であること。

関連リソース

  • 図の標準：${CLAUDE_PLUGIN_ROOT}/framework/governance/DIAGRAM_STANDARDS.md
  • ID とタグの標準：${CLAUDE_PLUGIN_ROOT}/framework/governance/ID_NAMING_STANDARDS.md
  • 図を所有するレイヤーテンプレート： ${CLAUDE_PLUGIN_ROOT}/framework/layers/01_BRD/BRD-TEMPLATE.yaml、 ${CLAUDE_PLUGIN_ROOT}/framework/layers/02_PRD/PRD-TEMPLATE.yaml、 ${CLAUDE_PLUGIN_ROOT}/framework/layers/05_ADR/ADR-TEMPLATE.yaml、 ${CLAUDE_PLUGIN_ROOT}/framework/layers/06_SPEC/SPEC-TEMPLATE.yaml
  • ロードマップのビジュアル：../adr-roadmap/SKILL.md
  • Mermaid：https://mermaid.js.org/ · https://mermaid.live

コメント

Markdown 対応