C4 図
C4 図は、異なる抽象レベルでソフトウェアアーキテクチャを視覚化する方法を提供します。C4 モデルは、コンテキスト(Context)、コンテナ(Container)、コンポーネント(Component)、コード(Code)の4つのレベルの図で構成されています。
構文
基本要素
- 人:
Person(エイリアス, ラベル) - システム:
System(エイリアス, ラベル) - コンテナ:
Container(エイリアス, ラベル, 技術) - コンポーネント:
Component(エイリアス, ラベル, 技術) - 関係:
Rel(from, to, ラベル)
基本例
コード:
mermaid
C4Context
title インターネットバンキングシステムのシステムコンテキスト図
Person(customer, "銀行顧客", "銀行の顧客")
System(banking_system, "インターネットバンキングシステム", "顧客が口座情報を確認できるようにする")
Rel(customer, banking_system, "利用")
応用例
より詳細なWebアプリケーションのコンテナ図：
コード:
mermaid
C4Container
title インターネットバンキングシステムのコンテナ図
Person(customer, "銀行顧客", "銀行の顧客")
System_Boundary(banking_system, "インターネットバンキングシステム") {
Container(web_app, "Webアプリケーション", "Java, Spring MVC", "静的コンテンツとSPAを提供")
Container(spa, "シングルページアプリ", "JavaScript, Angular", "すべてのバンキング機能を提供")
Container(mobile_app, "モバイルアプリ", "Kotlin, Android", "限定的なバンキング機能を提供")
Container(api, "APIアプリケーション", "Java, Spring Boot", "API経由でバンキング機能を提供")
ContainerDb(database, "データベース", "Oracle Database", "ユーザー登録情報、認証情報、アクセスログ等を保存")
}
Rel(customer, web_app, "利用", "HTTPS")
Rel(customer, spa, "利用", "HTTPS")
Rel(customer, mobile_app, "利用")
Rel(web_app, spa, "提供")
Rel(spa, api, "利用", "JSON/HTTPS")
Rel(mobile_app, api, "利用", "JSON/HTTPS")
Rel(api, database, "読み書き", "JDBC")
コンポーネントレベル
コード:
mermaid
C4Component
title インターネットバンキングシステムのAPIアプリケーションコンポーネント図
Container_Boundary(api, "APIアプリケーション") {
Component(sign_in_controller, "サインインコントローラー", "Spring MVC Rest Controller", "ユーザーのサインイン機能を提供")
Component(security_component, "セキュリティコンポーネント", "Spring Security", "サインインやパスワード変更などの機能を提供")
Component(user_repository, "ユーザーリポジトリ", "Spring Data", "ユーザー情報へのアクセスを提供")
}
Rel(sign_in_controller, security_component, "使用")
Rel(security_component, user_repository, "使用")
デプロイメント図
コード:
mermaid
C4Deployment
title インターネットバンキングシステムのデプロイメント図
Deployment_Node(customer_computer, "顧客のコンピュータ", "Microsoft Windows または Apple macOS") {
Deployment_Node(web_browser, "Webブラウザ", "Chrome, Firefox, Safari, または Edge") {
Container(spa, "シングルページアプリ", "JavaScript, Angular", "すべてのバンキング機能を提供")
}
}
Deployment_Node(data_center, "データセンター") {
Deployment_Node(server, "アプリケーションサーバー", "Ubuntu 20.04 LTS") {
Container(api, "APIアプリケーション", "Java, Spring Boot")
}
Deployment_Node(database_server, "データベースサーバー", "Oracle") {
ContainerDb(database, "データベース", "Oracle 19c")
}
}
Rel(spa, api, "API呼び出し", "JSON/HTTPS")
Rel(api, database, "読み書き", "JDBC")
追加機能
境界と企業
コード:
mermaid
C4Context
Enterprise_Boundary(enterprise, "銀行") {
System(banking_system, "インターネットバンキングシステム")
System(atm_system, "ATMシステム")
}
Person(customer, "顧客")
System_Ext(mail_system, "メールシステム")
Rel(customer, banking_system, "利用")
Rel(customer, atm_system, "ATMで引き出し")
Rel(banking_system, mail_system, "メール送信")
スタイル設定
C4 図は自動的に：
- 異なる種類の要素をフォーマット
- 関係と依存関係を表示
- 技術スタックを表示
- 階層構造を整理
- 一貫した視覚言語を使用
実用的なヒント
- コンテキスト図から開始
- コンテナとコンポーネントビューで徐々に詳細を追加
- 図の焦点を明確に保つ
- 関連する技術的詳細を含める
- 重要な関係を表示
- 意味のある説明を使用
- 適切な場所に技術選択を含める
- 対象者の技術レベルを考慮
よくある問題の解決
複雑さの問題
- 適切な抽象レベルを選択
- 複雑なシステムを分解
- 境界を使用して要素を整理
可読性の問題
- 明確な階層構造を維持
- 過度な関係線を避ける
- 意味のあるラベルを使用
一貫性の問題
- C4モデルの規約に従う
- 命名の一貫性を保つ
- 統一された表現方法を使用
ベストプラクティス
- 適切な抽象レベルを選択
- 図をシンプルに保つ
- 明確な命名を使用
- 必要な技術的詳細を含める
- 重要な関係を強調
- 図の対象者を考慮
- ビュー間の一貫性を保つ