作者：王教成
Mermaid Loading...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mermaidアーキテクチャダイアグラム</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f7fa;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 20px;
overflow: hidden;
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 25px;
border-bottom: 2px solid #3498db;
padding-bottom: 15px;
}
#mermaid-diagram {
width: 100%;
min-height: 800px;
overflow: auto;
border: 1px solid #e1e4e8;
border-radius: 4px;
background: white;
padding: 15px;
}
.instructions {
background-color: #e3f2fd;
padding: 15px;
border-radius: 4px;
margin: 20px 0;
font-size: 14px;
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 15px 0;
padding: 10px;
background-color: #f8f9fa;
border-radius: 4px;
}
.legend-item {
display: flex;
align-items: center;
margin-right: 15px;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 3px;
margin-right: 8px;
border: 1px solid #ddd;
}
.note {
font-size: 13px;
color: #666;
font-style: italic;
margin-top: 20px;
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
#mermaid-diagram {
min-height: 600px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>システムアーキテクチャ層図</h1>
<div class="instructions">
<p>この図は、サーバー側とクライアント側のアーキテクチャ層を示しており、以下のコンポーネントが含まれています：</p>
<ul>
<li><strong>サーバー側</strong>: Database, Entity, Repository, Service, Controller</li>
<li><strong>クライアント側</strong>: DataSource, ClientRepository, UseCase, ViewModel, UI</li>
</ul>
</div>
<div class="legend">
<div class="legend-item">
<div class="legend-color" style="background-color: #FFEC8B;"></div>
<span>Database</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #87CEEB;"></div>
<span>Entity</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #FFB5C5;"></div>
<span>Repository</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #E6E6FA;"></div>
<span>Service</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #C1FFC1;"></div>
<span>Controller</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #B0E0E6;"></div>
<span>DataSource</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #FFDAB9;"></div>
<span>ClientRepository</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #8470FF;"></div>
<span>UseCase</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #FFA07A;"></div>
<span>ViewModel</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #87CEFA;"></div>
<span>UI</span>
</div>
</div>
<div class="mermaid" id="mermaid-diagram">
graph TD
%% ====== サーバー ======
subgraph server["サーバーServer"]
subgraph Database["Database"]
DB_L0["Database_ビジネスエコシステム層:ビジネスエコシステム層"]
DB_L1["Database_システム層:MySQL高可用アーキテクチャ"]
DB_L2["Database_サブシステム層:物理ライブラリの分割"]
DB_L3["Database_セキュリティアーキテクチャ層:TLS+AES暗号化"]
DB_L4["Database_モジュール層:モジュールテーブル構造"]
DB_L5["Database_パッケージ構造層:移行スクリプトディレクトリ"]
DB_L6["Database_クラスとインターフェース層:テーブル構造設計"]
DB_L7["Database_メソッド層:ストアドプロシージャ"]
DB_L8["Database_コードブロック層:トランザクション制御ブロック"]
DB_L9["Database_ステートメント層:DDLステートメント"]
DB_L10["Database_式層:クエリ最適化"]
DB_L11["Database_原子操作層:原子制約"]
DB_L0 --> DB_L1 --> DB_L2 --> DB_L3 --> DB_L4 --> DB_L5 --> DB_L6 --> DB_L7 --> DB_L8 --> DB_L9 --> DB_L10 --> DB_L11
end
subgraph Entity["Entity"]
ET_L0["Entity_ビジネスエコシステム層:なし"]
ET_L1["Entity_システム層:Hibernateキャッシュ"]
ET_L2["Entity_サブシステム層:ビジネスドメインのサブパッケージ"]
ET_L3["Entity_セキュリティアーキテクチャ層:フィールド暗号化"]
ET_L4["Entity_モジュール層:エンティティスキャンパス"]
ET_L5["Entity_パッケージ構造層:層別パッケージ構造"]
ET_L6["Entity_クラスとインターフェース層:JPAエンティティクラス"]
ET_L7["Entity_メソッド層:監査コールバック"]
ET_L8["Entity_コードブロック層:フィールド検証"]
ET_L9["Entity_ステートメント層:マッピング関係"]
ET_L10["Entity_式層:遅延読み込み戦略"]
ET_L11["Entity_原子操作層:equals/hashCode"]
ET_L0 --> ET_L1 --> ET_L2 --> ET_L3 --> ET_L4 --> ET_L5 --> ET_L6 --> ET_L7 --> ET_L8 --> ET_L9 --> ET_L10 --> ET_L11
end
subgraph Repository["Repository"]
RP_L0["Repository_ビジネスエコシステム層:なし"]
RP_L1["Repository_システム層:クエリ戦略"]
RP_L2["Repository_サブシステム層:集約ルートのサブパッケージ"]
RP_L3["Repository_セキュリティアーキテクチャ層:行レベルのセキュリティ"]
RP_L4["Repository_モジュール層:JPAリポジトリスキャン"]
RP_L5["Repository_パッケージ構造層:リポジトリ層"]
RP_L6["Repository_クラスとインターフェース層:リポジトリインターフェース"]
RP_L7["Repository_メソッド層:動的クエリ"]
RP_L8["Repository_コードブロック層:@Query注釈ブロック"]
RP_L9["Repository_ステートメント層:派生クエリ"]
RP_L10["Repository_式層:SpEL式"]
RP_L11["Repository_原子操作層:flush操作"]
RP_L0 --> RP_L1 --> RP_L2 --> RP_L3 --> RP_L4 --> RP_L5 --> RP_L6 --> RP_L7 --> RP_L8 --> RP_L9 --> RP_L10 --> RP_L11
end
subgraph Service["Service"]
SV_L0["Service_ビジネスエコシステム層:なし"]
SV_L1["Service_システム層:Seataトランザクション"]
SV_L2["Service_サブシステム層:サービス境界"]
SV_L3["Service_セキュリティアーキテクチャ層:メソッドレベルの権限"]
SV_L4["Service_モジュール層:トランザクション管理"]
SV_L5["Service_パッケージ構造層:サービス層"]
SV_L6["Service_クラスとインターフェース層:サービス実装クラス"]
SV_L7["Service_メソッド層:ビジネスロジック"]
SV_L8["Service_コードブロック層:トランザクション制御ブロック"]
SV_L9["Service_ステートメント層:ドメインイベント"]
SV_L10["Service_式層:ELルール"]
SV_L11["Service_原子操作層:空安全呼び出し"]
SV_L0 --> SV_L1 --> SV_L2 --> SV_L3 --> SV_L4 --> SV_L5 --> SV_L6 --> SV_L7 --> SV_L8 --> SV_L9 --> SV_L10 --> SV_L11
end
subgraph Controller["Controller"]
CT_L0["Controller_ビジネスエコシステム層:なし"]
CT_L1["Controller_システム層:OpenAPI仕様"]
CT_L2["Controller_サブシステム層:ゲートウェイルーティング"]
CT_L3["Controller_セキュリティアーキテクチャ層:JWT認証"]
CT_L4["Controller_モジュール層:メッセージコンバータ"]
CT_L5["Controller_パッケージ構造層:コントローラーサブパッケージ"]
CT_L6["Controller_クラスとインターフェース層:RestController"]
CT_L7["Controller_メソッド層:エンドポイントメソッド"]
CT_L8["Controller_コードブロック層:パラメータ検証"]
CT_L9["Controller_ステートメント層:標準化レスポンス"]
CT_L10["Controller_式層:MapStruct変換"]
CT_L11["Controller_原子操作層:レスポンスヘッダー設定"]
CT_L0 --> CT_L1 --> CT_L2 --> CT_L3 --> CT_L4 --> CT_L5 --> CT_L6 --> CT_L7 --> CT_L8 --> CT_L9 --> CT_L10 --> CT_L11
end
end
%% ====== クライアント ======
subgraph client["クライアントClient"]
subgraph DataSource["DataSource"]
DS_L0["DataSource_ビジネスエコシステム層:なし"]
DS_L1["DataSource_システム層:Retrofit設定"]
DS_L2["DataSource_サブシステム層:なし"]
DS_L3["DataSource_セキュリティアーキテクチャ層:証明書バインディング"]
DS_L4["DataSource_モジュール層:ネットワークモジュール"]
DS_L5["DataSource_パッケージ構造層:データソース層"]
DS_L6["DataSource_クラスとインターフェース層:Retrofitインターフェース"]
DS_L7["DataSource_メソッド層:ストリーミングデータ"]
DS_L8["DataSource_コードブロック層:リトライロジック"]
DS_L9["DataSource_ステートメント層:ネットワーク呼び出し"]
DS_L10["DataSource_式層:JSON解析"]
DS_L11["DataSource_原子操作層:認証ヘッダー"]
DS_L0 --> DS_L1 --> DS_L2 --> DS_L3 --> DS_L4 --> DS_L5 --> DS_L6 --> DS_L7 --> DS_L8 --> DS_L9 --> DS_L10 --> DS_L11
end
subgraph ClientRepository["ClientRepository"]
CR_L0["ClientRepository_ビジネスエコシステム層:なし"]
CR_L1["ClientRepository_システム層:キャッシュ戦略"]
CR_L2["ClientRepository_サブシステム層:なし"]
CR_L3["ClientRepository_セキュリティアーキテクチャ層:SQLCipher暗号化"]
CR_L4["ClientRepository_モジュール層:データ調整"]
CR_L5["ClientRepository_パッケージ構造層:リポジトリ実装"]
CR_L6["ClientRepository_クラスとインターフェース層:リポジトリクラス"]
CR_L7["ClientRepository_メソッド層:混合データ取得"]
CR_L8["ClientRepository_コードブロック層:キャッシュの期限切れ"]
CR_L9["ClientRepository_ステートメント層:Roomクエリ"]
CR_L10["ClientRepository_式層:データ変換"]
CR_L11["ClientRepository_原子操作層:StateFlow発信"]
CR_L0 --> CR_L1 --> CR_L2 --> CR_L3 --> CR_L4 --> CR_L5 --> CR_L6 --> CR_L7 --> CR_L8 --> CR_L9 --> CR_L10 --> CR_L11
end
subgraph UseCase["UseCase"]
UC_L0["UseCase_ビジネスエコシステム層:なし"]
UC_L1["UseCase_システム層:ユースケース仕様"]
UC_L2["UseCase_サブシステム層:なし"]
UC_L3["UseCase_セキュリティアーキテクチャ層:権限チェック"]
UC_L4["UseCase_モジュール層:ビジネスルール"]
UC_L5["UseCase_パッケージ構造層:ユースケースパッケージ"]
UC_L6["UseCase_クラスとインターフェース層:ユースケースクラス"]
UC_L7["UseCase_メソッド層:コアロジック"]
UC_L8["UseCase_コードブロック層:エラー変換"]
UC_L9["UseCase_ステートメント層:リポジトリ呼び出し"]
UC_L10["UseCase_式層:パラメータ検証"]
UC_L11["UseCase_原子操作層:ドメインオブジェクトの構築"]
UC_L0 --> UC_L1 --> UC_L2 --> UC_L3 --> UC_L4 --> UC_L5 --> UC_L6 --> UC_L7 --> UC_L8 --> UC_L9 --> UC_L10 --> UC_L11
end
subgraph ViewModel["ViewModel"]
VM_L0["ViewModel_ビジネスエコシステム層:なし"]
VM_L1["ViewModel_システム層:Hilt注入"]
VM_L2["ViewModel_サブシステム層:なし"]
VM_L3["ViewModel_セキュリティアーキテクチャ層:セッション処理"]
VM_L4["ViewModel_モジュール層:状態コンテナ"]
VM_L5["ViewModel_パッケージ構造層:ViewModelサブパッケージ"]
VM_L6["ViewModel_クラスとインターフェース層:ViewModelクラス"]
VM_L7["ViewModel_メソッド層:状態更新"]
VM_L8["ViewModel_コードブロック層:状態変換"]
VM_L9["ViewModel_ステートメント層:UI状態更新"]
VM_L10["ViewModel_式層:シールクラス変換"]
VM_L11["ViewModel_原子操作層:UseCase呼び出し"]
VM_L0 --> VM_L1 --> VM_L2 --> VM_L3 --> VM_L4 --> VM_L5 --> VM_L6 --> VM_L7 --> VM_L8 --> VM_L9 --> VM_L10 --> VM_L11
end
subgraph UI["UI"]
UI_L0["UI_ビジネスエコシステム層:ユーザージャーニー"]
UI_L1["UI_システム層:Composeフレームワーク"]
UI_L2["UI_サブシステム層:なし"]
UI_L3["UI_セキュリティアーキテクチャ層:ハイジャック防止"]
UI_L4["UI_モジュール層:テーマモジュール"]
UI_L5["UI_パッケージ構造層:コンポーネントパッケージ"]
UI_L6["UI_クラスとインターフェース層:コンビネーション関数"]
UI_L7["UI_メソッド層:イベント処理"]
UI_L8["UI_コードブロック層:条件レンダリング"]
UI_L9["UI_ステートメント層:UIコンビネーション"]
UI_L10["UI_式層:アニメーション"]
UI_L11["UI_原子操作層:テキスト属性"]
UI_L0 --> UI_L1 --> UI_L2 --> UI_L3 --> UI_L4 --> UI_L5 --> UI_L6 --> UI_L7 --> UI_L8 --> UI_L9 --> UI_L10 --> UI_L11
end
end
%% ====== 重要な依存関係 ======
%% サーバー内部依存関係
DB_L11 --> RP_L6
ET_L11 --> RP_L6
RP_L11 --> SV_L7
SV_L11 --> CT_L7
%% クライアント内部依存関係
DS_L11 --> CR_L7
CR_L11 --> UC_L9
UC_L11 --> VM_L11
VM_L11 --> UI_L7
%% クロスエンド通信
DS_L6 --> CT_L7
%% セキュリティシステム
DB_L3 --> ET_L3
CT_L3 --> DS_L3
SV_L3 --> RP_L3
VM_L3 --> UI_L3
%% 原子操作
DB_L11 --> RP_L11
ET_L11 --> RP_L9
SV_L11 --> CT_L11
CR_L11 --> UC_L11
%% ====== スタイル設計 ======
%% 定義
classDef server fill:#FFD6E7,stroke:#FF2D95
classDef client fill:#D6F0FF,stroke:#00A1FF
classDef Database fill:#FFEC8B,stroke:#FF8C00
classDef Entity fill:#87CEEB,stroke:#1E90FF
classDef Repository fill:#FFB5C5,stroke:#FF1493
classDef Service fill:#E6E6FA,stroke:#9370DB
classDef Controller fill:#C1FFC1,stroke:#32CD32
classDef DataSource fill:#B0E0E6,stroke:#1E90FF
classDef ClientRepository fill:#FFDAB9,stroke:#FF6347
classDef UseCase fill:#8470FF,stroke:#0000FF
classDef ViewModel fill:#FFA07A,stroke:#CD853F
classDef UI fill:#87CEFA,stroke:#4169E1
%% アプリケーション
class server server
class client client
class Database Database
class Entity Entity
class Repository Repository
class Service Service
class Controller Controller
class DataSource DataSource
class ClientRepository ClientRepository
class UseCase UseCase
class ViewModel ViewModel
class UI UI
</div>
<div class="note">
注意: この図はMermaid.jsでレンダリングされています。図が正しく表示されない場合は、Mermaidライブラリが読み込まれていることを確認してください。
</div>
</div>
<script>
// Mermaid図を初期化
mermaid.initialize({
startOnLoad: true,
theme: 'default',
securityLevel: 'loose',
flowchart: {
useMaxWidth: false,
htmlLabels: true,
curve: 'basis'
},
themeCSS: `
.node rect {
stroke-width: 1.5px;
stroke-opacity: 0.8;
rx: 5px;
ry: 5px;
}
.edgePath path {
stroke: #555;
stroke-width: 1.5px;
}
`
});
</script>
</body>
</html>