コードを使用してアーキテクチャ図を描く方法を教えます

ChatGPT は 160 日間急騰しており、世界はもはや以前のような状態ではありません。

新しい人工知能中国語 Web サイトhttps://ai.weoknow.com では、
中国で利用可能な chatGPT リソースが毎日更新されます

---

1 はじめに

この記事では、簡潔で明確なソフトウェア アーキテクチャ視覚化モデルである C4 モデルを紹介し、コードを使用して美しい C4 アーキテクチャ図を描画する方法を説明します。

この記事を読んだ後、読者が描くアーキテクチャ図は次のようになります。

注: 凡例は図面の例としてのみ使用されており、その完全性と実現可能性は保証されません。

2.C4モデル

2.1 C4モデルの全体紹介

C4 は、ソフトウェア アーキテクチャを視覚化するためのソリューションです。アーキテクチャの視覚化とは、凡例を使用してソフトウェア アーキテクチャの設計を正確、明確、そして美しく表現することを指します。アーキテクチャの視覚化は、開発者にアーキテクチャの設計方法をガイドするものではなく、開発者がアーキテクチャ設計を表現し、簡潔で直感的なアーキテクチャ図を作成できるようにガイドするものです。

建築の視覚化にはさまざまな手法がありますが、主流となっているのは「4+1」ビューモデルとC4モデルです。ビューモデルはアーキテクチャそのものを記述するものであり、アーキテクチャが決まれば、それをどのようなモデルで表現しても本質的には同じであるはずであり、良い悪いの区別はありません。

C4 モデルは、学習しやすく、開発者にとって使いやすいソフトウェア アーキテクチャ図法であり、図を描画するために特定のグラフィックスや特定のモデリング言語の使用を規定していないため、ユーザーは非常に柔軟にアーキテクチャ図を生成できます。

C4 モデルは、システムを上から下にシステム コンテキスト、コンテナ、コンポーネント、コードの 4 つのビューの層に分割します。各層は前の層の改良と拡張であり、システムは次のように層ごとに記述されます。下の図。

---

2.2 システムコンテキスト図

System Context (システム コンテキスト) ビューは最上位層に位置し、ソフトウェア システム アーキテクチャ図の開始点であり、システムの全体像を表現します。システム コンテキスト ビューは、システム境界、システム関連ユーザー、その他のサポート システム、およびシステムとの相互作用に焦点を当てます。このレイヤーでは、テクノロジーの選択、プロトコル、導入シナリオ、その他の低レベルの詳細などの詳細には踏み込まないため、システム コンテキストは、技術者以外の人々にシステムを紹介するのに適した方法です。

役割: 構築するシステム、ユーザー、既存の IT インフラストラクチャを明確に示します。

範囲: 説明する基幹システムとそれに関連するユーザーおよびサポート システム、および基幹システムに関係のないその他のシステムは登場してはなりません。たとえば、タクシー配車システムを記述したい場合、関係のない薬局システムをそのシステムに組み込むべきではなく、システム コンテキストには記述すべきソフトウェア システムが 1 つだけ含まれていることを確認する必要があります。

主な要素: コンテキスト内で記述されるソフトウェア システム。

サポート要素: 主要要素のソフトウェア システムに範囲内で直接関連する人 (ユーザー、アクター、役割、ロールなど) および外部依存システム。多くの場合、これらの外部に依存するシステムは、私たち自身のソフトウェア システムの境界の外側に存在します。

対象読者: ソフトウェア開発チームの内外の、技術者と非技術者を含むすべての人々。

ほとんどのチームに推奨: はい。

例：

これは、オンライン バンキング システムのシステム コンテキスト図です。誰がそれを使用しているか、そしてそのシステムに他のどのようなソフトウェア システムが関連しているかを示します。構築するシステムは、銀行の個人顧客が口座情報の確認や決済を行うためのオンラインバンキングシステムです。オンライン バンキング システム自体は、これを行うために銀行の既存のメインフレーム バンキング システムを使用し、顧客に電子メールを送信するために銀行の既存の電子メール システムを使用します。

伝説：

2.3 コンテナ図

コンテナ (コンテナ) ビューは、システム コンテキストを拡大し、システム コンテキストの詳細を補足するものです。

