図表スタイルガイド
docs/ 配下の全 Mermaid 図で配色を統一するためのルール。
beautiful-mermaid のテーマ色は docs/.vitepress/mermaid-plugin.ts で定義されている（VitePress のライト/ダーク色をハードコード）。Mermaid コードブロック自体には基本的に色指定を書かない。
ただし、classDef や style ディレクティブで特定ノードに色を付けたい場合は、以下のカラーパレットを使うこと。
1. カラーパレット
1.1 領域カラー（9色）
各領域に固有の色体系を割り当てる。
| 領域 | メイン | 背景 |
|---|---|---|
| 代行 | #00838F | #B2EBF2 |
| 組織 | #4472C4 | #D6E4F0 |
| 家族 | #548235 | #E2EFDA |
| 申告 | #C55A11 | #FCE4CC |
| 給与 | #7030A0 | #E8D5F5 |
| アイデンティティ | #546E7A | #CFD8DC |
| 国税 | #C62828 | #FFCDD2 |
| 地方税 | #795548 | #D7CCC8 |
| サブスクリプション | #AD1457 | #FCE4EC |
1.2 アーキテクチャレイヤー（4色）
Clean Architecture の各層に対応する色。
| レイヤー | メイン | 背景 |
|---|---|---|
| Domain | #2E7D32 | #E8F5E9 |
| Application | #1565C0 | #E3F2FD |
| Infrastructure | #E65100 | #FFF3E0 |
| Presentation / BFF | #6A1B9A | #F3E5F5 |
1.3 セマンティックカラー
状態遷移図・フローチャートでの結果表現に使用する。
| 意味 | 色 |
|---|---|
| 成功 / 正常 | #4CAF50 |
| エラー / 失敗 | #F44336 |
| 警告 / 注意 | #FF9800 |
| 情報 / 中立 | #2196F3 |
2. Mermaid での色の適用方法
classDef
style ディレクティブ
3. レイアウト原則
- 情報の流れ: 左→右（
flowchart LR）または 上→下（flowchart TD）で統一する - subgraph: 関連する要素のグループ化に使用する
- 色指定が不要な場合は classDef/style を省略し、beautiful-mermaid のデフォルトテーマに任せる