mcpField
M
mermaid

mermaid

github.com/wh-2099デザイン・UI299174 回インストール12 週間前に更新
リポジトリ

mermaid について

mermaidは、要件に合う図の種類を選び、対応する構文リファレンスを参照してMermaidコードを生成するスキルです。フローチャートからグラフ、アーキテクチャ図まで扱います。

主な機能

  1. 01要件に応じた図の種類の選択
  2. 02種類別の構文リファレンス参照
  3. 03Mermaidコードの生成
  4. 04テーマとスタイルの適用
  5. 05そのまま描画できる形式で出力

活用シーン

  1. 01プロセスや判断フローの図示
  2. 02API連携やクラス構造の整理
  3. 03タイムライン、データ、構成の可視化

インストール

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

$npx skills add https://github.com/wh-2099/mermaid-skill --skill mermaid

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

同梱ファイル

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

references/
architecture.md
block.md
c4.md
classDiagram.md
config-configuration.md
config-directives.md
config-layouts.md
config-math.md
config-theming.md
config-tidy-tree.md
cynefin.md
entityRelationshipDiagram.md
eventmodeling.md
examples.md
flowchart.md
gantt.md
gitgraph.md
ishikawa.md
kanban.md
mindmap.md
packet.md
pie.md
quadrantChart.md
radar.md
railroad.md
requirementDiagram.md
sankey.md
sequenceDiagram.md
stateDiagram.md
swimlanes.md

詳細

Mermaid 図ジェネレーター

ユーザーの要件に基づいて、高品質な Mermaid 図のコードを生成します。

ワークフロー

  1. 要件の理解: ユーザーの説明を分析し、最適な図の種類を判断します
  2. ドキュメントの確認: 該当する図の種類の構文リファレンスを読みます
  3. コードの生成: 仕様に従って Mermaid コードを生成します
  4. スタイルの適用: 適切なテーマとスタイル設定を適用します

図の種類のリファレンス

適切な図の種類を選択し、該当するドキュメントを読んでください。

種類ドキュメント用途
フローチャートflowchart.mdプロセス、判断、手順
シーケンス図sequenceDiagram.mdやり取り、メッセージング、API 呼び出し
クラス図classDiagram.mdクラス構造、継承、関連
状態図stateDiagram.md状態マシン、状態遷移
ER 図entityRelationshipDiagram.mdデータベース設計、エンティティ間の関係
ガントチャートgantt.mdプロジェクト計画、スケジュール
円グラフpie.md比率、分布
マインドマップmindmap.md階層構造、ナレッジグラフ
タイムラインtimeline.md歴史的な出来事、マイルストーン
Git グラフgitgraph.mdブランチ、マージ、バージョン
象限図quadrantChart.md4 象限分析
要求図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ユーザー体験のフロー
ZenUMLzenuml.mdシーケンス図(コードスタイル)

設定とテーマ

出力仕様

生成する Mermaid コードは、次の条件を満たす必要があります。

  1. そのまま描画できる正しい構文にする
  2. 適切な改行とインデントを使い、明確な構造にする
  3. 意味が明確なノード名を使用する
  4. 見た目を改善する必要がある場合はスタイルを含める

出力例

flowchart TD
    A[Start] --> B{Condition}
    B -->|Yes| C[Execute]
    B -->|No| D[End]
    C --> D

ユーザーの要件: $ARGUMENTS

コメント