ここでのコンテナとは、Docker などのコンテナ ミドルウェアを指すものではないことに注意してください。コンテナの説明の範囲は、単一の実行可能/デプロイ可能なユニットです。コンテナとは通常、サーバーサイド Web アプリケーション、シングルページ アプリケーション、デスクトップ アプリケーション、モバイル アプリケーション、データベース アーキテクチャ、ファイル システム、Redis、ElasticSeach、MQ などのアプリケーションと依存するミドルウェアを指します。

コンテナは、ソフトウェア アーキテクチャの高レベルの形状と、システム内のコンテナ間の責任分担を示します。

コンテナ レベルでは、システムの主要なテクノロジの選択と、コンテナ間の通信と対話も表示されます。

機能: システムの全体的な開発境界を示し、高レベルのテクノロジ選択を反映し、システム内のコンテナ間の分業と相互作用を明らかにします。

範囲: システム内のアプリケーション構成に焦点を当てた、単一のソフトウェア システム。

主な要素: Spring Boot パッケージ アプリケーション、MySQL データベース、Redis、MQ などのソフトウェア システム内のコンテナー。

サポート要素: コンテナーおよび外部依存システムを直接操作する人々。

対象読者: ソフトウェア アーキテクト、開発者、運用/サポート スタッフなど、ソフトウェア開発チーム内外の技術スタッフ。

ほとんどのチームに推奨: はい。

注: コンテナ ビューでは、展開シナリオ、クラスタリング、レプリケーション、フェイルオーバーなどは考慮されていません。デプロイメント関連のビューは、「デプロイメント」ビューを通じて表示されます。

例：

オンライン バンキング システム (システム コンテンツのシステムはこの時点で拡張されているため、破線のボックスで表されています) は、サーバー側 Web アプリケーション、シングルページ アプリケーション、モバイル アプリケーション、サーバー側 API の 5 つのコンテナーで構成されています。アプリケーションとデータベース。

• Web アプリケーションは、単一ページ アプリケーションを構成する静的コンテンツ (HTML、CSS、および JS) のみを提供する Java/Spring MVC Web アプリケーションです。

• シングル ページ アプリケーションは、顧客の Web ブラウザで実行される Angular アプリケーションであり、オンライン バンキング機能のフロントエンドです。

• お客様は、クロスプラットフォームの Xamarin モバイル アプリケーションを使用してオンライン バンキングにアクセスすることもできます。

• シングル ページ アプリケーションとモバイル アプリケーションは両方とも、サーバー上で実行されている別の Java/Spring MVC アプリケーションによって提供される JSON+HTTPS API を使用します。

• API アプリケーションは、リレーショナル データベースからユーザー情報を取得します。

• API アプリケーションは、独自の XML/HTTPS インターフェイスを使用して既存のメインフレーム バンキング システムと通信し、銀行口座に関する情報を取得したり、取引を実行したりすることもできます。

• API アプリケーションが顧客に電子メールを送信する必要がある場合は、既存の電子メール システムも使用されます。

コンテナ図の凡例は以下の通りで、主にデータベース、APP、ブラウザの凡例を紹介します。

2.4 コンポーネント図

単一のコンテナを拡大すると、そのコンテナ内のコンポーネントが表示されます。コンポーネント ビューには、コンテナが多くの「コンポーネント」でどのように構成されているか、各コンポーネントの内容、その責任、および技術的な実装の詳細が表示されます。

機能: 実行可能コンテナの内部構成と分業を示し、開発を直接ガイドできます。

範囲: 単一コンテナ。

主な要素: コンテナのスコープ内のコンポーネント、通常は Dubbo インターフェイス、REST インターフェイス、サービス、Dao など。

サポート要素: コンテナに直接接続されている人および外部依存システム。

対象読者: ソフトウェア アーキテクトおよび開発者。

ほとんどのチームに推奨: コンポーネントは開発をガイドするために使用され、必要に応じて作成されます。

例：

伝説：

2.5 コード図

コンポーネント ビューを拡大して、コンポーネントのコード ビュー (コード ビュー) を表示します。

コードビューはUMLクラス図やER図などを採用するのが一般的です。コード ビューはオプションの詳細レベルであり、通常は IDE などのツールによってオンデマンドで生成できます。このレベルの詳細は、最も重要なコンポーネントまたは複雑なコンポーネント以外には推奨されません。

現在、アジャイル開発に焦点を当てる場合、コード ビューを作成することは一般的に推奨されません。

範囲: 個々のコンポーネント。

主要な要素: スコープ付きコンポーネント内のコード要素 (クラス、インターフェイス、オブジェクト、関数、データベース テーブルなど)。

対象読者: ソフトウェア アーキテクトおよび開発者。

