mcpField
M
mermaid-diagrams

mermaid-diagrams

github.com/sammcjデザイン・UI167121 回インストール3 日前に更新
リポジトリ

mermaid-diagrams について

Mermaid 図の書式とスタイルに関するガイドラインです。フローチャート、状態図、クラス図の作成向けに、特殊なラベルの引用符、改行、配色テーマを説明します。

主な機能

  1. 01特殊文字を含むラベルの引用符ルール
  2. 02図のラベルにおける改行の指針
  3. 03フローチャート、状態図、クラス図のテーマ
  4. 04再利用可能な色クラス定義

活用シーン

  1. 01括弧を含む図のラベルを記述
  2. 02Mermaid 図の配色を統一
  3. 03フロー、状態、クラスを図示

インストール

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

$npx skills add https://github.com/sammcj/agentic-coding --skill mermaid-diagrams

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

詳細

Mermaid の図表作成ガイドライン

  • 括弧やその他の特殊文字を含むラベルは、二重引用符で囲みます。例：id1["Send request (POST)"]。括弧を引用符で囲まないと、パースエラーになります
  • 改行には \n の代わりに <br> を使用します
  • Mermaid はアイテムのラベル内の箇条書きに対応していません
  • フローチャート、ステート図、クラス図では、特に指定がない限り、次のカラーテーマを適用します
classDef inputOutput fill:#F5F5F5,stroke:#9E9E9E,color:#616161
classDef llm fill:#E8EAF6,stroke:#7986CB,color:#3F51B5
classDef components fill:#F3E5F5,stroke:#BA68C8,color:#8E24AA
classDef process fill:#E0F2F1,stroke:#4DB6AC,color:#00897B
classDef stop fill:#FFEBEE,stroke:#E57373,color:#D32F2F
classDef data fill:#E3F2FD,stroke:#64B5F6,color:#1976D2
classDef decision fill:#FFF3E0,stroke:#FFB74D,color:#F57C00
classDef storage fill:#F1F8E9,stroke:#9CCC65,color:#689F38
classDef api fill:#FFF9C4,stroke:#FDD835,color:#F9A825
classDef error fill:#FFCDD2,stroke:#EF5350,color:#C62828

コメント

Markdown 対応