mermaid-diagrams について
Mermaid Markdown 構文で図や可視化を作成するためのリファレンススキルです。一般的な図の種類、構文、スタイル、React での描画例を扱います。
主な機能
- 01フローチャートとサブグラフ
- 02シーケンス図、クラス図、ER 図
- 03ガントチャート、状態図、ユーザージャーニー
- 04マインドマップ、円グラフ、Git グラフ
- 05スタイル設定と React 描画例
活用シーン
- 01アプリのフローと判断経路の整理
- 02システムの連携やデータモデルの記録
- 03プロジェクトの予定や状態変化の可視化
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/mermaid-diagramsを入力して読み込まれたか確認します。
詳細
Mermaid 図
Mermaid の Markdown 構文を使って図や視覚化を作成します。
クイックリファレンス
Mermaid 図は、言語識別子に mermaid を指定した Markdown のコードブロックで記述します。
フローチャート
flowchart TD
A[Start] --> B{Is it valid?}
B -->|Yes| C[Process data]
B -->|No| D[Show error]
C --> E[Save to database]
D --> F[Return to input]
E --> G[End]
F --> A
フローチャートの構文
flowchart TD %% TD = top-down, LR = left-right, RL, BT
A[Rectangle] %% Square brackets = rectangle
B(Rounded) %% Parentheses = rounded rectangle
C{Diamond} %% Curly braces = diamond/decision
D[[Subroutine]] %% Double brackets = subroutine
E[(Database)] %% Cylinder shape
F((Circle)) %% Double parentheses = circle
G>Asymmetric] %% Flag shape
A --> B %% Arrow
B --- C %% Line without arrow
C -.-> D %% Dotted arrow
D ==> E %% Thick arrow
E --text--> F %% Arrow with label
F -->|label| G %% Alternative label syntax
サブグラフ
flowchart TB
subgraph Frontend
A[React App] --> B[Components]
B --> C[Hooks]
end
subgraph Backend
D[API Server] --> E[Database]
end
A -->|HTTP| D
シーケンス図
sequenceDiagram
participant U as User
participant C as Client
participant S as Server
participant D as Database
U->>C: Click submit
C->>S: POST /api/data
activate S
S->>D: INSERT query
D-->>S: Success
S-->>C: 200 OK
deactivate S
C-->>U: Show success message
シーケンス図の構文
sequenceDiagram
participant A as Alice
participant B as Bob
A->>B: Solid line with arrow
A-->>B: Dotted line with arrow
A-)B: Solid line with open arrow
A--)B: Dotted line with open arrow
activate B %% Activation box
B->>A: Response
deactivate B
Note over A,B: This is a note
Note right of A: Note on right
alt Condition true
A->>B: Do this
else Condition false
A->>B: Do that
end
loop Every minute
A->>B: Ping
end
opt Optional action
A->>B: Maybe do this
end
クラス図
classDiagram
class User {
+String id
+String name
+String email
+login()
+logout()
}
class Order {
+String id
+Date createdAt
+calculateTotal()
}
class Product {
+String id
+String name
+Number price
}
User "1" --> "*" Order : places
Order "*" --> "*" Product : contains
クラス図の構文
classDiagram
class ClassName {
+publicField
-privateField
#protectedField
~packageField
+publicMethod()
-privateMethod()
}
ClassA <|-- ClassB : Inheritance
ClassC *-- ClassD : Composition
ClassE o-- ClassF : Aggregation
ClassG --> ClassH : Association
ClassI ..> ClassJ : Dependency
ClassK ..|> ClassL : Realization
エンティティ関係図
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "is in"
USER {
string id PK
string email UK
string name
datetime created_at
}
ORDER {
string id PK
string user_id FK
datetime created_at
string status
}
PRODUCT {
string id PK
string name
decimal price
}
LINE_ITEM {
string id PK
string order_id FK
string product_id FK
int quantity
}
ER 図のカーディナリティ
||--|| One to one
||--o{ One to zero or more
||--|{ One to one or more
}o--o{ Zero or more to zero or more
ガントチャート
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Requirements :a1, 2024-01-01, 7d
Design :a2, after a1, 14d
section Development
Backend API :b1, after a2, 21d
Frontend :b2, after a2, 28d
Integration :b3, after b1, 7d
section Testing
QA Testing :c1, after b3, 14d
Bug Fixes :c2, after c1, 7d
section Launch
Deployment :milestone, after c2, 0d
状態図
stateDiagram-v2
[*] --> Idle
Idle --> Processing: Submit
Processing --> Success: Valid
Processing --> Error: Invalid
Success --> Idle: Reset
Error --> Idle: Retry
Success --> [*]
円グラフ
pie title Browser Market Share
"Chrome" : 65
"Safari" : 19
"Firefox" : 10
"Edge" : 4
"Other" : 2
Git グラフ
gitGraph
commit
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature
commit
branch hotfix
checkout hotfix
commit
checkout main
merge hotfix
ユーザージャーニー
journey
title User Checkout Experience
section Browse
View products: 5: User
Add to cart: 4: User
section Checkout
Enter shipping: 3: User
Enter payment: 2: User
Confirm order: 5: User
section Post-Purchase
Receive confirmation: 5: User, System
Track shipment: 4: User
マインドマップ
mindmap
root((Project))
Frontend
React
TypeScript
Tailwind
Backend
Node.js
PostgreSQL
Redis
DevOps
Docker
Kubernetes
CI/CD
スタイル設定
flowchart LR
A[Start]:::green --> B[Process]:::blue --> C[End]:::red
classDef green fill:#22c55e,color:#fff
classDef blue fill:#3b82f6,color:#fff
classDef red fill:#ef4444,color:#fff
React コンポーネント
import mermaid from 'mermaid';
import { useEffect, useRef } from 'react';
mermaid.initialize({
startOnLoad: true,
theme: 'neutral', // default, dark, forest, neutral
securityLevel: 'loose',
});
interface MermaidProps {
chart: string;
id?: string;
}
export function Mermaid({ chart, id = 'mermaid-diagram' }: MermaidProps) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (ref.current) {
mermaid.render(id, chart).then(({ svg }) => {
if (ref.current) {
ref.current.innerHTML = svg;
}
});
}
}, [chart, id]);
return <div ref={ref} className="mermaid-container" />;
}
// Usage
<Mermaid
chart={`
flowchart LR
A --> B --> C
`}
/>
ヒント
- 方向:
TD（上から下）、LR（左から右）、BT（下から上）、RL（右から左）を使用します - コメント: コメントには
%%を使用します - 引用符: 特殊文字を含むラベルには引用符を使用します：
A["Label with (parentheses)"] - 改行: 複数行のラベルには
<br/>を使用します
リソース
- Mermaid ドキュメント: https://mermaid.js.org/
- ライブエディター: https://mermaid.live
- GitHub のサポート: Mermaid は GitHub の Markdown でネイティブに動作します
コメント
Markdown 対応