@sk8metal/michi-cli 0.13.0 → 0.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +86 -0
- package/README.md +27 -8
- package/dist/src/commands/setup-existing.d.ts.map +1 -1
- package/dist/src/commands/setup-existing.js +19 -74
- package/dist/src/commands/setup-existing.js.map +1 -1
- package/package.json +1 -1
- package/templates/claude/agents/design-reviewer/AGENT.md +0 -497
- package/templates/claude/agents/e2e-first-planner/AGENT.md +0 -410
- package/templates/claude/agents/mermaid-validator/AGENT.md +0 -257
- package/templates/claude/agents/oss-license-checker/AGENT.md +0 -265
- package/templates/claude/agents/pr-resolver/AGENT.md +0 -208
- package/templates/claude/agents/pr-size-monitor/AGENT.md +0 -330
- package/templates/claude/agents/stable-version-auditor/AGENT.md +0 -279
- package/templates/claude/commands/kiro/kiro-spec-impl.md +0 -257
- package/templates/claude/commands/kiro/kiro-spec-tasks.md +0 -370
- package/templates/claude/commands/michi/confluence-sync.md +0 -44
- package/templates/claude/commands/michi/design-review.md +0 -70
- package/templates/claude/commands/michi/e2e-plan.md +0 -117
- package/templates/claude/commands/michi/license-check.md +0 -84
- package/templates/claude/commands/michi/pr-resolve.md +0 -157
- package/templates/claude/commands/michi/project-switch.md +0 -42
- package/templates/claude/commands/michi/spec-design.md +0 -78
- package/templates/claude/commands/michi/spec-impl.md +0 -889
- package/templates/claude/commands/michi/spec-tasks.md +0 -156
- package/templates/claude/commands/michi/test-planning.md +0 -174
- package/templates/claude/commands/michi/validate-design.md +0 -58
- package/templates/claude/commands/michi/version-audit.md +0 -95
- package/templates/claude/commands/michi-multi-repo/impl-all.md +0 -293
- package/templates/claude/commands/michi-multi-repo/propagate-specs.md +0 -284
- package/templates/claude/commands/michi-multi-repo/spec-design.md +0 -359
- package/templates/claude/commands/michi-multi-repo/spec-init.md +0 -228
- package/templates/claude/commands/michi-multi-repo/spec-requirements.md +0 -198
- package/templates/claude/commands/michi-multi-repo/spec-review.md +0 -261
- package/templates/claude/rules/atlassian-integration.md +0 -35
- package/templates/claude/rules/michi-core.md +0 -54
- package/templates/claude/skills/design-review/SKILL.md +0 -648
- package/templates/claude/skills/e2e-first-planning/SKILL.md +0 -360
- package/templates/claude/skills/mermaid-validator/SKILL.md +0 -261
- package/templates/claude/skills/oss-license/SKILL.md +0 -232
- package/templates/claude/skills/stable-version/SKILL.md +0 -252
- package/templates/claude-agent/rules/code-size-monitor.md +0 -26
- package/templates/claude-agent/rules/code-size-rules.md +0 -32
- package/templates/michi/cc-sdd-overrides/README.md +0 -58
- package/templates/michi/cc-sdd-overrides/settings/rules/design-review-michi.md +0 -53
- package/templates/michi/cc-sdd-overrides/settings/templates/specs/init.json +0 -24
- package/templates/michi/cc-sdd-overrides/settings/templates/specs/tasks.md +0 -446
|
@@ -1,360 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: e2e-first-planning
|
|
3
|
-
description: |
|
|
4
|
-
E2Eファースト開発計画策定ガイド。
|
|
5
|
-
Walking Skeleton、MVP計画、縦割りタスク分割をサポート。
|
|
6
|
-
allowed-tools: Read, Grep, Glob
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
# E2Eファースト計画策定スキル
|
|
10
|
-
|
|
11
|
-
## 目的
|
|
12
|
-
|
|
13
|
-
E2E(End-to-End)ファーストの開発計画を策定し、リスクを早期発見し、価値を段階的に提供する。
|
|
14
|
-
|
|
15
|
-
## E2Eファーストとは
|
|
16
|
-
|
|
17
|
-
### 定義
|
|
18
|
-
|
|
19
|
-
**E2Eファースト**: ユーザーの視点から始めて終わりまで動作する最小限の機能を最優先で実装するアプローチ。
|
|
20
|
-
|
|
21
|
-
### 重要な原則
|
|
22
|
-
|
|
23
|
-
1. **価値の早期提供**: ユーザーが触れる機能を優先
|
|
24
|
-
2. **リスクの早期発見**: インテグレーション問題を早期に検出
|
|
25
|
-
3. **継続的なフィードバック**: 動くものを見せて方向性を確認
|
|
26
|
-
4. **技術的実現可能性の検証**: 最初から本番環境を意識
|
|
27
|
-
|
|
28
|
-
### なぜE2Eファーストが重要か
|
|
29
|
-
|
|
30
|
-
| 利点 | 説明 |
|
|
31
|
-
|------|------|
|
|
32
|
-
| 🎯 **ユーザー価値重視** | 常に動作する機能を提供 |
|
|
33
|
-
| 🚨 **早期リスク発見** | 統合の問題を早期に検出 |
|
|
34
|
-
| 🔄 **継続的フィードバック** | ステークホルダーとの早期合意 |
|
|
35
|
-
| 🏗️ **技術的実現可能性** | アーキテクチャの妥当性を検証 |
|
|
36
|
-
| 📊 **進捗の可視化** | 動作する機能 = 進捗 |
|
|
37
|
-
|
|
38
|
-
## アンチパターン: 横割り開発
|
|
39
|
-
|
|
40
|
-
### ❌ 避けるべき開発順序
|
|
41
|
-
|
|
42
|
-
```
|
|
43
|
-
Phase 1: UI全体を作る
|
|
44
|
-
Phase 2: API全体を作る
|
|
45
|
-
Phase 3: DB全体を作る
|
|
46
|
-
Phase 4: 統合(← ここで大量の問題発見)
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
**問題点:**
|
|
50
|
-
- 統合まで動作する機能がゼロ
|
|
51
|
-
- リスクが最後に集中
|
|
52
|
-
- ユーザーフィードバックが遅い
|
|
53
|
-
- 見積もりの精度が低い
|
|
54
|
-
|
|
55
|
-
### ✅ 推奨: 縦割り開発(E2Eスライス)
|
|
56
|
-
|
|
57
|
-
```
|
|
58
|
-
Phase 1: ログイン機能(UI + API + DB)← 動作する
|
|
59
|
-
Phase 2: ダッシュボード(UI + API + DB)← 動作する
|
|
60
|
-
Phase 3: データ編集(UI + API + DB)← 動作する
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
**利点:**
|
|
64
|
-
- 各フェーズで動作する機能を提供
|
|
65
|
-
- リスクを段階的に管理
|
|
66
|
-
- 継続的なフィードバック
|
|
67
|
-
- 見積もりの精度向上
|
|
68
|
-
|
|
69
|
-
## 計画策定フレームワーク
|
|
70
|
-
|
|
71
|
-
### フェーズ1: Skeleton(骨組み)
|
|
72
|
-
|
|
73
|
-
**目的**: プロジェクトの基本構造を定義
|
|
74
|
-
|
|
75
|
-
**成果物:**
|
|
76
|
-
- システムアーキテクチャ図
|
|
77
|
-
- 主要コンポーネントの識別
|
|
78
|
-
- 技術スタックの決定
|
|
79
|
-
- 開発環境のセットアップ
|
|
80
|
-
|
|
81
|
-
**期間**: 1-3日
|
|
82
|
-
|
|
83
|
-
**チェックリスト:**
|
|
84
|
-
- [ ] プロジェクト構造が明確か
|
|
85
|
-
- [ ] 技術スタックが決定したか
|
|
86
|
-
- [ ] 開発環境が構築できたか
|
|
87
|
-
- [ ] チーム全員が構造を理解したか
|
|
88
|
-
|
|
89
|
-
### フェーズ2: Walking Skeleton(歩く骨組み)
|
|
90
|
-
|
|
91
|
-
**目的**: 最小限のE2E機能を実装
|
|
92
|
-
|
|
93
|
-
**成果物:**
|
|
94
|
-
- ユーザーから見て動作する最小機能
|
|
95
|
-
- CI/CD パイプラインの構築
|
|
96
|
-
- 本番環境へのデプロイ
|
|
97
|
-
- 監視・ログの基本設定
|
|
98
|
-
|
|
99
|
-
**期間**: 1-2週間
|
|
100
|
-
|
|
101
|
-
**例: Webアプリケーション**
|
|
102
|
-
```
|
|
103
|
-
ユーザー → ログイン → 簡単なダッシュボード表示 → ログアウト
|
|
104
|
-
(UI + API + DB + デプロイ)
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
**チェックリスト:**
|
|
108
|
-
- [ ] E2Eで動作するか
|
|
109
|
-
- [ ] 本番環境にデプロイできるか
|
|
110
|
-
- [ ] CI/CDが機能するか
|
|
111
|
-
- [ ] 監視が動作するか
|
|
112
|
-
|
|
113
|
-
### フェーズ3: MVP(Minimum Viable Product)
|
|
114
|
-
|
|
115
|
-
**目的**: 実際のユーザーに価値を提供できる最小限の機能セット
|
|
116
|
-
|
|
117
|
-
**成果物:**
|
|
118
|
-
- コア機能の実装
|
|
119
|
-
- ユーザーが実際に利用できる状態
|
|
120
|
-
- フィードバック収集の仕組み
|
|
121
|
-
- ドキュメント
|
|
122
|
-
|
|
123
|
-
**期間**: 4-8週間
|
|
124
|
-
|
|
125
|
-
**チェックリスト:**
|
|
126
|
-
- [ ] ユーザーが価値を感じるか
|
|
127
|
-
- [ ] フィードバックを収集できるか
|
|
128
|
-
- [ ] スケールするアーキテクチャか
|
|
129
|
-
- [ ] 運用可能な状態か
|
|
130
|
-
|
|
131
|
-
## タスク分割の原則
|
|
132
|
-
|
|
133
|
-
### 縦割り(推奨)
|
|
134
|
-
|
|
135
|
-
**定義**: 機能単位でUI→API→DBまで完結させる
|
|
136
|
-
|
|
137
|
-
**例:**
|
|
138
|
-
```
|
|
139
|
-
タスク1: ユーザー登録機能
|
|
140
|
-
- UI: 登録フォーム
|
|
141
|
-
- API: POST /api/users
|
|
142
|
-
- DB: usersテーブル作成
|
|
143
|
-
- Test: E2Eテスト
|
|
144
|
-
|
|
145
|
-
タスク2: ログイン機能
|
|
146
|
-
- UI: ログインフォーム
|
|
147
|
-
- API: POST /api/auth/login
|
|
148
|
-
- DB: sessionsテーブル
|
|
149
|
-
- Test: E2Eテスト
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
**利点:**
|
|
153
|
-
- 各タスク完了時に動作する機能ができる
|
|
154
|
-
- 統合の問題を早期発見
|
|
155
|
-
- 進捗が可視化しやすい
|
|
156
|
-
|
|
157
|
-
### 横割り(非推奨)
|
|
158
|
-
|
|
159
|
-
**定義**: レイヤー単位で全機能を作る
|
|
160
|
-
|
|
161
|
-
**例:**
|
|
162
|
-
```
|
|
163
|
-
タスク1: UI全画面作成
|
|
164
|
-
タスク2: API全エンドポイント作成
|
|
165
|
-
タスク3: DB全テーブル作成
|
|
166
|
-
タスク4: 統合(← ここで問題発覚)
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
**問題点:**
|
|
170
|
-
- 最後まで動作する機能がゼロ
|
|
171
|
-
- 統合時に大量の問題
|
|
172
|
-
- 進捗が見えにくい
|
|
173
|
-
|
|
174
|
-
## E2Eスライスの特定方法
|
|
175
|
-
|
|
176
|
-
### Step 1: ユーザーストーリーから始める
|
|
177
|
-
|
|
178
|
-
```
|
|
179
|
-
ユーザーストーリー:
|
|
180
|
-
「ECサイトの管理者として、商品を登録したい」
|
|
181
|
-
|
|
182
|
-
E2Eスライス:
|
|
183
|
-
1. 商品登録フォームを表示(UI)
|
|
184
|
-
2. 入力データを受け取る(API)
|
|
185
|
-
3. データベースに保存(DB)
|
|
186
|
-
4. 成功メッセージを表示(UI)
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
### Step 2: 最小限の実装を定義
|
|
190
|
-
|
|
191
|
-
```
|
|
192
|
-
Phase 1 (Walking Skeleton):
|
|
193
|
-
- 商品名のみ登録可能
|
|
194
|
-
- 画像・説明・価格は後回し
|
|
195
|
-
- バリデーションは最小限
|
|
196
|
-
|
|
197
|
-
Phase 2 (MVP):
|
|
198
|
-
- 画像アップロード追加
|
|
199
|
-
- 価格・在庫管理追加
|
|
200
|
-
- 詳細なバリデーション
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
### Step 3: 依存関係を整理
|
|
204
|
-
|
|
205
|
-
```
|
|
206
|
-
優先度1: ログイン機能(他の機能の前提)
|
|
207
|
-
優先度2: 商品一覧表示(データ確認のため)
|
|
208
|
-
優先度3: 商品登録(メイン機能)
|
|
209
|
-
優先度4: 商品編集(登録の拡張)
|
|
210
|
-
```
|
|
211
|
-
|
|
212
|
-
## マイルストーン設計
|
|
213
|
-
|
|
214
|
-
### マイルストーン1: Walking Skeleton
|
|
215
|
-
|
|
216
|
-
**目標**: 基本的なE2E動作を確認
|
|
217
|
-
|
|
218
|
-
**成果物:**
|
|
219
|
-
- ログイン → ダッシュボード表示 → ログアウト
|
|
220
|
-
- CI/CDパイプライン
|
|
221
|
-
- デプロイ自動化
|
|
222
|
-
|
|
223
|
-
**期間**: 1-2週間
|
|
224
|
-
|
|
225
|
-
**完了条件:**
|
|
226
|
-
- [ ] 本番環境にデプロイ済み
|
|
227
|
-
- [ ] E2Eテストが通る
|
|
228
|
-
- [ ] CI/CDが動作する
|
|
229
|
-
|
|
230
|
-
### マイルストーン2: MVP
|
|
231
|
-
|
|
232
|
-
**目標**: ユーザーに価値を提供
|
|
233
|
-
|
|
234
|
-
**成果物:**
|
|
235
|
-
- コア機能3つ
|
|
236
|
-
- ユーザードキュメント
|
|
237
|
-
- フィードバック収集の仕組み
|
|
238
|
-
|
|
239
|
-
**期間**: 4-6週間
|
|
240
|
-
|
|
241
|
-
**完了条件:**
|
|
242
|
-
- [ ] ユーザーが実際に利用できる
|
|
243
|
-
- [ ] フィードバックを収集できる
|
|
244
|
-
- [ ] パフォーマンステスト済み
|
|
245
|
-
|
|
246
|
-
### マイルストーン3: 機能拡張
|
|
247
|
-
|
|
248
|
-
**目標**: ユーザーフィードバックを基に機能追加
|
|
249
|
-
|
|
250
|
-
**成果物:**
|
|
251
|
-
- 追加機能
|
|
252
|
-
- パフォーマンス最適化
|
|
253
|
-
- セキュリティ強化
|
|
254
|
-
|
|
255
|
-
**期間**: 継続的
|
|
256
|
-
|
|
257
|
-
## 計画ドキュメントフォーマット
|
|
258
|
-
|
|
259
|
-
### E2E計画テンプレート
|
|
260
|
-
|
|
261
|
-
```markdown
|
|
262
|
-
# プロジェクト名 - E2E計画
|
|
263
|
-
|
|
264
|
-
## 概要
|
|
265
|
-
- プロジェクトの目的
|
|
266
|
-
- ターゲットユーザー
|
|
267
|
-
- 提供価値
|
|
268
|
-
|
|
269
|
-
## Walking Skeleton(1-2週間)
|
|
270
|
-
|
|
271
|
-
### 目標
|
|
272
|
-
最小限のE2E機能を動作させる
|
|
273
|
-
|
|
274
|
-
### E2Eスライス
|
|
275
|
-
1. ログイン機能(UI + API + DB)
|
|
276
|
-
2. ダッシュボード表示(UI + API + DB)
|
|
277
|
-
|
|
278
|
-
### 技術的準備
|
|
279
|
-
- [ ] CI/CDパイプライン構築
|
|
280
|
-
- [ ] デプロイ自動化
|
|
281
|
-
- [ ] 監視設定
|
|
282
|
-
|
|
283
|
-
## MVP(4-6週間)
|
|
284
|
-
|
|
285
|
-
### 目標
|
|
286
|
-
ユーザーに価値を提供できる最小機能セット
|
|
287
|
-
|
|
288
|
-
### E2Eスライス(優先順)
|
|
289
|
-
1. ユーザー登録(UI + API + DB)
|
|
290
|
-
2. データ一覧表示(UI + API + DB)
|
|
291
|
-
3. データ編集(UI + API + DB)
|
|
292
|
-
|
|
293
|
-
### 完了条件
|
|
294
|
-
- [ ] ユーザーが実際に利用できる
|
|
295
|
-
- [ ] フィードバック収集可能
|
|
296
|
-
- [ ] パフォーマンステスト済み
|
|
297
|
-
|
|
298
|
-
## リスク管理
|
|
299
|
-
|
|
300
|
-
| リスク | 対策 | 担当 |
|
|
301
|
-
|--------|------|------|
|
|
302
|
-
| 外部API統合の遅延 | モックAPIを先行実装 | チームA |
|
|
303
|
-
| パフォーマンス問題 | 早期負荷テスト | チームB |
|
|
304
|
-
|
|
305
|
-
## タイムライン
|
|
306
|
-
|
|
307
|
-
```
|
|
308
|
-
Week 1-2: Walking Skeleton
|
|
309
|
-
Week 3-4: MVP Core機能
|
|
310
|
-
Week 5-6: MVP追加機能
|
|
311
|
-
Week 7+: フィードバック対応
|
|
312
|
-
```
|
|
313
|
-
```
|
|
314
|
-
|
|
315
|
-
## チームへの共有方法
|
|
316
|
-
|
|
317
|
-
### キックオフミーティング
|
|
318
|
-
|
|
319
|
-
1. **E2Eファーストの説明**(15分)
|
|
320
|
-
- なぜ横割りではなく縦割りか
|
|
321
|
-
- 各フェーズの目標
|
|
322
|
-
|
|
323
|
-
2. **Walking Skeletonのデモ**(10分)
|
|
324
|
-
- どこまで動くものを作るか
|
|
325
|
-
- 技術的な準備作業
|
|
326
|
-
|
|
327
|
-
3. **タスク分割の確認**(15分)
|
|
328
|
-
- 各E2Eスライスの説明
|
|
329
|
-
- 依存関係の確認
|
|
330
|
-
|
|
331
|
-
### 定期レビュー
|
|
332
|
-
|
|
333
|
-
- **毎週**: E2Eスライス単位でデモ
|
|
334
|
-
- **隔週**: マイルストーン進捗確認
|
|
335
|
-
- **月次**: ユーザーフィードバック共有
|
|
336
|
-
|
|
337
|
-
## よくある質問
|
|
338
|
-
|
|
339
|
-
### Q1: すべてを最初から完璧に作る必要はないか?
|
|
340
|
-
|
|
341
|
-
A: **不要です**。Walking Skeletonは最小限の実装で十分。重要なのは「E2Eで動作すること」。
|
|
342
|
-
|
|
343
|
-
### Q2: 横割りの方が効率的では?
|
|
344
|
-
|
|
345
|
-
A: **短期的には効率的に見えますが**、統合時の問題で結果的に遅延します。E2Eファーストは早期リスク発見により全体効率を向上します。
|
|
346
|
-
|
|
347
|
-
### Q3: レガシーシステムでもE2Eファーストは可能か?
|
|
348
|
-
|
|
349
|
-
A: **可能です**。まず新機能を小さなE2Eスライスで実装し、段階的に既存システムと統合します。
|
|
350
|
-
|
|
351
|
-
### Q4: チームメンバーがフルスタック対応できない場合は?
|
|
352
|
-
|
|
353
|
-
A: **ペアプログラミングや知識共有**で対応。または、E2Eスライス単位でフロント/バック担当を決めて密に連携。
|
|
354
|
-
|
|
355
|
-
## 参考資料
|
|
356
|
-
|
|
357
|
-
- [Walking Skeleton - Alistair Cockburn](https://alistair.cockburn.us/walking-skeleton/)
|
|
358
|
-
- [Vertical Slice Architecture - Jimmy Bogard](https://jimmybogard.com/vertical-slice-architecture/)
|
|
359
|
-
- [Shape Up - Basecamp](https://basecamp.com/shapeup)
|
|
360
|
-
- [The Lean Startup - Eric Ries](http://theleanstartup.com/)
|
|
@@ -1,261 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: mermaid-validator
|
|
3
|
-
description: |
|
|
4
|
-
Mermaid図の構文検証と修正を行うスキル。
|
|
5
|
-
architecture.md生成時のパースエラーを防止。
|
|
6
|
-
allowed-tools: Bash, Read, Grep, Glob, WebFetch, Edit, Write
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
# Mermaid Validator スキル
|
|
10
|
-
|
|
11
|
-
## 目的
|
|
12
|
-
|
|
13
|
-
Mermaid図の構文エラーを検出し、自動修正を行うことで、ドキュメント生成時のパースエラーを防止する。
|
|
14
|
-
|
|
15
|
-
## 対象ファイル
|
|
16
|
-
|
|
17
|
-
### 自動検証対象
|
|
18
|
-
|
|
19
|
-
- `docs/**/architecture.md`
|
|
20
|
-
- `docs/**/design.md`
|
|
21
|
-
- `docs/**/sequence.md`
|
|
22
|
-
- `*.md` (Mermaid図を含むすべてのMarkdownファイル)
|
|
23
|
-
|
|
24
|
-
### 主な検証ポイント
|
|
25
|
-
|
|
26
|
-
1. **構文エラー検出**
|
|
27
|
-
- 未閉じの括弧、引用符
|
|
28
|
-
- 無効なキーワード
|
|
29
|
-
- インデントの問題
|
|
30
|
-
|
|
31
|
-
2. **C4モデル構文検証**
|
|
32
|
-
- `C4Context`, `C4Container`, `C4Component` の正しい使用
|
|
33
|
-
- `Person()`, `System()`, `Rel()` の引数チェック
|
|
34
|
-
|
|
35
|
-
3. **シーケンス図検証**
|
|
36
|
-
- `participant` 宣言の確認
|
|
37
|
-
- 矢印記法(`->>`, `-->>`, `->>`)の正しい使用
|
|
38
|
-
|
|
39
|
-
4. **グラフ構文検証**
|
|
40
|
-
- ノード定義の正しい記法
|
|
41
|
-
- サブグラフの構文チェック
|
|
42
|
-
|
|
43
|
-
## Mermaid構文クイックリファレンス
|
|
44
|
-
|
|
45
|
-
### C4モデル
|
|
46
|
-
|
|
47
|
-
```mermaid
|
|
48
|
-
C4Context
|
|
49
|
-
title System Context Diagram
|
|
50
|
-
|
|
51
|
-
Person(user, "User", "エンドユーザー")
|
|
52
|
-
System(system, "System Name", "システム説明")
|
|
53
|
-
System_Ext(external, "External System", "外部システム")
|
|
54
|
-
|
|
55
|
-
Rel(user, system, "Uses", "HTTPS")
|
|
56
|
-
Rel(system, external, "Integrates", "REST/HTTPS")
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
**注意点**:
|
|
60
|
-
- `C4Context` の後に改行が必要
|
|
61
|
-
- `title` は必須ではないが推奨
|
|
62
|
-
- `Rel()` の引数は必ず4つ(from, to, label, technology)
|
|
63
|
-
|
|
64
|
-
### シーケンス図
|
|
65
|
-
|
|
66
|
-
```mermaid
|
|
67
|
-
sequenceDiagram
|
|
68
|
-
participant User
|
|
69
|
-
participant Frontend
|
|
70
|
-
participant Backend
|
|
71
|
-
|
|
72
|
-
User->>Frontend: リクエスト
|
|
73
|
-
Frontend->>Backend: API呼び出し
|
|
74
|
-
Backend-->>Frontend: レスポンス
|
|
75
|
-
Frontend-->>User: 表示
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
**注意点**:
|
|
79
|
-
- `participant` 宣言は必須ではないが推奨
|
|
80
|
-
- `->>`(同期)、`-->>`(非同期)、`-x`(破棄)を区別
|
|
81
|
-
- ラベルに日本語を含む場合、引用符は不要
|
|
82
|
-
|
|
83
|
-
### グラフ(フローチャート)
|
|
84
|
-
|
|
85
|
-
```mermaid
|
|
86
|
-
graph TB
|
|
87
|
-
A[クライアント] --> B[APIゲートウェイ]
|
|
88
|
-
B --> C[バックエンドサービス]
|
|
89
|
-
C --> D[データベース]
|
|
90
|
-
C --> E[外部API]
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
**注意点**:
|
|
94
|
-
- `graph TB`(上から下)、`graph LR`(左から右)
|
|
95
|
-
- ノードラベルに日本語を含む場合、`[]` で囲む
|
|
96
|
-
- `subgraph` はインデント必須
|
|
97
|
-
|
|
98
|
-
### ER図
|
|
99
|
-
|
|
100
|
-
```mermaid
|
|
101
|
-
erDiagram
|
|
102
|
-
USER ||--o{ ORDER : places
|
|
103
|
-
USER {
|
|
104
|
-
string id
|
|
105
|
-
string name
|
|
106
|
-
string email
|
|
107
|
-
}
|
|
108
|
-
ORDER {
|
|
109
|
-
string id
|
|
110
|
-
string userId
|
|
111
|
-
date createdAt
|
|
112
|
-
}
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
**注意点**:
|
|
116
|
-
- リレーションシップ記法: `||--o{`(1対多)、`}o--o{`(多対多)
|
|
117
|
-
- フィールド定義は `type name` の順
|
|
118
|
-
|
|
119
|
-
## 検証方法
|
|
120
|
-
|
|
121
|
-
### オンライン検証(推奨)
|
|
122
|
-
|
|
123
|
-
```bash
|
|
124
|
-
# Mermaid Live Editorで検証
|
|
125
|
-
# https://mermaid.live/
|
|
126
|
-
|
|
127
|
-
# または、mermaid-cliを使用
|
|
128
|
-
npx @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.svg
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
### 手動検証
|
|
132
|
-
|
|
133
|
-
```bash
|
|
134
|
-
# Markdownファイル内のMermaid図を抽出
|
|
135
|
-
grep -A 50 '```mermaid' architecture.md > extracted-diagrams.txt
|
|
136
|
-
|
|
137
|
-
# 構文エラーを目視確認
|
|
138
|
-
cat extracted-diagrams.txt
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
## よくある構文エラーと修正方法
|
|
142
|
-
|
|
143
|
-
### エラー1: C4モデルでタイトルが不正
|
|
144
|
-
|
|
145
|
-
**誤り**:
|
|
146
|
-
```mermaid
|
|
147
|
-
C4Context
|
|
148
|
-
title: System Context Diagram
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
**修正**:
|
|
152
|
-
```mermaid
|
|
153
|
-
C4Context
|
|
154
|
-
title System Context Diagram
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
### エラー2: シーケンス図で矢印記法が不正
|
|
158
|
-
|
|
159
|
-
**誤り**:
|
|
160
|
-
```mermaid
|
|
161
|
-
sequenceDiagram
|
|
162
|
-
User->Frontend: リクエスト
|
|
163
|
-
```
|
|
164
|
-
|
|
165
|
-
**修正**:
|
|
166
|
-
```mermaid
|
|
167
|
-
sequenceDiagram
|
|
168
|
-
User->>Frontend: リクエスト
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
### エラー3: グラフでサブグラフのインデント不足
|
|
172
|
-
|
|
173
|
-
**誤り**:
|
|
174
|
-
```mermaid
|
|
175
|
-
graph TB
|
|
176
|
-
subgraph "Production"
|
|
177
|
-
A[Pod 1]
|
|
178
|
-
end
|
|
179
|
-
```
|
|
180
|
-
|
|
181
|
-
**修正**:
|
|
182
|
-
```mermaid
|
|
183
|
-
graph TB
|
|
184
|
-
subgraph "Production"
|
|
185
|
-
A[Pod 1]
|
|
186
|
-
end
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
### エラー4: ER図でリレーションシップ記法が不正
|
|
190
|
-
|
|
191
|
-
**誤り**:
|
|
192
|
-
```mermaid
|
|
193
|
-
erDiagram
|
|
194
|
-
USER -> ORDER : places
|
|
195
|
-
```
|
|
196
|
-
|
|
197
|
-
**修正**:
|
|
198
|
-
```mermaid
|
|
199
|
-
erDiagram
|
|
200
|
-
USER ||--o{ ORDER : places
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
## 自動修正ルール
|
|
204
|
-
|
|
205
|
-
### ルール1: インデント正規化
|
|
206
|
-
|
|
207
|
-
- C4モデルの要素をインデント
|
|
208
|
-
- サブグラフをインデント
|
|
209
|
-
- ERDのフィールド定義をインデント
|
|
210
|
-
|
|
211
|
-
### ルール2: 引用符の補完
|
|
212
|
-
|
|
213
|
-
- 特殊文字を含むラベルに引用符を追加
|
|
214
|
-
- ただし、日本語のみの場合は不要
|
|
215
|
-
|
|
216
|
-
### ルール3: 矢印記法の統一
|
|
217
|
-
|
|
218
|
-
- シーケンス図で `->>` に統一(同期呼び出し)
|
|
219
|
-
- 非同期の場合は `-->>` を使用
|
|
220
|
-
|
|
221
|
-
## CI/CDへの組み込み
|
|
222
|
-
|
|
223
|
-
### GitHub Actions 例
|
|
224
|
-
|
|
225
|
-
```yaml
|
|
226
|
-
name: Mermaid Validation
|
|
227
|
-
|
|
228
|
-
on:
|
|
229
|
-
pull_request:
|
|
230
|
-
paths:
|
|
231
|
-
- 'docs/**/*.md'
|
|
232
|
-
- '**/*.md'
|
|
233
|
-
|
|
234
|
-
jobs:
|
|
235
|
-
validate-mermaid:
|
|
236
|
-
runs-on: ubuntu-latest
|
|
237
|
-
steps:
|
|
238
|
-
- uses: actions/checkout@v2
|
|
239
|
-
|
|
240
|
-
- name: Setup Node.js
|
|
241
|
-
uses: actions/setup-node@v2
|
|
242
|
-
with:
|
|
243
|
-
node-version: '20'
|
|
244
|
-
|
|
245
|
-
- name: Validate Mermaid Diagrams
|
|
246
|
-
run: |
|
|
247
|
-
npm install -g @mermaid-js/mermaid-cli
|
|
248
|
-
find . -name "*.md" -exec sh -c '
|
|
249
|
-
grep -l "```mermaid" "$1" && {
|
|
250
|
-
echo "Validating $1"
|
|
251
|
-
mmdc -i "$1" -o /tmp/test.svg || exit 1
|
|
252
|
-
}
|
|
253
|
-
' _ {} \;
|
|
254
|
-
```
|
|
255
|
-
|
|
256
|
-
## 参考資料
|
|
257
|
-
|
|
258
|
-
- [Mermaid公式ドキュメント](https://mermaid.js.org/)
|
|
259
|
-
- [Mermaid Live Editor](https://mermaid.live/)
|
|
260
|
-
- [C4モデルガイド](https://c4model.com/)
|
|
261
|
-
- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
|