mermaid-diagrams について
Mermaid-diagramsは、Mermaidのテキスト構文でソフトウェア図を作成・管理するスキルです。設計やアーキテクチャを記録する開発者向けで、図をコードとともにバージョン管理できます。
主な機能
- 01クラス図とシーケンス図の作成
- 02フローチャートとER図の作成
- 03C4図、状態図、ガントチャートの作成
- 04frontmatterによるテーマ設定
- 05Markdownでの描画と画像エクスポート
活用シーン
- 01ソフトウェア構成とコンポーネントの記録
- 02APIのやり取りの可視化
- 03データベーススキーマの設計
- 04図をコードとともにバージョン管理
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/mermaid-diagramsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
README.mdreferences/advanced-features.mdc4-diagrams.mdclass-diagrams.mderd-diagrams.mdflowcharts.mdsequence-diagrams.md詳細
Mermaid ダイアグラム
Mermaid のテキストベースの構文を使って、本格的なソフトウェア図を作成します。Mermaid は簡単なテキスト定義から図を描画するため、図をバージョン管理でき、簡単に更新でき、コードと一緒に保守できます。
基本構文
すべての Mermaid ダイアグラムは次のパターンに従います:
diagramType
definition content
重要な原則:
- 1 行目でダイアグラムの種類を宣言します（例:
classDiagram、sequenceDiagram、flowchart） - コメントには
%%を使います - 改行とインデントは可読性を高めますが、必須ではありません
- 未知の単語はダイアグラムを壊します。パラメーターは無視されます（エラーになりません）
ダイアグラムの種類の選び方
適切なダイアグラムの種類を選びましょう:
-
クラス図 - ドメインモデリング、OOP 設計、エンティティ間の関係
- ドメイン駆動設計のドキュメント
- オブジェクト指向のクラス構造
- エンティティの関係と依存関係
-
シーケンス図 - 時間的な相互作用、メッセージのフロー
- API のリクエスト/レスポンスのフロー
- ユーザー認証のフロー
- システムコンポーネント間の相互作用
- メソッド呼び出しのシーケンス
-
フローチャート - プロセス、アルゴリズム、決定木
- ユーザージャーニーとワークフロー
- ビジネスプロセス
- アルゴリズムのロジック
- デプロイパイプライン
-
エンティティ関係図（ERD） - データベーススキーマ
- テーブル間の関係
- データモデリング
- スキーマ設計
-
C4 図 - 複数のレベルでのソフトウェアアーキテクチャ
- システムコンテキスト（システムとユーザー）
- コンテナ（アプリケーション、データベース、サービス）
- コンポーネント（内部構造）
- コード（クラス/インターフェースのレベル）
-
状態図 - ステートマシン、ライフサイクルの状態
-
Git グラフ - バージョン管理のブランチ戦略
-
ガントチャート - プロジェクトのタイムライン、スケジュール管理
-
円グラフ/棒グラフ - データの可視化
クイックスタートの例
クラス図（ドメインモデル）
classDiagram
Title -- Genre
Title *-- Season
Title *-- Review
User --> Review : creates
class Title {
+string name
+int releaseYear
+play()
}
class Genre {
+string name
+getTopTitles()
}
シーケンス図（API フロー）
sequenceDiagram
participant User
participant API
participant Database
User->>API: POST /login
API->>Database: Query credentials
Database-->>API: Return user data
alt Valid credentials
API-->>User: 200 OK + JWT token
else Invalid credentials
API-->>User: 401 Unauthorized
end
フローチャート（ユーザージャーニー）
flowchart TD
Start([User visits site]) --> Auth{Authenticated?}
Auth -->|No| Login[Show login page]
Auth -->|Yes| Dashboard[Show dashboard]
Login --> Creds[Enter credentials]
Creds --> Validate{Valid?}
Validate -->|Yes| Dashboard
Validate -->|No| Error[Show error]
Error --> Login
ERD（データベーススキーマ）
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : includes
USER {
int id PK
string email UK
string name
datetime created_at
}
ORDER {
int id PK
int user_id FK
decimal total
datetime created_at
}
詳細リファレンス
特定のダイアグラムの種類について詳しくは、以下を参照してください:
- references/class-diagrams.md - ドメインモデリング、関係（関連、コンポジション、集約、継承）、多重度、メソッド/プロパティ
- references/sequence-diagrams.md - アクター、参加者、メッセージ（同期/非同期）、アクティベーション、ループ、alt/opt/par ブロック、ノート
- references/flowcharts.md - ノードの形状、接続、判断ロジック、サブグラフ、スタイル設定
- references/erd-diagrams.md - エンティティ、関係、カーディナリティ、キー、属性
- references/c4-diagrams.md - システムコンテキスト、コンテナ、コンポーネント図、境界
- references/advanced-features.md - テーマ、スタイル、設定、レイアウトオプション
ベストプラクティス
- シンプルに始める - 中核のエンティティ/コンポーネントから始め、詳細は段階的に追加します
- 意味のある名前を使う - 明確なラベルは図を自己説明的にします
- 十分にコメントする - 複雑な関係を説明するために
%%コメントを使います - 焦点を絞る - 1 つの図に 1 つの概念を。大きな図は複数の焦点を絞ったビューに分割します
- バージョン管理する - 更新しやすいように
.mmdファイルをコードと一緒に保存します - 文脈を加える - 図の目的を説明するために、タイトルとノートを含めます
- 反復する - 理解が深まるにつれて図を洗練させます
設定とテーマ
フロントマターを使って図を設定します:
---
config:
theme: base
themeVariables:
primaryColor: "#ff6b6b"
---
flowchart LR
A --> B
利用可能なテーマ: default、forest、dark、neutral、base
レイアウトオプション:
layout: dagre（デフォルト）- 従来のバランスの取れたレイアウトlayout: elk- 複雑な図向けの高度なレイアウト（統合が必要）
ルックオプション:
look: classic- 従来の Mermaid のスタイルlook: handDrawn- スケッチ風の外観
エクスポートとレンダリング
ネイティブサポート:
- GitHub/GitLab - Markdown 内で自動的にレンダリングされます
- VS Code - Markdown Mermaid 拡張機能を使用
- Notion、Obsidian、Confluence - 組み込みでサポート
エクスポートオプション:
- Mermaid Live Editor - PNG/SVG エクスポートに対応したオンラインエディター
- Mermaid CLI -
npm install -g @mermaid-js/mermaid-cliを実行し、その後mmdc -i input.mmd -o output.pngを実行 - Docker -
docker run --rm -v $(pwd):/data minlag/mermaid-cli -i /data/input.mmd -o /data/output.png
よくある落とし穴
- 文字の破損 - コメント内で
{}を使用しないでください。特殊文字には適切なエスケープシーケンスを使用してください - 構文エラー - スペルミスがあるとダイアグラムが壊れます。Mermaid Live で構文を検証してください
- 過度な複雑化 - 複雑なダイアグラムは、焦点を絞った複数のビューに分割してください
- 関係の欠落 - エンティティ間の重要な接続はすべて文書化してください
ダイアグラムを作成するタイミング
次の場合は必ずダイアグラムを作成してください:
- 新しいプロジェクトや機能を開始するとき
- 複雑なシステムを文書化するとき
- アーキテクチャの決定を説明するとき
- データベーススキーマを設計するとき
- リファクタリングの計画を立てるとき
- 新しいチームメンバーをオンボーディングするとき
ダイアグラムの用途:
- 技術的な決定についてステークホルダーの認識を揃える
- ドメインモデルを共同で文書化する
- データフローとシステムの相互作用を可視化する
- コーディング前に計画を立てる
- コードとともに進化するリビングドキュメントを作成する
コメント
Markdown 対応