ソフトウェアアーキテクチャのためのC4モデル

C4モデルとは
#

ソフトウェアのアーキテクチャを表現するためのモデル。

コンテキスト（context）
コンテナ（containers）
コンポーネント（components）
コード（code）で構成される。

C4モデルは特別な表記法を規定していない。以下、ダイアグラムの図はThe C4 model for visualising software architectureを参考に作成した。

flowchart TD
	ソフトウェアシステム:::system
	ソフトウェアシステム --> containerA(コンテナ)
	ソフトウェアシステム --> containerB(コンテナ)
	ソフトウェアシステム --> containerC(コンテナ)
	componentA1:::dot
	containerA:::dot --> componentA1(コンポーネント)
	componentA:::dot
    containerB --> componentA(コンポーネント)
	containerB --> componentB(コンポーネント)
	containerB --> componentC(コンポーネント)
	containerB:::container
	componentC:::dot
 	componentA2:::dot
	containerC:::dot --> componentA2(コンポーネント)
	componentB --> codeA(コード)
	componentB --> codeB(コード)
	componentB --> codeC(コード)
	componentB:::component
	codeA:::code
	codeB:::code
	codeC:::code
	classDef dot fill:#eef,stroke:#f66,stroke-width:2px,color:#aaa,stroke-dasharray: 5 5
	classDef system fill:#faa,stroke:#333,color:#fff,stroke-width:4px
	classDef container fill:#44f,stroke:#333,color:#fff,stroke-width:4px
	classDef component fill:#77f,stroke:#333,color:#fff,stroke-width:4px
	classDef code fill:#aaf,stroke:#333,color:#fff,stroke-width:4px

レベル1 システムコンテキストダイアグラム
#

対象システムが、それを使用する人や関連する他システムとの関係性、どのような位置づけにあるかを図示する。

flowchart TD
	pbc(((銀行の顧客))) --> |口座残高参照,支払いに使用|ibs(インターネットバンキングシステム):::system
	ibs --> |口座情報取得,支払いに使用|mbs(メインフレームバンキングシステム)
	ibs --> |メール送信に使用|es(E-mailシステム)
	es --> |メール送信|pbc
	classDef system fill:#faa,stroke:#333,color:#fff,stroke-width:4px

システムコンテキストダイアグラムの例

レベル2 コンテナダイアグラム
#

ソフトウェアシステムを拡大したもので、それを構成するコンテナ（アプリケーション、データストア、マイクロサービスなど）を図示する。

flowchart TB
	subgraph インターネットバンキングシステム
		direction TB
		wa(Webアプリケーション\nJava ans Spring MVC):::container
		spa(シングルページアプリケーション\nJavaScript and Angular):::container
		mba(モバイルアプリケーション\nXamarin):::container
		wa --> |顧客のブラウザへ配信|spa
		spa --> |API呼び出し JSON,HTTPS|api(APIアプリケーション\nJava ans Spring MVC):::container
		mba --> |API呼び出し JSON,HTTPS|api
		api --> |読み込み, 書き込み|db[(データベース\nOracle Database)]:::container
	end
	pbc(((銀行の顧客)))
	pbc --> |サイトを開き使用|wa
	pbc --> |口座残高参照,支払いに使用|spa
	pbc --> |口座残高参照,支払いに使用|mba
	es --> |メール送信|pbc
	api --> |メール送信に使用|es(E-mailシステム)
	api --> |API呼び出し XML,HTTPS|mbs(メインフレームバンキングシステム)
	classDef container fill:#44f,stroke:#333,color:#fff,stroke-width:4px

コンテナダイアグラムの例

レベル3 コンポーネントダイアグラム
#

個々のコンテナにズームインし、その中のコンポーネントを表示する。コードベースのなかの実際の抽象概念（たとえば、コードのグループ化など）にマップする。

flowchart TB
	spa(シングルページアプリケーション\nJavaScript and Angular):::container
	mba(モバイルアプリケーション\nXamarin):::container
	subgraph APIアプリケーション
		sic(サインインコントローラ\nSprint MVC Rest Controller):::component
		sic --> |使用する|sc(セキュリティコンポーネント\nSpring Bean):::component
		rpc(パスワードリセットコントローラ):::component
		rpc --> |使用する|sc
		rpc --> |使用する|ec(E-mailコンポーネント):::component
		asc(アカウントサマリコントローラ\nSprint MVC Rest Controller):::component
		asc --> |使用する|mbsf(メインフレームバンキング\nシステムFacade\nSprint Bean):::component
	end
	spa --> |APIコール\nJSON, HTTPS|sic
	spa --> |APIコール\nJSON, HTTPS|rpc
	spa --> |APIコール\nJSON, HTTPS|asc
	mba --> |APIコール\nJSON, HTTPS|sic
	mba --> |APIコール\nJSON, HTTPS|rpc
	mba --> |APIコール\nJSON, HTTPS|asc
	sc --> |読み込み,書き込み|db[(データベース\nOracle Database)]:::container
	ec --> |メール送信で使用|es(E-mailシステム)
	mbsf --> |APIコール\nXML, HTTPS|mbs(メインフレームバンキングシステム)
	classDef container fill:#44f,stroke:#333,color:#fff,stroke-width:4px
	classDef component fill:#77f,stroke:#333,color:#fff,stroke-width:4px

