作者：京東物流?覃玉杰

1. 前言

本文將給大家介紹一種簡潔明了軟件架構(gòu)可視化模型——C4模型，并手把手教大家如何使用代碼繪制出精美的C4架構(gòu)圖。

閱讀本文之后，讀者畫的架構(gòu)圖將會(huì)是這樣的：

注：該圖例僅作繪圖示例使用，不確保其完整性、可行性。

2. C4模型

2.1 C4模型整體介紹

C4是軟件架構(gòu)可視化的一種方案。架構(gòu)可視化，指的是用圖例的方式，把軟件架構(gòu)設(shè)計(jì)準(zhǔn)確、清晰、美觀地表示出來。架構(gòu)可視化不是指導(dǎo)開發(fā)者如何進(jìn)行架構(gòu)設(shè)計(jì)，而是指導(dǎo)開發(fā)者將架構(gòu)設(shè)計(jì)表達(dá)出來，產(chǎn)出簡潔直觀的架構(gòu)圖。

架構(gòu)可視化的方法有很多，主流的有“4+1”視圖模型、C4模型。視圖模型描述的是架構(gòu)本身，架構(gòu)確定之后，不管用什么模型去表達(dá)，本質(zhì)上都應(yīng)該是一樣的，并沒有優(yōu)劣之分。

C4 模型是一種易于學(xué)習(xí)、對(duì)開發(fā)人員友好的軟件架構(gòu)圖示方法，C4模型沒有規(guī)定使用特定的圖形、特定的建模語言來畫圖，因而使用者可以非常靈活地產(chǎn)出架構(gòu)圖。

C4模型將系統(tǒng)從上往下分為System Context, Containers, Components, Code四層視圖，每一層都是對(duì)上一層的完善和展開，層層遞進(jìn)地對(duì)系統(tǒng)進(jìn)行描述，如下圖。

2.2 System Context diagram

System Context（系統(tǒng)上下文）視圖位于頂層，是軟件系統(tǒng)架構(gòu)圖的起點(diǎn)，表達(dá)的是系統(tǒng)的全貌。System Context視圖重點(diǎn)展示的是系統(tǒng)邊界、系統(tǒng)相關(guān)的用戶、其他支撐系統(tǒng)以及與本系統(tǒng)的交互。本層不涉及到具體細(xì)節(jié)（例如技術(shù)選型、協(xié)議、部署方案和其他低級(jí)細(xì)節(jié)），因此System Context可以很好地向非技術(shù)人員介紹系統(tǒng)。

作用：清晰地展示待構(gòu)建的系統(tǒng)、用戶以及現(xiàn)有的IT基礎(chǔ)設(shè)施。

范圍：待描述的核心系統(tǒng)以及其相關(guān)用戶、支撐系統(tǒng)，不應(yīng)該出現(xiàn)與核心系統(tǒng)無關(guān)的其他系統(tǒng)。例如我們要描述一個(gè)打車系統(tǒng)，不應(yīng)該把無關(guān)聯(lián)的藥店系統(tǒng)繪制進(jìn)去，并且要確保一個(gè)System Context只有一個(gè)待描述的軟件系統(tǒng)。

主要元素：Context內(nèi)待描述的軟件系統(tǒng)。

支持元素：在范圍內(nèi)直接與主要元素中的軟件系統(tǒng)有關(guān)聯(lián)的人員（例如用戶、參與者、角色或角色）和外部依賴系統(tǒng)。通常，這些外部依賴系統(tǒng)位于我們自己的軟件系統(tǒng)邊界之外。

目標(biāo)受眾：軟件開發(fā)團(tuán)隊(duì)內(nèi)外的所有人，包括技術(shù)人員和非技術(shù)人員。

推薦給大多數(shù)團(tuán)隊(duì)：是的。

示例：

這是該網(wǎng)上銀行系統(tǒng)的系統(tǒng)上下文圖。它顯示了使用它的人，以及與該系統(tǒng)有關(guān)系的其他軟件系統(tǒng)。網(wǎng)上銀行系統(tǒng)是將要建設(shè)的系統(tǒng)，銀行的個(gè)人客戶使用網(wǎng)上銀行系統(tǒng)查看其銀行賬戶的信息并進(jìn)行支付。網(wǎng)上銀行系統(tǒng)本身使用銀行現(xiàn)有的大型機(jī)銀行系統(tǒng)來執(zhí)行此操作，并使用銀行現(xiàn)有的電子郵件系統(tǒng)向客戶發(fā)送電子郵件。

