來源 | OSCHINA 社區(qū)
作者 | 京東云開發(fā)者-京東物流 覃玉杰
1. 前言
本文將給大家介紹一種簡潔明了軟件架構可視化模型 ——C4 模型，并手把手教大家如何使用 代碼繪制出精美的 C4 架構圖。
閱讀本文之后，讀者畫的架構圖將會是這樣的：
2. C4 模型 2.1 C4 模型整體介紹注：該圖例僅作繪圖示例使用，不確保其完整性、可行性。
C4 是軟件架構可視化的一種方案。架構可視化，指的是用圖例的方式，把軟件架構設計準確、清晰、美觀地表示出來。架構可視化不是指導開發(fā)者如何進行架構設計，而是指導開發(fā)者將架構設計表達出來，產(chǎn)出簡潔直觀的架構圖。
架構可視化的方法有很多，主流的有 “4+1” 視圖模型、C4 模型。視圖模型描述的是架構本身，架構確定之后，不管用什么模型去表達，本質(zhì)上都應該是一樣的，并沒有優(yōu)劣之分。
C4 模型是一種易于學習、對開發(fā)人員友好的軟件架構圖示方法，C4 模型沒有規(guī)定使用特定的圖形、特定的建模語言來畫圖，因而使用者可以非常靈活地產(chǎn)出架構圖。
C4 模型將系統(tǒng)從上往下分為 System Context, Containers, Components, Code 四層視圖，每一層都是對上一層的完善和展開，層層遞進地對系統(tǒng)進行描述，如下圖。
2.2 System Context diagram
System Context（系統(tǒng)上下文）視圖位于頂層，是軟件系統(tǒng)架構圖的起點，表達的是系統(tǒng)的全貌。System Context 視圖重點展示的是系統(tǒng)邊界、系統(tǒng)相關的用戶、其他支撐系統(tǒng)以及與本系統(tǒng)的交互。本層不涉及到具體細節(jié)（例如技術選型、協(xié)議、部署方案和其他低級細節(jié)），因此 System Context 可以很好地向非技術人員介紹系統(tǒng)。
作用：清晰地展示待構建的系統(tǒng)、用戶以及現(xiàn)有的 IT 基礎設施。
范圍：待描述的核心系統(tǒng)以及其相關用戶、支撐系統(tǒng)，不應該出現(xiàn)與核心系統(tǒng)無關的其他系統(tǒng)。例如我們要描述一個打車系統(tǒng)，不應該把無關聯(lián)的藥店系統(tǒng)繪制進去，并且要確保一個 System Context 只有一個待描述的軟件系統(tǒng)。
主要元素：Context 內(nèi)待描述的軟件系統(tǒng)。
支持元素：在范圍內(nèi)直接與主要元素中的軟件系統(tǒng)有關聯(lián)的人員（例如用戶、參與者、角色或角色）和外部依賴系統(tǒng)。通常，這些外部依賴系統(tǒng)位于我們自己的軟件系統(tǒng)邊界之外。
目標受眾：軟件開發(fā)團隊內(nèi)外的所有人，包括技術人員和非技術人員。
推薦給大多數(shù)團隊：是的。
示例：
這是該網(wǎng)上銀行系統(tǒng)的系統(tǒng)上下文圖。它顯示了使用它的人，以及與該系統(tǒng)有關系的其他軟件系統(tǒng)。網(wǎng)上銀行系統(tǒng)是將要建設的系統(tǒng)，銀行的個人客戶使用網(wǎng)上銀行系統(tǒng)查看其銀行賬戶的信息并進行支付。網(wǎng)上銀行系統(tǒng)本身使用銀行現(xiàn)有的大型機銀行系統(tǒng)來執(zhí)行此操作，并使用銀行現(xiàn)有的電子郵件系統(tǒng)向客戶發(fā)送電子郵件。
圖例：
2.3 Container diagram
Container（容器）視圖是對 System Context 的放大，是對 System Context 細節(jié)的補充。
注意這里的容器，指的不是 Docker 等容器中間件。Container 的描述范圍是一個可單獨運行 / 可部署的單元。Container 一般指的是應用以及依賴的中間件，例如服務器端 Web 應用程序、單頁應用程序、桌面應用程序、移動應用程序、數(shù)據(jù)庫架構、文件系統(tǒng)、redis、ElasticSeach、MQ 等。
Container 顯示了軟件架構的高級形狀以及系統(tǒng)內(nèi)各容器之間的職責分工。
在 Container 這一層，還顯示了系統(tǒng)的主要的技術選型以及容器間的通信和交互。
作用：展示系統(tǒng)整體的開發(fā)邊界，體現(xiàn)高層次的技術選型，暴露系統(tǒng)內(nèi)容器之間的分工交互。
范圍：單個軟件系統(tǒng)，關注的系統(tǒng)內(nèi)部的應用構成。
主要元素：軟件系統(tǒng)范圍內(nèi)的容器，例如 Spring Boot 打包后的應用，MySQL 數(shù)據(jù)庫、Redis、MQ 等。
支持元素：直接使用容器的人員和外部依賴系統(tǒng)。
目標受眾：軟件開發(fā)團隊內(nèi)外的技術人員，包括軟件架構師、開發(fā)人員和運營 / 支持人員。
推薦給大多數(shù)團隊：是的。
注意：Container 視圖沒有說明部署方案、集群、復制、故障轉移等。部署相關的視圖，會通過 Deployment 視圖進行展示。
示例：
網(wǎng)上銀行系統(tǒng)（此時 System Contenxt 中的系統(tǒng)已經(jīng)被展開，所以用虛線框表示）由五個容器組成：服務器端 Web 應用程序、單頁應用程序、移動應用程序、服務器端 API 應用程序和數(shù)據(jù)庫。
- Web 應用程序是一個 JAVA/Spring MVC Web 應用程序，它只提供構成單頁應用程序的靜態(tài)內(nèi)容（html、css 和 JS）。
- 單頁應用程序是在客戶的網(wǎng)絡瀏覽器中運行的 Angular 應用程序，是網(wǎng)上銀行功能的前端。
- 客戶也可以使用跨平臺 Xamarin 移動應用程序來訪問網(wǎng)上銀行。
- 單頁應用程序和移動應用程序都使用 JSON+HTTPS API，該 API 由運行在服務器上的另一個 Java/Spring MVC 應用程序提供。
- API 應用程序從關系數(shù)據(jù)庫中獲取用戶信息。
- API 應用程序還使用專有的 XML/HTTPS 接口與現(xiàn)有的大型機銀行系統(tǒng)進行通信，以獲取有關銀行賬戶的信息或進行交易。
- 如果 API 應用程序需要向客戶發(fā)送電子郵件，它也會使用現(xiàn)有的電子郵件系統(tǒng)。
該容器圖的圖例如下，主要是引入了數(shù)據(jù)庫、App、瀏覽器的圖例。
2.4 Component diagram
將單個容器放大，則顯示了該容器內(nèi)部的組件。Component（組件）視圖顯示了一個容器是如何由許多 “組件” 組成的，每個組件是什么，它們的職責以及技術實現(xiàn)細節(jié)。
作用：展示了可執(zhí)行的容器內(nèi)部構成與分工，可直接指導開發(fā)。
范圍：單個容器。
主要元素：范圍內(nèi)容器內(nèi)的組件，通常可以是 Dubbo 接口、REST 接口、Service、Dao 等。
支持元素：直接連接到容器的人員和外部依賴系統(tǒng)。
目標受眾：軟件架構師和開發(fā)人員。
推薦給大多數(shù)團隊：Component 用于指導開發(fā)，當有需要時創(chuàng)建。
示例：
圖例：
2.5 Code diagram
放大組件視圖，則得到出組件的 Code 視圖（代碼視圖）。
Code 視圖一般采用 UML 類圖、ER 圖等。Code 視圖是一個可選的詳細級別，通常可以通過 IDE 等工具按需生成。除了最重要或最復雜的組件外，不建議將這種詳細程度用于其他任何內(nèi)容。
在注重敏捷開發(fā)的今天，一般不建議產(chǎn)出 Code 視圖。
范圍：單個組件。
主要元素：范圍內(nèi)組件內(nèi)的代碼元素（例如類、接口、對象、函數(shù)、數(shù)據(jù)庫表等）。
目標受眾：軟件架構師和開發(fā)人員。
推薦給大多數(shù)團隊：不，大多數(shù) IDE 可以按需生成這種級別的詳細信息。
2.6 System Landscape diagram
C4 模型提供了單個軟件系統(tǒng)的靜態(tài)視圖，不管是 System Context、Container、Component 都是針對單個軟件系統(tǒng)的進行描述的，但在實際中軟件系統(tǒng)不會孤立存在。為描述所有這些軟件系統(tǒng)如何在給定的企業(yè)、組織、部門等中與其他系統(tǒng)組合在一起，C4 采用擴展視圖 System Landscape （系統(tǒng)景觀圖）。
系統(tǒng)景觀圖實際上只是一個沒有特定關注的軟件系統(tǒng)的系統(tǒng)上下文圖（System Context diagram），系統(tǒng)景觀圖內(nèi)的軟件系統(tǒng)都可以采用 C4 進行深入分析。
適用范圍：企業(yè) / 組織 / 部門 / 等。
主要元素：與所選范圍相關的人員和軟件系統(tǒng)。
目標受眾：軟件開發(fā)團隊內(nèi)外的技術人員和非技術人員。
示例：
圖例：
2.7 Dynamic diagram
Dynamic diagram（動態(tài)圖）用于展示靜態(tài)模型中的元素如何在運行時協(xié)作。動態(tài)圖允許圖表元素自由排列，并通過帶有編號的箭頭以指示執(zhí)行順序。
范圍：特定功能、故事、用例等。
主要元素和支持元素：按照實際需要，可以是軟件系統(tǒng)、容器或組件。
目標受眾：軟件開發(fā)團隊內(nèi)外的技術人員和非技術人員。
示例：
圖例：
2.8 Deployment diagram
Deployment diagram（部署圖）用于說明靜態(tài)模型中的軟件系統(tǒng)（或容器）的實例在給定環(huán)境（例如生產(chǎn)、測試、預發(fā)、開發(fā)等）中的部署方案。
C4 的部署圖基于 UML 部署圖，但為了突出顯示容器和部署節(jié)點之間的映射會做略微的簡化。
部署節(jié)點表示表示軟件系統(tǒng) / 容器實例運行的位置，類似于物理基礎架構（例如物理服務器或設備）、虛擬化基礎架構（例如 IaaS、PaaS、虛擬機）、容器化基礎架構（例如 Docker 容器）、執(zhí)行環(huán)境（例如數(shù)據(jù)庫服務器、Java EE web / 應用服務器、Microsoft IIS）等。部署節(jié)點可以嵌套，也可以將基礎設施節(jié)點包括進去，例如 DNS 服務、負載平衡器、防火墻等。
可以在部署圖中隨意使用 Amazon Web Services、Azure 等提供的圖標，只需確保被使用的任何圖標都包含在圖例中，不產(chǎn)生歧義。
范圍：單個部署環(huán)境中的一個或多個軟件系統(tǒng)（例如生產(chǎn)、暫存、開發(fā)等）。
主要元素：部署節(jié)點、軟件系統(tǒng)實例和容器實例。
支持元素：用于部署軟件系統(tǒng)的基礎設施節(jié)點。
目標受眾：軟件開發(fā)團隊內(nèi)外的技術人員；包括軟件架構師、開發(fā)人員、基礎架構架構師和運營 / 支持人員。
示例：
網(wǎng)上銀行系統(tǒng)的開發(fā)環(huán)境部署圖：
圖例
網(wǎng)上銀行的生產(chǎn)環(huán)境部署圖：
圖例
2.9 C4 模型規(guī)范以及 Review CheckList
為了確保 C4 模型的架構圖的可讀性，C4 模型提供了作圖規(guī)范，并且提供了 CheckList 供自查。
2.9.1 C4 模型規(guī)范
- 圖表
每個圖都應該有一個描述圖類型和范圍的標題（例如 “我的軟件系統(tǒng)的系統(tǒng)環(huán)境圖”）。
每個圖表都應該有一個關鍵 / 圖例來解釋所使用的符號（例如形狀、顏色、邊框樣式、線型、箭頭等）。
首字母縮略詞和縮寫詞（業(yè)務 / 領域或技術）應為所有受眾所理解，或在圖表鍵 / 圖例中進行解釋。
- 元素
應明確指定每個元素的類型（例如，人員、軟件系統(tǒng)、容器或組件）。
每個元素都應該有一個簡短的描述，以提供關鍵職責的 “一目了然” 的視圖。
每個容器和組件都應該有明確指定的技術。
- 關系
每條線都應該代表一個單向關系。
每一行都應該被標記，標記與關系的方向和意圖一致（例如依賴或數(shù)據(jù)流）。嘗試盡可能具體地使用標簽，最好避免使用 “使用” 等單個詞。
容器之間的關系（通常代表進程間通信）應該有明確標記的技術 / 協(xié)議。
2.9.2 Review Checklist
C4 模型圖表繪制完成后，可以通過 Review Checklist 進行自查，檢查是否有不規(guī)范之處。Review Checklist 被制成網(wǎng)頁，可以通過 https://c4model.com/review/ 進行訪問。
3. C4 模型架構圖代碼繪制實戰(zhàn)3.1 文本繪圖工具選型
關于 C4 模型的架構圖的繪制，一般有兩種方式：
第一種是采用繪圖工具，這類工具直接拖拽元素、調(diào)整樣式，即可產(chǎn)出圖片，例如 draw.io、PPT 等工具。繪圖工具的優(yōu)點是非常靈活，可以滿足很多細節(jié)需求；缺點是通常調(diào)整元素的樣式會比較繁瑣。
第二種是采用基于文本的繪圖工具，根據(jù)一定的語法去描述圖片元素，最后根據(jù)文本自動渲染成圖片，例如 PlantUML。基于文本的繪圖工具的優(yōu)點是繪圖快捷，只要根據(jù)語法寫出描述文件，即可渲染出來，元素的樣式已經(jīng)默認調(diào)試好；缺點是樣式不一定符合我們的審美，調(diào)整不方便。
本文著重講解第二種，即基于文本的繪圖工具。
基于文本的繪圖工具有很多，例如：structurizr、PlantUML、mermaid，分別有自己的語法。
| 工具 | 語法 | 使用方式 | 地址 |
|---|---|---|---|
| structurizr | DSL | 提供 Web 界面渲染圖片，并且可以生成 C4-PlantUML 和 mermaid 的代碼 | https://structurizr.com/ |
| C4-PlantUML | PlantUML | VS Code 插件、IntelliJ Idea 插件 | https://Github.com/plantuml-stdlib/C4-PlantUML |
| mermaid | mermaid | Markdown 插件，提供 Live Editor | https://mermaid.js.org/syntax/c4c.html ,Mermaid Live Editor |
由于 IntelliJ Idea、VS Code 目前在開發(fā)者中非常普及，我們選擇使用 C4-PlantUML，結合 VS Code 和 IntelliJ Idea 分別進行 C4 模型的繪制。
VS Code 環(huán)境的安裝，見 3.2。
IntelliJ Idea 環(huán)境的安裝，見 3.3
3.2 VS Code 下 C4-PlantUML 安裝3.2.1 安裝 VS Code
直接官網(wǎng)下載安裝即可，過程略去。
3.2.2 安裝 PlantUML 插件
在 VS Code 的 Extensions 窗口中搜索 PlantUML，安裝 PlantUML 插件。
3.2.3 配置 VS Code 代碼片段
安裝完 PlantUML 之后，為了提高效率，我們最好安裝 PlantUML 相關的代碼片段。
打開 VS Code 菜單，層級為 Code→Preferences→User Snippets，如下圖：
在選擇 Snippets File Or Create Snippets 彈窗中，選擇 New Global Snippets file，如下圖：
在接下來的彈窗中，輸入 Snippets file 的文件名，如下圖：
使用瀏覽器打開以下鏈接，并將瀏覽器返回的文本內(nèi)容粘貼到 VS Code 編輯區(qū)
https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/.vscode/C4.code-snippets
如圖：
3.2.4 安裝 Graphviz
如果圖形渲染出現(xiàn)問題，提示安裝 graphviz 庫，直接到 graphviz 官網(wǎng)安裝即可。官網(wǎng)鏈接如下：
https://graphviz.gitlab.io/download/
mac 系統(tǒng)推薦采用 MacPorts 安裝。
3.3 IntelliJ Idea 下 C4-PlantUML 安裝3.3.1 安裝 Idea3.3.2 安裝 PlantUML Integration 插件
3.3.3 安裝代碼模版
通過以下鏈接，下載 IntelliJ live template。
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 案例實戰(zhàn)及 C4-PlantUML 語法介紹
C4-PlantUML 的詳細語法可以到官網(wǎng) github 項目主頁（ https://github.com/plantuml-stdlib/C4-PlantUML ）去了解，在此只做簡單介紹。
3.4.1 案例
以某招聘 APP 服務端架構圖（Container 級）為例子進行講解，以下是渲染出來的效果圖。
以下是完整 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系統(tǒng)邊界"){
Container(C_ANDROID, "安卓移動端", "android", "移動APP安卓端",$sprite= "android")
Container(C_IOS, "iOS移動端", "iOS", "移動APP iOS端",$sprite= "apple_original")
Container(C_GATEWAY, "HTTP網(wǎng)關", ".NETty", "鑒權、協(xié)議轉換",$sprite= "java")
Container(C_GATEWAY_CACHE, "網(wǎng)關緩存", "Redis", "緩存認證憑據(jù)",$sprite= "redis")
Container(C_BFF, "BFF網(wǎng)關", "Spring Boot", "整合后端接口",$sprite= "spring")
Container(C_CERT, "實名認證服務", "Spring Boot", "內(nèi)部實名認證服務",$sprite= "spring")
Container(C_BIZ_1, "職位服務", "Spring Boot", "發(fā)布、搜索職位",$sprite= "spring")
Container(C_PAYMENT, "支付服務", "Spring Boot", "內(nèi)部支付服務",$sprite= "spring")
ContainerDb(CDB_MYSQL, "職位信息數(shù)據(jù)庫", "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協(xié)議轉為RPC協(xié)議", "RPC")
Rel(C_GATEWAY, C_BIZ_1, "將HTTP協(xié)議轉為RPC協(xié)議", "RPC")
Rel(C_GATEWAY, C_PAYMENT, "將HTTP協(xié)議轉為RPC協(xié)議", "RPC")
Rel(C_BFF, C_CERT, "通過BFF處理之后，對外暴露接口服務", "RPC")
Rel(C_BIZ_1, CDB_MYSQL, "讀寫數(shù)據(jù)", "JDBC")
Rel(C_CERT, OUT_S_CERT, "對接外部查詢實名信息接口", "HTTPS")
Rel(C_PAYMENT, OUT_S_PAYMENT, "對接外部支付系統(tǒng)", "HTTPS")
lefttorightdirection
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 語句
首先是 C4 各個視圖的 include 語句，以下語句代表引入了 C4 的 Context、Container、Component 視圖。
! includehttps:/ /raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
! includehttps:/ /raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
! includehttps:/ /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** 定義一個標識，之后使用該標識的地方都會被替換
!define DEVICONS2 https:/ /raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons2
! includeDEVICONS2/spring.puml
‘ 等價于 ! includehttps:/ /raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons2/spring.puml
使用圖標時，只需要在元素的聲明語句中加入 $sprite="xxx"即可。
ContainerDb(CDB_MYSQL, "職位信息數(shù)據(jù)庫", "MySQL", "持久化職位信息",$sprite= "mysql")
3.4.6 C4 模型靜態(tài)元素
Person：系統(tǒng)的用戶，可能是人或者其他系統(tǒng)
System：代表即將建設的系統(tǒng)，通常渲染為藍色方塊。
System_Ext：代表已存在的系統(tǒng)，通常渲染為灰色方塊。
System_Boundary：某系統(tǒng)展開為容器時，則將 System 改為 System_Boundary，代表系統(tǒng)的邊界，內(nèi)部放置容器元素，通常渲染為虛線框。
Container：待建設的容器，通常渲染為藍色方塊。
Container_Ext：已建設容器，通常渲染為灰色方塊。
Container_Boundary：某容器展開為組件之后，則將 Container 改為 Container_Boundary，代表容器的邊界，內(nèi)部放置組件元素，通常渲染為虛線框。
ContainerDb：待建設數(shù)據(jù)庫，通常渲染為藍色圓柱。
ContainerQueue：待建設消息隊列，通常渲染為水平放置的藍色圓柱。
Component：待建設組件，通常渲染為藍色方塊。
Component_Ext：已建設組件，通常渲染為灰色方塊。
靜態(tài)元素的語法為：
Container(alias, "label", "technology", "deion")
alias：是圖內(nèi)元素的唯一 ID，其他地方可以通過 alias 進行引用，比如在 Rel中引用
label：代表元素的顯示名稱
technology：代表元素采用的核心技術，包括但不限于開發(fā)語言、框架、通信協(xié)議等
deion：代表元素的簡單描述
對于 System_Boundary 和 Container_Boundary，則只需要 alias 和 label，大括號內(nèi)是該元素邊界內(nèi)的子元素。
Container_Boundary(alias, "label"){
}
3.4.7 C4 模型的關系元素
Rel 代表兩個元素之間的關系，其語法為：
Rel(from_alias, to_alias, "label", "technology")
from_alias 是起點元素的別名，to_alias 是終點元素的別名，label 則用來說明這個關聯(lián)關系，technology 代表采用的技術、通信協(xié)議。例如：
Rel(C_IOS, C_GATEWAY, "請求服務端", "HTTPS")
代表 iOS 客戶端通過請求網(wǎng)關接口訪問服務端資源，采用 HTTPS 的通信方式。
建議在繪制 Rel時標注出 technology。
3.4.8 C4-PlantUML 布局
C4-PlantUML 提供了多種自動布局方案，我們可以根據(jù)實際需要進行選擇。
- LAYOUT_TOP_DOWN ：從上往下布局，默認采用該布局。如下圖：
- LAYOUT_LEFT_RIGHT ：從左到右，即橫向放置元素。 left to right direction 是 PlantUML 的語法，也可以直接用。
通過 SHOW_LEGEND添加圖例。
微軟Bing“開戰(zhàn)”谷歌：爭奪Firefox的默認搜索引擎
前端框架Svelte放棄Type，JS贏！
開源軟件：甲骨文和蘋果最愛
