mermaid-diagrams について
mermaid-diagramsは、Mermaidのテキスト構文でソフトウェア図を作成するスキルです。開発者や技術文書の作成者向けに、図の種類、構文、テーマ、エクスポート方法を案内し、コードと併せた図の管理にも対応します。
主な機能
- 01クラス図、シーケンス図、フローチャートの作成
- 02ERD、C4、状態図の作成
- 03テーマとレイアウトの設定
- 04構文リファレンスと実践ガイド
- 05レンダリングとエクスポート方法の案内
活用シーン
- 01ソフトウェア構成とコンポーネントの記録
- 02APIのやり取りや業務フローの整理
- 03データベーススキーマとドメインモデルの設計
- 04コードと併せた図のドキュメント管理
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/mermaid-diagramsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
README.mdreferences/advanced-features.mdarchitecture-diagrams.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/architecture-diagrams.md - クラウドサービス、インフラストラクチャ、CI/CD デプロイ
- 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 対応