圖例：

2.3 Container diagram

Container（容器）視圖是對(duì)System Context的放大，是對(duì)System Context細(xì)節(jié)的補(bǔ)充。

注意這里的容器，指的不是Docker等容器中間件。Container的描述范圍是一個(gè)可單獨(dú)運(yùn)行/可部署的單元。Container一般指的是應(yīng)用以及依賴的中間件，例如服務(wù)器端 Web 應(yīng)用程序、單頁應(yīng)用程序、桌面應(yīng)用程序、移動(dòng)應(yīng)用程序、數(shù)據(jù)庫架構(gòu)、文件系統(tǒng)、Redis、ElasticSeach、MQ等。

Container顯示了軟件架構(gòu)的高級(jí)形狀以及系統(tǒng)內(nèi)各容器之間的職責(zé)分工。

在Container這一層，還顯示了系統(tǒng)的主要的技術(shù)選型以及容器間的通信和交互。

作用：展示系統(tǒng)整體的開發(fā)邊界，體現(xiàn)高層次的技術(shù)選型，暴露系統(tǒng)內(nèi)容器之間的分工交互。

范圍：單個(gè)軟件系統(tǒng)，關(guān)注的系統(tǒng)內(nèi)部的應(yīng)用構(gòu)成。

主要元素：軟件系統(tǒng)范圍內(nèi)的容器，例如Spring Boot打包后的應(yīng)用，MySQL數(shù)據(jù)庫、Redis、MQ等。

支持元素：直接使用容器的人員和外部依賴系統(tǒng)。

目標(biāo)受眾：軟件開發(fā)團(tuán)隊(duì)內(nèi)外的技術(shù)人員，包括軟件架構(gòu)師、開發(fā)人員和運(yùn)營/支持人員。

推薦給大多數(shù)團(tuán)隊(duì)：是的。

注意：Container視圖沒有說明部署方案、集群、復(fù)制、故障轉(zhuǎn)移等。部署相關(guān)的視圖，會(huì)通過Deployment視圖進(jìn)行展示。

示例：

網(wǎng)上銀行系統(tǒng)（此時(shí)System Contenxt中的系統(tǒng)已經(jīng)被展開，所以用虛線框表示）由五個(gè)容器組成：服務(wù)器端 Web 應(yīng)用程序、單頁應(yīng)用程序、移動(dòng)應(yīng)用程序、服務(wù)器端 API 應(yīng)用程序和數(shù)據(jù)庫。

• Web 應(yīng)用程序是一個(gè) Java/Spring MVC Web 應(yīng)用程序，它只提供構(gòu)成單頁應(yīng)用程序的靜態(tài)內(nèi)容（HTML、CSS 和 JS）。
• 單頁應(yīng)用程序是在客戶的網(wǎng)絡(luò)瀏覽器中運(yùn)行的 Angular 應(yīng)用程序，是網(wǎng)上銀行功能的前端。
• 客戶也可以使用跨平臺(tái) Xamarin 移動(dòng)應(yīng)用程序來訪問網(wǎng)上銀行。
• 單頁應(yīng)用程序和移動(dòng)應(yīng)用程序都使用 JSON+HTTPS API，該 API 由運(yùn)行在服務(wù)器上的另一個(gè) Java/Spring MVC 應(yīng)用程序提供。
• API 應(yīng)用程序從關(guān)系數(shù)據(jù)庫中獲取用戶信息。
• API 應(yīng)用程序還使用專有的 XML/HTTPS 接口與現(xiàn)有的大型機(jī)銀行系統(tǒng)進(jìn)行通信，以獲取有關(guān)銀行賬戶的信息或進(jìn)行交易。
• 如果 API 應(yīng)用程序需要向客戶發(fā)送電子郵件，它也會(huì)使用現(xiàn)有的電子郵件系統(tǒng)。

該容器圖的圖例如下，主要是引入了數(shù)據(jù)庫、APP、瀏覽器的圖例。

2.4 Component diagram

將單個(gè)容器放大，則顯示了該容器內(nèi)部的組件。Component（組件）視圖顯示了一個(gè)容器是如何由許多“組件”組成的，每個(gè)組件是什么，它們的職責(zé)以及技術(shù)實(shí)現(xiàn)細(xì)節(jié)。

