包括的なステップバイステップの事例研究：C4モデルをインターネットバンキングシステム（Big Bank plc）に適用する

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title インターネットバンキングシステムのシステムコンテキスト図（レベル1）

Person(customer, "個人銀行顧客", "1つ以上の個人口座を持つ顧客。")
System(internet_banking_system, "インターネットバンキングシステム", "口座の確認や支払いを行うための新しいシステム。")
System(core_banking_system, "コアバンキングシステム", "既存のメインフレームで顧客データ、口座、取引を処理しています。")
System_Ext(email_system, "メールシステム", "確認メールの送信に使用するAmazon Web Services Simple Email Service（AWS SES）。")

Rel(customer, internet_banking_system, "使用")
Rel(internet_banking_system, core_banking_system, "使用")
Rel(internet_banking_system, email_system, "メールを送信 via")

Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)
@enduml

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/angular.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/java.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/postgresql.puml

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title インターネットバンキングシステムのC4コンテナ図

Person(customer, "個人バンキング顧客", "1つ以上の個人口座を持つ顧客。")

System_Boundary(internet_banking_system, "インターネットバンキングシステム", "口座の確認や支払いを行うための新システム。") {
Container(spa, "シングルページアプリケーション", "JavaScript + Angular", "完全なインターネットバンキングUI", $sprite="angular")
Container(mobile_app, "モバイルアプリ", "iOS/Android（React Native）", "移動中における限定的な機能", $sprite="react")
Container(api_app, "APIアプリケーション", "Java + Spring Boot", "両方のフロントエンドで使用されるJSON/HTTPS API", $sprite="java")
ContainerDb(database, "データベース", "PostgreSQL", "セッションデータ、ユーザー設定、キャッシュされた口座概要を格納", $sprite="postgresql")
}

System(core_banking_system, "コアバンキングシステム", "顧客データ、口座、取引を処理する既存のメインフレーム。")
System_Ext(email_system, "メールシステム", "確認メールを送信するためのAmazon Web Services Simple Email Service（AWS SES）。")

' 関係
Rel(customer, spa, "使用", "HTTPS")
Rel(customer, mobile_app, "使用", "HTTPS")
Rel(spa, api_app, "呼び出し", "JSON/HTTPS")
Rel(mobile_app, api_app, "呼び出し", "JSON/HTTPS")
Rel(api_app, database, "読み書き", "JDBC/SQL")
Rel(api_app, core_banking_system, "照会／更新", "JSON/HTTPS")
Rel(api_app, email_system, "メール送信経由", "HTTPS")

' レイアウトヒント（オプション – PlantUMLが要素をより良い順序で配置するのを助ける）
Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)

@enduml

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

LAYOUT_WITH_LEGEND()

title インターネットバンキングシステム - APIアプリケーションのコンポーネント図

Container(spa, "シングルページアプリケーション", "javascript and angular", "顧客がウェブブラウザ経由ですべてのインターネットバンキング機能を利用できるように提供。")
Container(ma, "モバイルアプリ", "Xamarin", "顧客がモバイルデバイス経由でインターネットバンキング機能の限定的なサブセットを利用できるように提供。")
ContainerDb(db, "データベース", "リレーショナルデータベーススキーマ", "ユーザー登録情報、ハッシュ化された認証資格情報、アクセスログなどを保存。")
System_Ext(mbs, "メインフレームバンキングシステム", "顧客、アカウント、取引などのすべてのコアバンキング情報を保存。")

Container_Boundary(api, "APIアプリケーション") {
    Component(accounts, "アカウントコントローラー", "Spring MVC", "顧客にアカウント概要と残高を提供。")
    Component(auth, "認証コントローラー", "Spring MVC", "ユーザーのログイン、セッション管理、トークン生成を処理。")
    Component(reset, "パスワードリセットコントローラー", "Spring MVC", "ユーザーがメール経由でパスワードをリセットできるようにする。")
    Component(security, "セキュリティコンポーネント", "Spring Bean", "認証、JWTトークン生成、パスワードハッシュ化を処理。")
    Component(accountmgmt, "アカウント管理コンポーネント", "Spring Bean", "アカウント操作のため、コアバンキングシステムへの呼び出しを調整。")
    Component(email, "メール通知コンポーネント", "Spring Bean", "SMTP経由でパスワードリセットメールおよびアカウント確認メールを送信。")

    Rel(accounts, security, "使用")
    Rel(auth, security, "使用")
    Rel(reset, security, "使用")
    Rel(accountmgmt, mbs, "使用", "XML/HTTPS")
    Rel(email, db, "読み取り", "JDBC")
}

Rel(spa, accounts, "使用", "JSON/HTTPS")
Rel(spa, auth, "使用", "JSON/HTTPS")
Rel(spa, reset, "使用", "JSON/HTTPS")
Rel(ma, accounts, "使用", "JSON/HTTPS")
Rel(ma, auth, "使用", "JSON/HTTPS")
Rel(ma, reset, "使用", "JSON/HTTPS")
@enduml

@startuml
classDiagram

skinparam {
roundcorner 8
ArrowColor #444444
ArrowFontColor #444444
BorderColor #444444

Class {
BorderColor #1A237E
BackgroundColor #E8EAF6
FontColor #1A237E
}
}

class "認証コントローラー" {
+login(credentials)
+refreshToken()
}

class "JwtTokenProvider" {
+generateToken(user)
+validateToken(token)
}

class "UserRepository" {
+findByUsername()
}

認証コントローラー ..> JwtTokenProvider : "使用"
認証コントローラー ..> UserRepository : "使用"
@enduml

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title アカウント概要ビューの動的図

Person(customer, "個人向けバンキング顧客") {
Container(spa, "シングルページアプリケーション") {
Container(api, "APIアプリケーション") {
ContainerDb(db, "データベース") {
System_Ext(coreBanking, "コアバンキングシステム")
}
}
}
}

Rel(customer, spa, "1. 'アカウント'をクリック", "")
Rel(spa, api, "2. GET /accounts", "JSON/HTTPS")
Rel(api, db, "3. キャッシュされた概要を読み取り", "")
Rel(api, coreBanking, "4. 最新のデータを取得", "")
Rel(api, spa, "5. JSONを返却", "")

SHOW_LEGEND()
@enduml

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title インターネットバンキングシステムの展開図

Deployment_Node(aws, "Amazon Web Services", "クラウド") {
Deployment_Node(ec2, "EC2 Auto-Scaling Group", "Linux") {
Container(api, "APIアプリケーション", "Java Spring Boot")
}
Deployment_Node(rds, "RDS", "PostgreSQL") {
ContainerDb(db, "データベース")
}
}

Deployment_Node(customerDevice, "顧客のデバイス", "Web/モバイル") {
Container(spa, "シングルページアプリケーション")
Container(mobile, "モバイルアプリ")
}

System_Ext(coreBanking, "コアバンキングシステム（オンプレミスのメインフレーム）")

Rel(spa, api, "APIコールを実行", "HTTPS")
Rel(mobile, api, "APIコールを実行", "HTTPS")
Rel_U(api, spa, "顧客のWebブラウザに配信")
Rel_U(api, mobile, "モバイルアプリに配信")

SHOW_LEGEND()
@enduml