ほとんどのチームに推奨: いいえ、ほとんどの IDE はオンデマンドでこのレベルの詳細を生成できます。

2.6 システムランドスケープ図

C4 モデルは、単一のソフトウェア システムの静的なビューを提供します。システム コンテキスト、コンテナー、コンポーネントのいずれであっても、それらはすべて単一のソフトウェア システムについて記述されますが、実際にはソフトウェア システムは独立して存在しません。これらすべてのソフトウェア システムが特定の企業、組織、部門などの他のシステムとどのように連携するかを説明するために、C4 は拡張ビューのシステム ランドスケープを採用しています。

システム ランドスケープ図は実際には、特別な注意を払わなければソフトウェア システムの単なるシステム コンテキスト図 (システム コンテキスト図) であり、システム ランドスケープ図内のソフトウェア システムは C4 を使用して詳細に分析できます。

適用範囲：企業/組織/部門など。

主な要素: 選択した範囲に関連する人材とソフトウェア システム。

対象読者: ソフトウェア開発チームの内外の技術者および非技術者。

例：

伝説：

2.7 ダイナミックダイアグラム

動的ダイアグラムは、静的モデル内の要素が実行時にどのように連携して動作するかを示すために使用されます。動的ダイアグラムでは、ダイアグラム要素を自由に配置でき、番号付きの矢印で実行順序を示します。

範囲: 特定の機能、ストーリー、ユースケースなど。

主要要素とサポート要素: 実際のニーズに応じて、ソフトウェア システム、コンテナ、またはコンポーネントにすることができます。

対象読者: ソフトウェア開発チームの内外の技術者および非技術者。

例：

伝説：

2.8 展開図

デプロイメント図は、特定の環境 (運用、テスト、ステージング、開発など) における静的モデル内のソフトウェア システム (またはコンテナー) のインスタンスのデプロイメント シナリオを示すために使用されます。

C4 のデプロイメント図は UML デプロイメント図に基づいていますが、コンテナとデプロイメント ノード間のマッピングを強調するために若干簡略化されています。

デプロイメント ノードの表現は、物理インフラストラクチャ (物理サーバーやアプライアンスなど)、仮想化インフラストラクチャ (IaaS、PaaS、仮想マシンなど)、コンテナ化インフラストラクチャ (Docker コンテナなど)、実行と同様に、ソフトウェア システム/コンテナ インスタンスが実行される場所を表します。環境 (例: データベース サーバー、Java EE Web/アプリケーション サーバー、Microsoft IIS) など。デプロイメント ノードはネストすることも、DNS サービス、ロード バランサー、ファイアウォールなどのインフラストラクチャ ノードを含めることもできます。

アマゾン ウェブ サービス、Azure などによって提供されるアイコンを展開図で自由に使用してください。ただし、使用されるアイコンが曖昧さなく凡例に含まれていることを確認してください。

範囲: 単一の展開環境 (実稼働、ステージング、開発など) 内の 1 つ以上のソフトウェア システム。

主な要素: デプロイメント ノード、ソフトウェア システム インスタンス、およびコンテナー インスタンス。
サポート要素: ソフトウェア システムの展開に使用されるインフラストラクチャ ノード。

対象読者: ソフトウェア開発チームの内外の技術者。ソフトウェア アーキテクト、開発者、インフラストラクチャ アーキテクト、運用/サポート スタッフが含まれます。

例：

オンラインバンキングシステムの開発環境の展開図:

伝説

オンラインバンキングの実稼働環境展開図:

伝説

2.9 C4 モデルの仕様とレビューのチェックリスト

C4 モデルのアーキテクチャ図の可読性を確保するために、C4 モデルでは図面仕様と自己チェック用の CheckList が提供されます。

2.9.1 C4モデルの仕様

• チャート

各図には、図の種類と範囲を説明するタイトルが必要です (例: 「私のソフトウェア システムのシステム コンテキスト図」)。
すべての図には、使用される記号 (形状、色、境界線のスタイル、線種、矢印など) を説明するキー/凡例が必要です。
頭字語と略語 (ビジネス/ドメインまたは技術) は、すべての聴衆が理解できるようにするか、図のキー/凡例で説明する必要があります。

• エレメント

各要素のタイプ (人、ソフトウェア システム、コンテナ、コンポーネントなど) を明確に指定する必要があります。
各要素には、主要な責任を「一目で」把握できる短い説明が必要です。
すべてのコンテナとコンポーネントには、明確に指定されたテクノロジが必要です。