作用：展示了可執(zhí)行的容器內(nèi)部構(gòu)成與分工，可直接指導(dǎo)開發(fā)。

范圍：單個(gè)容器。

主要元素：范圍內(nèi)容器內(nèi)的組件，通?？梢允荄ubbo接口、REST接口、Service、Dao等。

支持元素：直接連接到容器的人員和外部依賴系統(tǒng)。

目標(biāo)受眾：軟件架構(gòu)師和開發(fā)人員。

推薦給大多數(shù)團(tuán)隊(duì)：Component用于指導(dǎo)開發(fā)，當(dāng)有需要時(shí)創(chuàng)建。

示例：

圖例：

2.5 Code diagram

放大組件視圖，則得到出組件的Code視圖（代碼視圖）。

Code視圖一般采用 UML 類圖、ER圖等。Code視圖是一個(gè)可選的詳細(xì)級(jí)別，通?？梢酝ㄟ^ IDE 等工具按需生成。除了最重要或最復(fù)雜的組件外，不建議將這種詳細(xì)程度用于其他任何內(nèi)容。

在注重敏捷開發(fā)的今天，一般不建議產(chǎn)出Code視圖。

范圍：單個(gè)組件。

主要元素：范圍內(nèi)組件內(nèi)的代碼元素（例如類、接口、對(duì)象、函數(shù)、數(shù)據(jù)庫表等）。

目標(biāo)受眾：軟件架構(gòu)師和開發(fā)人員。

推薦給大多數(shù)團(tuán)隊(duì)：不，大多數(shù) IDE 可以按需生成這種級(jí)別的詳細(xì)信息。

2.6 System Landscape diagram

C4 模型提供了單個(gè)軟件系統(tǒng)的靜態(tài)視圖，不管是 System Context、Container、Component都是針對(duì)單個(gè)軟件系統(tǒng)的進(jìn)行描述的，但在實(shí)際中軟件系統(tǒng)不會(huì)孤立存在。為描述所有這些軟件系統(tǒng)如何在給定的企業(yè)、組織、部門等中與其他系統(tǒng)組合在一起，C4采用擴(kuò)展視圖System Landscape （系統(tǒng)景觀圖）。

系統(tǒng)景觀圖實(shí)際上只是一個(gè)沒有特定關(guān)注的軟件系統(tǒng)的系統(tǒng)上下文圖（System Context diagram），系統(tǒng)景觀圖內(nèi)的軟件系統(tǒng)都可以采用C4進(jìn)行深入分析。

適用范圍：企業(yè)/組織/部門/等。

主要元素：與所選范圍相關(guān)的人員和軟件系統(tǒng)。

目標(biāo)受眾：軟件開發(fā)團(tuán)隊(duì)內(nèi)外的技術(shù)人員和非技術(shù)人員。

示例：

圖例：

2.7 Dynamic diagram

Dynamic diagram（動(dòng)態(tài)圖）用于展示靜態(tài)模型中的元素如何在運(yùn)行時(shí)協(xié)作。動(dòng)態(tài)圖允許圖表元素自由排列，并通過帶有編號(hào)的箭頭以指示執(zhí)行順序。

范圍：特定功能、故事、用例等。

主要元素和支持元素：按照實(shí)際需要，可以是軟件系統(tǒng)、容器或組件。

目標(biāo)受眾：軟件開發(fā)團(tuán)隊(duì)內(nèi)外的技術(shù)人員和非技術(shù)人員。

示例：

圖例：

2.8 Deployment diagram

Deployment diagram（部署圖）用于說明靜態(tài)模型中的軟件系統(tǒng)（或容器）的實(shí)例在給定環(huán)境（例如生產(chǎn)、測試、預(yù)發(fā)、開發(fā)等）中的部署方案。

C4的部署圖基于UML 部署圖，但為了突出顯示容器和部署節(jié)點(diǎn)之間的映射會(huì)做略微的簡化。

部署節(jié)點(diǎn)表示表示軟件系統(tǒng)/容器實(shí)例運(yùn)行的位置，類似于物理基礎(chǔ)架構(gòu)（例如物理服務(wù)器或設(shè)備）、虛擬化基礎(chǔ)架構(gòu)（例如 IaaS、PaaS、虛擬機(jī)）、容器化基礎(chǔ)架構(gòu)（例如 Docker 容器）、執(zhí)行環(huán)境（例如數(shù)據(jù)庫服務(wù)器、Java EE web/應(yīng)用服務(wù)器、Microsoft IIS）等。部署節(jié)點(diǎn)可以嵌套，也可以將基礎(chǔ)設(shè)施節(jié)點(diǎn)包括進(jìn)去，例如 DNS 服務(wù)、負(fù)載平衡器、防火墻等。

