C4

ソフトウェアアーキテクチャを 4つの抽象レベルで段階的に可視化する手法

関係者ごとに必要な粒度の図を用意し、理解のズレを減らすことを目的とする

C4の4階層

Context コンテキスト図

システムと、ユーザ、関連する他システムとの関係性を図示する

複数のcontainerを含む

ビジネス関係者との共通理解のために使う

示すもの

利用者、外部システム、境界

code:mermaid

C4Context

title System Context diagram for Internet Banking System

Enterprise_Boundary(b0, "BankBoundary0") {

Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")

Person(customerB, "Banking Customer B")

Person_Ext(customerC, "Banking Customer C", "desc")

Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

Enterprise_Boundary(b1, "BankBoundary") {

SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

System_Boundary(b2, "BankBoundary2") {

System(SystemA, "Banking System A")

System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")

}

System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")

SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

Boundary(b3, "BankBoundary3", "boundary") {

SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")

SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")

}

}

}

BiRel(customerA, SystemAA, "Uses")

BiRel(SystemAA, SystemE, "Uses")

Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")

Rel(SystemC, customerA, "Sends e-mails to")

UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")

UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")

UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")

UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")

UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")

UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

Container コンテナ図

システム内部の主要実行単位

技術選択・責務分割の説明のために使う

複数のcomponentを含む

示すもの

Webアプリ、API、DB、メッセージング等

code:mermaid

C4Container

title Container diagram for Internet Banking System

System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")

Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")

Container_Boundary(c1, "Internet Banking") {

Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")

Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")

Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")

ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")

ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")

}

System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

Rel(customer, web_app, "Uses", "HTTPS")

UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")

Rel(customer, spa, "Uses", "HTTPS")

UpdateRelStyle(customer, spa, $offsetY="-40")

Rel(customer, mobile_app, "Uses")

UpdateRelStyle(customer, mobile_app, $offsetY="-30")

Rel(web_app, spa, "Delivers")

UpdateRelStyle(web_app, spa, $offsetX="130")

Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")

Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")

Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")

Rel(email_system, customer, "Sends e-mails to")

UpdateRelStyle(email_system, customer, $offsetX="-45")

Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")

UpdateRelStyle(backend_api, email_system, $offsetY="-60")

Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")

UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")

Component コンポーネント図

コードを構成する大きな構造

1つのContainer内の、内部Component同士の関係、他システムとの関係を図示する

実装前の設計レビューなどに使う

示すもの

コントローラ、サービス、リポジトリ等

code:mermaid

C4Component

title Component diagram for Internet Banking System - API Application

Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")

Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")

ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")

System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

Container_Boundary(api, "API Application") {

Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")

Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")

Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")

Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")

Rel(sign, security, "Uses")

Rel(accounts, mbsfacade, "Uses")

Rel(security, db, "Read & write to", "JDBC")

Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")

}

Rel_Back(spa, sign, "Uses", "JSON/HTTPS")

Rel(spa, accounts, "Uses", "JSON/HTTPS")

Rel(ma, sign, "Uses", "JSON/HTTPS")

Rel(ma, accounts, "Uses", "JSON/HTTPS")

UpdateRelStyle(spa, sign, $offsetY="-40")

UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")

UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")

UpdateRelStyle(ma, accounts, $offsetY="-40")

UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")

UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")

UpdateRelStyle(security, db, $offsetY="-40")

UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")

classes, codes

示すもの

クラス、パッケージ、関数