• 関係

各線は一方向の関係を表す必要があります。
各行にはラベルを付ける必要があり、そのラベル付けは関係 (依存関係やデータ フローなど) の方向と意図と一致する必要があります。タグはできるだけ具体的に使用し、できれば「use」などの単一の単語は避けてください。
コンテナ間の関係 (通常はプロセス間通信を表す) には、明確にラベル付けされたテクノロジ/プロトコルが必要です。

2.9.2 チェックリストの確認

C4モデルチャートの作成が完了したら、レビューチェックリストにより自己点検を行い、異常がないかを確認します。レビュー チェックリストは Web ページに作成されており、https://c4model.com/review/ からアクセスできます。

3. C4モデルアーキテクチャ図コード描画実戦

3.1 文字描画ツールの選択

C4 モデルのアーキテクチャ図を描画するには、通常 2 つの方法があります。

1 つ目は、draw.io、PPT、その他のツールなど、要素を直接ドラッグ アンド ドロップし、スタイルを調整して画像を作成できる描画ツールを使用することです。描画ツールの利点は、非常に柔軟性があり、多くの詳細な要件を満たすことができることですが、欠点は、通常、要素のスタイルを調整するのが面倒なことです。

2 つ目は、PlantUML などのテキストベースの描画ツールを使用して、特定の文法に従って画像要素を記述し、最終的にテキストに従って画像を自動的にレンダリングする方法です。テキストベースの描画ツールの利点は、記述ファイルが文法に従って記述されている限りレンダリング可能で、要素のスタイルがデフォルトでデバッグされている限り、描画が高速であることですが、欠点は、スタイルは必ずしも私たちの美学に一致するとは限らず、調整するのが不便です。

この記事では、2 番目のテキストベースの描画ツールに焦点を当てます。

structurizr、PlantUML、mermaid など、テキストベースの描画ツールが多数あり、それぞれに独自の構文があります。

道具	文法	使い方	住所
構造化	DSL	Web インターフェイスのレンダリング画像を提供し、C4-PlantUML およびマーメイド コードを生成できます	https://structurizr.com/
C4-プラントUML	プラントUML	VS Code プラグイン、IntelliJ Idea プラグイン	https://github.com/plantuml-stdlib/C4-PlantUML
マーメイド	マーメイド	Markdown プラグイン、ライブ エディターを提供	https://mermaid.js.org/syntax/c4c.html 、マーメイドライブエディター

現在、IntelliJ Idea と VS Code は開発者の間で非常に人気があるため、C4-PlantUML を使用することを選択し、VS Code および IntelliJ Idea と組み合わせて C4 モデルをそれぞれ描画します。

VS Code環境のインストールについては3.2を参照してください。

IntelliJ Idea 環境のインストールについては、3.3 を参照してください。

3.2 VS Code での C4-PlantUML のインストール

3.2.1 VS コードのインストール

公式サイトから直接ダウンロードしてインストールするだけで、プロセスは省略されます。

3.2.2 PlantUML プラグインのインストール

VS Code の [拡張機能] ウィンドウで PlantUML を検索し、PlantUML プラグインをインストールします。

3.2.3 VS Code スニペットの構成

PlantUML をインストールした後、効率を向上させるために、PlantUML 関連のコード スニペットをインストールすることをお勧めします。

VS Code メニューを開きます。以下に示すように、レベルはコード→設定→ユーザー スニペットです。

以下に示すように、「スニペット ファイルの選択」または「スニペットの作成」ポップアップ ウィンドウで、「新しいグローバル スニペット ファイル」を選択します。

次のポップアップ ウィンドウで、以下に示すようにスニペット ファイルのファイル名を入力します。

ブラウザを使用して次のリンクを開き、ブラウザから返されたテキストを VS Code 編集領域に貼り付けます。

https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/.vscode/C4.code-snippets

図に示すように:

3.2.4 Graphvizのインストール

グラフィックのレンダリングに問題がある場合は、graphviz ライブラリをインストールするように求められます。graphviz 公式 Web サイトにアクセスしてインストールしてください。公式サイトのリンクは以下の通りです。

https://graphviz.gitlab.io/download/

Mac システムの場合は、MacPorts を使用してインストールすることをお勧めします。

3.3 IntelliJ Idea での C4-PlantUML のインストール

3.3.1 インストールのアイデア

3.3.2 PlantUML 統合プラグインのインストール