可以在部署圖中隨意使用 Amazon Web Services、Azure 等提供的圖標(biāo)，只需確保被使用的任何圖標(biāo)都包含在圖例中，不產(chǎn)生歧義。

范圍：單個(gè)部署環(huán)境中的一個(gè)或多個(gè)軟件系統(tǒng)（例如生產(chǎn)、暫存、開發(fā)等）。

主要元素：部署節(jié)點(diǎn)、軟件系統(tǒng)實(shí)例和容器實(shí)例。
支持元素：用于部署軟件系統(tǒng)的基礎(chǔ)設(shè)施節(jié)點(diǎn)。

目標(biāo)受眾：軟件開發(fā)團(tuán)隊(duì)內(nèi)外的技術(shù)人員；包括軟件架構(gòu)師、開發(fā)人員、基礎(chǔ)架構(gòu)架構(gòu)師和運(yùn)營/支持人員。

示例：

網(wǎng)上銀行系統(tǒng)的開發(fā)環(huán)境部署圖：

圖例

網(wǎng)上銀行的生產(chǎn)環(huán)境部署圖：

圖例

2.9 C4模型規(guī)范以及Review CheckList

為了確保C4模型的架構(gòu)圖的可讀性，C4模型提供了作圖規(guī)范，并且提供了CheckList供自查。

2.9.1 C4模型規(guī)范

• 圖表

每個(gè)圖都應(yīng)該有一個(gè)描述圖類型和范圍的標(biāo)題（例如“我的軟件系統(tǒng)的系統(tǒng)環(huán)境圖”）。
每個(gè)圖表都應(yīng)該有一個(gè)關(guān)鍵/圖例來解釋所使用的符號(hào)（例如形狀、顏色、邊框樣式、線型、箭頭等）。
首字母縮略詞和縮寫詞（業(yè)務(wù)/領(lǐng)域或技術(shù)）應(yīng)為所有受眾所理解，或在圖表鍵/圖例中進(jìn)行解釋。

• 元素

應(yīng)明確指定每個(gè)元素的類型（例如，人員、軟件系統(tǒng)、容器或組件）。
每個(gè)元素都應(yīng)該有一個(gè)簡短的描述，以提供關(guān)鍵職責(zé)的“一目了然”的視圖。
每個(gè)容器和組件都應(yīng)該有明確指定的技術(shù)。

• 關(guān)系

每條線都應(yīng)該代表一個(gè)單向關(guān)系。
每一行都應(yīng)該被標(biāo)記，標(biāo)記與關(guān)系的方向和意圖一致（例如依賴或數(shù)據(jù)流）。嘗試盡可能具體地使用標(biāo)簽，最好避免使用“使用”等單個(gè)詞。
容器之間的關(guān)系（通常代表進(jìn)程間通信）應(yīng)該有明確標(biāo)記的技術(shù)/協(xié)議。

2.9.2 Review Checklist

C4模型圖表繪制完成后，可以通過Review Checklist 進(jìn)行自查，檢查是否有不規(guī)范之處。Review Checklist被制成網(wǎng)頁，可以通過 https://c4model.com/review/ 進(jìn)行訪問。

3. C4模型架構(gòu)圖代碼繪制實(shí)戰(zhàn)

3.1 文本繪圖工具選型

關(guān)于C4模型的架構(gòu)圖的繪制，一般有兩種方式：

第一種是采用繪圖工具，這類工具直接拖拽元素、調(diào)整樣式，即可產(chǎn)出圖片，例如draw.io、PPT等工具。繪圖工具的優(yōu)點(diǎn)是非常靈活，可以滿足很多細(xì)節(jié)需求；缺點(diǎn)是通常調(diào)整元素的樣式會(huì)比較繁瑣。

第二種是采用基于文本的繪圖工具，根據(jù)一定的語法去描述圖片元素，最后根據(jù)文本自動(dòng)渲染成圖片，例如PlantUML?；谖谋镜睦L圖工具的優(yōu)點(diǎn)是繪圖快捷，只要根據(jù)語法寫出描述文件，即可渲染出來，元素的樣式已經(jīng)默認(rèn)調(diào)試好；缺點(diǎn)是樣式不一定符合我們的審美，調(diào)整不方便。