コンポーネントダイアグラムの例

レベル4 コード
#

コンポーネントがどのように実装されているかを示す。

---
title: com.bigbankplc.intenetbanking.componet.mainframe
---
classDiagram
	MainframeBankingSystemFacadeImpl ..> BankingSystemConnection : +uses
	MainframeBankingSystemFacadeImpl ..> GetBalanceRequest : +creates
	MainframeBankingSystemFacadeImpl ..> GetBalanceResponse: +parses
	MainframeBankingSystemFacadeImpl ..> MainframeBankingSystemException : +throws
	BankingSystemConnection ..> AbstractRequest : +sends
	BankingSystemConnection ..> AbstractResponse : +receives
	MainframeBankingSystemException --|> InternetBankingSystemException
	GetBalanceRequest --|> AbstractRequest
	GetBalanceResponse --|> AbstractResponse

参考
#

機械学習のアルゴリズム選択フローチャート

2023-01-03

AI Mermaid

Choosing the right estimator — scikit-learn 1.2.0 documentationを元にMermaidでまとめた。 flowchart TD A((Start))--> B{50サンプル以上?} B -->|Yes| B1{カテゴリの\n予測?} B -->|No| B2((データを収集)) B1 -->|Yes| C1{正解ラベルあり?} C1 -->|Yes| Z3((分類)):::terminal C1 -->|No| Z4((クラスタリング)):::terminal B1 -->|No| C2{数量の予測?} C2 -->|Yes| Z1((回帰)):::terminal C2 -->|No| H((次元削除)):::terminal classDef terminal fill:#69F 分類 # flowchart TD Z3((分類)):::terminal --> I1{10万サンプル以下?} I1 -->|Yes| I11[線形SVC] I1 -->|No| I21[SDG Classifier]:::method I21 -->|うまくいかない| I22[kernel approximation\nGBDT]:::method I11 -->|うまくいかない| I12{テキストデータ?} I12 -->|Yes| I122[ネイティブベイズ]:::method I12 -->|No| I13[K近傍法]:::method I13 -->|うまくいかない| I131[SVC\nランダムフォレスト]:::method classDef terminal fill:#69F classDef method fill:#f9f,stroke:#333,stroke-width:4px クラスタリング # flowchart TD Z4((クラスタリング)):::terminal --> J1{カテゴリ数は既知?} J1 -->|Yes| J11{<10万サンプル以下?} J11 -->|Yes| J12[KMeans]:::method J12 -->|うまくいかない| J13[スペクトラルクラスタリング\nGMM]:::method J11 -->|No| J21[MiniBatch\nKMeans]:::method J1 -->|No| J3{<10K samples} J3 -->|Yes| J31[MeanShift\nVGBMM]:::method J3 -->|No| J34((不運)) classDef terminal fill:#69F classDef method fill:#f9f,stroke:#333,stroke-width:4px 回帰 # flowchart TD Z1((回帰)):::terminal --> D1{10万サンプル以下?} D1 -->|No| E1[SGD回帰分析]:::method D1 -->|Yes| E2{説明変数xの一部が重要?} E2 -->|Yes| F1[Lasso\nElasticNet]:::method E2 -->|No| F2[Ridge\n線形SVR]:::method F2 -->|うまくいかない| F3[SVR Kernel='rbf'\nEnsembleRegressors]:::method classDef terminal fill:#69F classDef method fill:#f9f,stroke:#333,stroke-width:4px 次元削除 # flowchart TD Z((次元削除)):::terminal --> H[Randomized PCA]:::method H -->|うまくいかない| H11{10万サンプル以下?} H11 -->|Yes| H22[Isomap\nSpectral Embedding]:::method H11 -->|No| H3[kernel\napproximation]:::method H22 -->|うまくいかない| H4[LLE]:::method classDef terminal fill:#69F classDef method fill:#f9f,stroke:#333,stroke-width:4px

C4モデルとは#

レベル1 システムコンテキスト ダイアグラム#

レベル2 コンテナ ダイアグラム#

レベル3 コンポーネント ダイアグラム#

レベル4 コード#

参考#

関連記事