3.3.3 コードテンプレートのインストール

以下のリンクから IntelliJ ライブ テンプレートをダウンロードします。

https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/intellij/c4_live_template.zip

メニュー パス から File | Manage IDE Settings | Import Settings 、ダウンロードした ZIP ファイルを選択し、 c4_live_template.zipインポートして Idea を再起動します。

3.4 ケーススタディと C4-PlantUML 文法の概要

C4-PlantUML の詳細な構文は、公式 Web サイトの github プロジェクトのホームページ (https://github.com/plantuml-stdlib/C4-PlantUML) にあります。ここでは簡単に説明します。

3.4.1 ケース

採用アプリのサーバーアーキテクチャ図（コンテナレベル）を例に説明すると、レンダリングされた効果図は以下になります。

以下は完全な plantuml コードです。

@startuml  
  
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml  
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml  
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

!define SPRITESURL https://raw.githubusercontent.com/rabelenda/cicon-plantuml-sprites/master/sprites    
!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons  
!define DEVICONS2 https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons2  
!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5  
!include DEVICONS/java.puml  
!include DEVICONS/mysql.puml  
!include DEVICONS2/spring.puml  
!include DEVICONS2/redis.puml  
!include DEVICONS2/android.puml  
!include DEVICONS2/apple_original.puml  
  
title 招聘APP架构图（Container）  
  
Person(P_User, "找工作的APP用户（应聘者）")  
  
System_Boundary(Boundary_APP, "招聘APP系统边界"){  
	Container(C_ANDROID, "安卓移动端", "android", "移动APP安卓端",$sprite="android")  
	Container(C_IOS, "iOS移动端", "iOS", "移动APP iOS端",$sprite="apple_original")  
	Container(C_GATEWAY, "HTTP网关", "Netty", "鉴权、协议转换",$sprite="java")  
	Container(C_GATEWAY_CACHE, "网关缓存", "Redis", "缓存认证凭据",$sprite="redis")  
	Container(C_BFF, "BFF网关", "Spring Boot","整合后端接口",$sprite="spring")  
	Container(C_CERT, "实名认证服务", "Spring Boot", "内部实名认证服务",$sprite="spring")  
	Container(C_BIZ_1, "职位服务", "Spring Boot", "发布、搜索职位",$sprite="spring")  
	Container(C_PAYMENT, "支付服务", "Spring Boot", "内部支付服务",$sprite="spring")  
	ContainerDb(CDB_MYSQL, "职位信息数据库", "MySQL", "持久化职位信息",$sprite="mysql")  
}  
  
System_Ext(OUT_S_CERT, "实名认证服务","对用户进行姓名身份证号实名认证")  
System_Ext(OUT_S_PAYMENT, "第三方支付服务","支持用户使用多种支付方式完成支付")  
  
Rel(P_User, C_ANDROID, "注册登陆投递简历")  
Rel(P_User, C_IOS, "注册登陆投递简历")  
  
Rel(C_ANDROID, C_GATEWAY, "请求服务端","HTTPS")  
Rel(C_IOS, C_GATEWAY, "请求服务端","HTTPS")  
  
Rel_L(C_GATEWAY, C_GATEWAY_CACHE, "读写缓存","jedis")  
Rel(C_GATEWAY, C_BFF, "将HTTP协议转为RPC协议","RPC")  
  
Rel(C_GATEWAY, C_BIZ_1, "将HTTP协议转为RPC协议","RPC")  
Rel(C_GATEWAY, C_PAYMENT, "将HTTP协议转为RPC协议","RPC")  
  
Rel(C_BFF, C_CERT, "通过BFF处理之后，对外暴露接口服务","RPC")  
  
Rel(C_BIZ_1, CDB_MYSQL, "读写数据","JDBC")  
  
Rel(C_CERT, OUT_S_CERT, "对接外部查询实名信息接口","HTTPS")  
Rel(C_PAYMENT, OUT_S_PAYMENT, "对接外部支付系统","HTTPS")  
  
left to right direction  
  
SHOW_LEGEND()  
  
@enduml

3.4.2 PlantUML ファイル

PlantUML ファイルには、puml ファイル拡張子が付いています。

3.4.3 @startuml と @enduml

ドキュメント全体は  、固定構文である と@startuml で 囲まれています。@enduml

@startuml

@enduml

3.4.4 注意事項

PlantUML では一重引用符 (つまり) が'注釈識別子として使用されます。

3.4.5 include ステートメント

1 つ目は C4 の各ビューの include ステートメントで、次のステートメントは C4 の Context、Container、および Component ビューの導入を表します。

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml  
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml  
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

アイコン ライブラリが続きます。

!define SPRITESURL https://raw.githubusercontent.com/rabelenda/cicon-plantuml-sprites/master/sprites    
!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons  
!define DEVICONS2 https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons2  
!define FONTAWESOME https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5  
!include DEVICONS/java.puml  
!include DEVICONS/mysql.puml  
!include DEVICONS2/spring.puml  
!include DEVICONS2/redis.puml  
!include DEVICONS2/android.puml  
!include DEVICONS2/apple_original.puml

ここには定義構文があることに注意してください。最初に **!define** でロゴを定義し、その後、ロゴが使用されている場所が置き換えられます。

!define DEVICONS2 https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons2
!include DEVICONS2/spring.puml
‘ 等价于 !include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons2/spring.puml

アイコンを使用する場合は、要素の宣言ステートメントにアイコンを追加するだけで済みます $sprite="xxx" 。

ContainerDb(CDB_MYSQL, "职位信息数据库", "MySQL", "持久化职位信息",$sprite="mysql")

3.4.6 C4 モデルの静的要素

人: システムのユーザー。個人または別のシステムの場合があります。

システム: 構築するシステムを表し、通常は青い四角形として表示されます。
System_Ext: 既存のシステムを表し、通常は灰色の四角形として表示されます。
System_Boundary: システムがコンテナに展開される場合、System を System_Boundary に変更します。これはシステムの境界を表し、コンテナ要素は内部に配置され、通常は点線のボックスとして表示されます。

コンテナ: 構築されるコンテナ。通常は青い四角形として表示されます。
Container_Ext: 構築されたコンテナ。通常は灰色の四角形として表示されます。
Container_Boundary: コンテナがコンポーネントに展開されると、コンテナはコンテナの境界を表す Container_Boundary に変更され、コンポーネント要素は内部に配置され、通常は点線のフレームとしてレンダリングされます。

ContainerDb: 構築されるデータベース。通常は青い円柱として表示されます。
ContainerQueue: 構築されるメッセージ キュー。通常は水平に配置された青い円柱として表示されます。

コンポーネント: 構築されるコンポーネント。通常は青い四角形として表示されます。
Component_Ext: 構築されたコンポーネント。通常は灰色の四角形として表示されます。

静的要素の構文は次のとおりです。

Container(alias, "label", "technology", "description")

alias: は、図内の要素の一意の ID であり、他の場所でエイリアスによって参照できます。たとえば、  label:要素の表示名Rel を表します。 technology: 要素によって採用されているコア テクノロジを表します。開発言語、フレームワーク、通信プロトコルなどの説明: 要素の簡単な説明を表します。

System_Boundary と Container_Boundary の場合、エイリアスとラベルのみが必要で、中括弧は要素の境界内の子要素です。

Container_Boundary(alias, "label"){

}

3.4.7 C4 モデルの関係要素

Rel は 2 つの要素間の関係を表し、その構文は次のとおりです。

Rel(from_alias, to_alias, "label", "technology")

from_alias は開始要素のエイリアス、to_alias は終了要素のエイリアス、label は関係を記述するために使用され、technology は採用されているテクノロジーと通信プロトコルを表します。例えば：

Rel(C_IOS, C_GATEWAY, "请求服务端","HTTPS")

HTTPS 通信を使用して、リクエスト ゲートウェイ インターフェイス経由でサーバー リソースにアクセスする iOS クライアントを表します。

描画 Rel 時にマークを付けることを お勧めしますtechnology。

3.4.8 C4-PlantUML レイアウト

C4-PlantUML はさまざまな自動レイアウト ソリューションを提供しており、実際のニーズに応じて選択できます。

• LAYOUT_TOP_DOWN (): 上から下へのレイアウト。このレイアウトはデフォルトで採用されます。以下に示すように:

• LAYOUT_LEFT_RIGHT (): 左から右へ、つまり要素を水平に配置します。left to right direction PlantUML の構文であり、直接使用することもできます。

3.4.9 凡例

SHOW_LEGEND() 凡例を追加することによって 。

---

ChatGPT は 160 日間急騰しており、世界はもはや以前のような状態ではありません。

新しい人工知能中国語 Web サイトhttps://ai.weoknow.com では、
中国で利用可能な chatGPT リソースが毎日更新されます