本文著重講解第二種，即基于文本的繪圖工具。

基于文本的繪圖工具有很多，例如：structurizr、PlantUML、mermaid，分別有自己的語法。

由于IntelliJ Idea、VS Code目前在開發(fā)者中非常普及，我們選擇使用C4-PlantUML，結(jié)合VS Code和IntelliJ Idea分別進(jìn)行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代碼片段

安裝完P(guān)lantUML之后，為了提高效率，我們最好安裝PlantUML相關(guān)的代碼片段。

打開VS Code菜單，層級(jí)為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 安裝Idea

3.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，導(dǎo)入并重啟Idea即可。

3.4 案例實(shí)戰(zhàn)及C4-PlantUML語法介紹

C4-PlantUML的詳細(xì)語法可以到官網(wǎng)github項(xiàng)目主頁（ https://github.com/plantuml-stdlib/C4-PlantUML ）去了解，在此只做簡單介紹。

3.4.1 案例

以某招聘APP服務(wù)端架構(gòu)圖（Container級(jí)）為例子進(jìn)行講解，以下是渲染出來的效果圖。

以下是完整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架構(gòu)圖（Container）  
  
Person(P_User, "找工作的APP用戶（應(yīng)聘者）")  
  
System_Boundary(Boundary_APP, "招聘APP系統(tǒng)邊界"){  
	Container(C_ANDROID, "安卓移動(dòng)端", "android", "移動(dòng)APP安卓端",$sprite="android")  
	Container(C_IOS, "iOS移動(dòng)端", "iOS", "移動(dòng)APP iOS端",$sprite="apple_original")  
	Container(C_GATEWAY, "HTTP網(wǎng)關(guān)", "Netty", "鑒權(quán)、協(xié)議轉(zhuǎn)換",$sprite="java")  
	Container(C_GATEWAY_CACHE, "網(wǎng)關(guān)緩存", "Redis", "緩存認(rèn)證憑據(jù)",$sprite="redis")  
	Container(C_BFF, "BFF網(wǎng)關(guān)", "Spring Boot","整合后端接口",$sprite="spring")  
	Container(C_CERT, "實(shí)名認(rèn)證服務(wù)", "Spring Boot", "內(nèi)部實(shí)名認(rèn)證服務(wù)",$sprite="spring")  
	Container(C_BIZ_1, "職位服務(wù)", "Spring Boot", "發(fā)布、搜索職位",$sprite="spring")  
	Container(C_PAYMENT, "支付服務(wù)", "Spring Boot", "內(nèi)部支付服務(wù)",$sprite="spring")  
	ContainerDb(CDB_MYSQL, "職位信息數(shù)據(jù)庫", "MySQL", "持久化職位信息",$sprite="mysql")  
}  
  
System_Ext(OUT_S_CERT, "實(shí)名認(rèn)證服務(wù)","對(duì)用戶進(jìn)行姓名身份證號(hào)實(shí)名認(rèn)證")  
System_Ext(OUT_S_PAYMENT, "第三方支付服務(wù)","支持用戶使用多種支付方式完成支付")  
  
Rel(P_User, C_ANDROID, "注冊(cè)登陸投遞簡歷")  
Rel(P_User, C_IOS, "注冊(cè)登陸投遞簡歷")  
  
Rel(C_ANDROID, C_GATEWAY, "請(qǐng)求服務(wù)端","HTTPS")  
Rel(C_IOS, C_GATEWAY, "請(qǐng)求服務(wù)端","HTTPS")  
  
Rel_L(C_GATEWAY, C_GATEWAY_CACHE, "讀寫緩存","jedis")  
Rel(C_GATEWAY, C_BFF, "將HTTP協(xié)議轉(zhuǎn)為RPC協(xié)議","RPC")  
  
Rel(C_GATEWAY, C_BIZ_1, "將HTTP協(xié)議轉(zhuǎn)為RPC協(xié)議","RPC")  
Rel(C_GATEWAY, C_PAYMENT, "將HTTP協(xié)議轉(zhuǎn)為RPC協(xié)議","RPC")  
  
Rel(C_BFF, C_CERT, "通過BFF處理之后，對(duì)外暴露接口服務(wù)","RPC")  
  
Rel(C_BIZ_1, CDB_MYSQL, "讀寫數(shù)據(jù)","JDBC")  
  
