mcpField
M
mermaid-diagrams

mermaid-diagrams

github.com/ccheneyドキュメント61467 回インストール7 週間前に更新
リポジトリ

mermaid-diagrams について

Mermaid Diagramsは、提示されたプロセス、コード、スキーマ、関係をMermaid図に変換するスキルです。図の種類を選び、根拠にない事実を補わずに表現し、対象レンダラーに合う構文を作成します。

主な機能

  1. 01目的に応じた図の種類選択
  2. 02フローチャートとシーケンス図の作成
  3. 03データ、状態、クラス、サービスのモデル化
  4. 04提示された事実の保持と仮定の明示
  5. 05描画可能なMermaid構文の指針

活用シーン

  1. 01プロセスの手順と分岐を図示
  2. 02参加者間の呼び出し順を表示
  3. 03データベースのテーブルと関係を表現
  4. 04状態やサービス間の関係を記録

インストール

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

$npx skills add https://github.com/ccheney/robust-skills --skill mermaid-diagrams

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

同梱ファイル

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

references/
ADVANCED.md
ARCHITECTURE.md
CHEATSHEET.md
CLASS-ER.md
DATA-CHARTS.md
FLOWCHARTS.md
SEQUENCE.md
STATE-JOURNEY.md

詳細

Mermaid 図

指定されたプロセス、コード、スキーマ、または関係性を、依頼された Mermaid 図に変換します。ユーザーの明示的な指示は、このスキルのガイドラインより優先されます。出力形式の指定も同様です。

表現方法を選ぶ

示すべき事実と、出力先のレンダラーを確認します。形式が指定されておらず、テキストベースのシステム図やプロセス図が適している場合は、Mermaid を選ぶのが妥当です。明示的に指定された描画ツールや成果物の形式はそのまま維持します。

質問図
次に何が起きるか、どの経路をたどるか?flowchart
誰が誰を、どの順番で呼び出すか?sequenceDiagram
どのテーブルがあり、カーディナリティはどうなっているか?erDiagram
どのような状態と遷移があるか?stateDiagram-v2
型やサービスはどのように関連しているか?classDiagram またはサブグラフ付きのフローチャート
何がスケジュールされるか、何が測定されるか?リファレンスにある適切な計画/データ形式

ノード、エッジ、カーディナリティ、日付、値には、提供された根拠を使用します。概念上の仮定にはその旨を明記します。図の内容を左右する情報が欠けている場合は、システムの内容を勝手に作らず、確認してください。

レンダリング可能な結果を作る

  • mermaid のフェンス付きコードブロック、または指定された .mmd/レンダリング済みの成果物を返します。ブロックごとに図の宣言は1つにしてください。
  • 出力先でサポートされている安定した構文を優先します。例は Mermaid 11.16 で確認済みですが、ホストが古いバージョンを同梱している場合があります。
  • 表示ラベルやサブグラフ ID とは異なる、安定した ID をノードに付けます。句読点を含むラベルは引用符で囲み、予約語の end を ID に使用しないでください。%% コメントは独立した行に記述します。
  • ER 図の属性は1行に1つずつ記述します。名前に空白を含むシーケンス図の参加者にはエイリアスを付けます。
  • 読みやすさを損なう場合は、ノード数を固定の基準にせず図を分割します。

複雑な構文や修正した構文は、プロジェクトのレンダラーまたは利用可能な Mermaid CLI で検証します。成果物を作成する場合は、レンダリング結果を確認します。レンダリングできない場合は、その制限を明記します。単純な構文の回答では、新たなツールチェーンをインストールする必要はありません。

リファレンス

必要な図の種類またはレンダリングに関するトピックを参照します。

タスクリファレンス
フローチャート、サブグラフ、形状、エッジFLOWCHARTS.md
呼び出し、アクティベーション、ループ、条件分岐SEQUENCE.md
クラス、型、データベースの関係CLASS-ER.md
状態マシンとユーザージャーニーSTATE-JOURNEY.md
ガント、タイムライン、円グラフ、XY、サンキー、マインドマップ、gitGraphDATA-CHARTS.md
C4、アーキテクチャ、ブロック、カンバン、パケット、要件ARCHITECTURE.md
設定、スタイル、エクスポート、トラブルシューティングADVANCED.md
簡潔な構文とプラットフォームの確認CHEATSHEET.md

バージョンによって対応状況が異なる機能については、Mermaid documentation と出力先独自の対応状況に関する説明を確認します。

コメント