Rel(C_CERT, OUT_S_CERT, "對(duì)接外部查詢實(shí)名信息接口","HTTPS")  
Rel(C_PAYMENT, OUT_S_PAYMENT, "對(duì)接外部支付系統(tǒng)","HTTPS")  
  
left to right direction  
  
SHOW_LEGEND()  
  
@enduml

3.4.2 PlantUML文件

PlantUML文件以puml作為文件擴(kuò)展名。

3.4.3 @startuml和@enduml

整個(gè)文檔由@startuml和@enduml包裹，是固定語法。

@startuml

@enduml

3.4.4 注釋

PlantUML中使用單引號(hào)（即'）作為注釋標(biāo)識(shí)。

3.4.5 include語句

首先是C4各個(gè)視圖的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 

其次是圖標(biāo)庫：

!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  

注意這里有一個(gè)define語法，先通過!define定義一個(gè)標(biāo)識(shí)，之后使用該標(biāo)識(shí)的地方都會(huì)被替換

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

使用圖標(biāo)時(shí)，只需要在元素的聲明語句中加入$sprite="xxx"即可。

ContainerDb(CDB_MYSQL, "職位信息數(shù)據(jù)庫", "MySQL", "持久化職位信息",$sprite="mysql")  

3.4.6 C4模型靜態(tài)元素

Person：系統(tǒng)的用戶，可能是人或者其他系統(tǒng)

System：代表即將建設(shè)的系統(tǒng)，通常渲染為藍(lán)色方塊。
System_Ext：代表已存在的系統(tǒng)，通常渲染為灰色方塊。
System_Boundary：某系統(tǒng)展開為容器時(shí)，則將System改為System_Boundary，代表系統(tǒng)的邊界，內(nèi)部放置容器元素，通常渲染為虛線框。

Container：待建設(shè)的容器，通常渲染為藍(lán)色方塊。
Container_Ext：已建設(shè)容器，通常渲染為灰色方塊。
Container_Boundary：某容器展開為組件之后，則將Container改為Container_Boundary，代表容器的邊界，內(nèi)部放置組件元素，通常渲染為虛線框。

ContainerDb：待建設(shè)數(shù)據(jù)庫，通常渲染為藍(lán)色圓柱。
ContainerQueue：待建設(shè)消息隊(duì)列，通常渲染為水平放置的藍(lán)色圓柱。

Component：待建設(shè)組件，通常渲染為藍(lán)色方塊。
Component_Ext：已建設(shè)組件，通常渲染為灰色方塊。

靜態(tài)元素的語法為：

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

alias：是圖內(nèi)元素的唯一ID，其他地方可以通過alias進(jìn)行引用，比如在Rel中引用
label：代表元素的顯示名稱
technology：代表元素采用的核心技術(shù)，包括但不限于開發(fā)語言、框架、通信協(xié)議等
description：代表元素的簡單描述

對(duì)于System_Boundary和Container_Boundary，則只需要alias和label，大括號(hào)內(nèi)是該元素邊界內(nèi)的子元素。

Container_Boundary(alias, "label"){

}

3.4.7 C4模型的關(guān)系元素

Rel代表兩個(gè)元素之間的關(guān)系，其語法為：

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

from_alias是起點(diǎn)元素的別名，to_alias是終點(diǎn)元素的別名，label則用來說明這個(gè)關(guān)聯(lián)關(guān)系，technology代表采用的技術(shù)、通信協(xié)議。例如：

Rel(C_IOS, C_GATEWAY, "請(qǐng)求服務(wù)端","HTTPS")  

代表iOS客戶端通過請(qǐng)求網(wǎng)關(guān)接口訪問服務(wù)端資源，采用HTTPS的通信方式。

建議在繪制Rel時(shí)標(biāo)注出technology。

3.4.8 C4-PlantUML布局

C4-PlantUML提供了多種自動(dòng)布局方案，我們可以根據(jù)實(shí)際需要進(jìn)行選擇。

• LAYOUT_TOP_DOWN()：從上往下布局，默認(rèn)采用該布局。如下圖：

• LAYOUT_LEFT_RIGHT()：從左到右，即橫向放置元素。left to right direction是PlantUML的語法，也可以直接用。

3.4.9 圖例

通過SHOW_LEGEND()添加圖例。文章來源地址http://www.zghlxwxcb.cn/news/detail-445359.html

到了這里，關(guān)于手把手教你用代碼畫架構(gòu)圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！