建站
咨詢
售后
建站咨詢
新聞中心
作為一個(gè)程序員，假如讓你繪制當(dāng)前正在開發(fā)的項(xiàng)目的架構(gòu)圖，你會(huì)怎么繪制？
創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開發(fā)人員和項(xiàng)目經(jīng)理組成的專業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)易于使用并且具有良好的響應(yīng)性。
背景
先來同步一個(gè)理念。架構(gòu)圖的作用是什么？
我回答一下：
提供了一個(gè)簡(jiǎn)單的方法給到開發(fā)團(tuán)隊(duì)（從開發(fā)工程師，測(cè)試工程師，架構(gòu)師，測(cè)試，項(xiàng)目經(jīng)歷，產(chǎn)品經(jīng)理，交互設(shè)計(jì)師，用戶）能夠更簡(jiǎn)單的描述和溝通軟件架構(gòu)，讓團(tuán)隊(duì)每個(gè)人腦子里的架構(gòu)可視化，更容易理解，形成統(tǒng)一；
歸納一下： 畫個(gè)圖讓團(tuán)隊(duì)更好好的理解軟件架構(gòu)，并統(tǒng)一認(rèn)知；
下面，我簡(jiǎn)單思考一下作為程序員應(yīng)該如何繪制當(dāng)前正在開發(fā)項(xiàng)目的架構(gòu)圖。
| 問題 | 回答 |
|---|---|
| where are we?現(xiàn)狀 | 我是程序員，不知道怎么繪制項(xiàng)目的架構(gòu)圖 |
| where are we go?目的 | 可繪制方便平級(jí)，上級(jí)之間溝通交流的架構(gòu)圖 |
| how can we go there?實(shí)現(xiàn)路徑 | C4PlantUML |
實(shí)現(xiàn)路徑
C4模型
一種架構(gòu)設(shè)計(jì)的方法論，忽略不在同一個(gè)抽象成績(jī)的細(xì)節(jié)，從而可以更好的表達(dá)和可視化。
可以類比地圖，地圖分4個(gè)級(jí)別，國(guó)家，省，市，街道；
而C4模型也分4個(gè)層級(jí)，Context系統(tǒng)上下文，Container容器，Component組件，Code代碼；
加上3種補(bǔ)充視圖，即系統(tǒng)全景圖，動(dòng)態(tài)圖，部署圖，即可完整的描述一個(gè)項(xiàng)目的軟件架構(gòu)；
布局
分4個(gè)
| 布局說明 | 語法 |
|---|---|
| 從上到下 | LAYOUT_TOP_DOWN |
| 從左到右 | LAYOUT_RIGHT_LEFT |
| 自由布局 | LAYOUT_WITH_LEGEND |
| 素描布局 | LAYOUT_AS_SKETCH |
可自定義更多的布局，源碼是基于plantUML語法；
Context上下文
元素如下：
| 元素名稱 | 函數(shù) |
|---|---|
| 角色 | Person |
| 外部角色 | Person_Ext |
| 關(guān)注的軟件系統(tǒng) | System |
| 外部軟件系統(tǒng) | System_Ext |
| 系統(tǒng)數(shù)據(jù)庫 | SystemDb |
| 系統(tǒng)外部數(shù)據(jù)庫 | SystemDb_Ext |
| 系統(tǒng)虛框 | System_Boundry |
| 企業(yè)虛框 | Enterprise_Boundry |
可以使用plantUML繪制系統(tǒng)全景圖，系統(tǒng)物理部署圖；
下面是一個(gè)例子：
- @startuml "enterprise"
- !include ../C4_Context.puml
- LAYOUT_TOP_DOWN
- LAYOUT_WITH_LEGEND()
- Person(customer, "客戶", "一種限制工具的客戶")
- Enterprise_Boundary(c0, "限制工具") {
- Person(csa, "客戶服務(wù)代理", "處理客戶詢問")
- System(ecommerce, "電子商務(wù)系統(tǒng)", "允許客戶通過widgets.com站點(diǎn)在線購買工具")
- System(fulfilment, "履行系統(tǒng)", "負(fù)責(zé)處理和傳遞客戶訂單")
- }
- System(taxamo, "Taxamo", "計(jì)算本地稅務(wù)并扮演Braintree支付前臺(tái)")
- System(braintree, "Braintree支付", "處理信用卡支付購買工具")
- System(post, "澤西郵報(bào)", "計(jì)算全世界的包裹郵費(fèi)")
- Rel_R(customer, csa, "咨詢", "電話")
- Rel_R(customer, ecommerce, "下工具訂單")
- Rel(csa, ecommerce, "查詢訂單信息")
- Rel_R(ecommerce, fulfilment, "發(fā)送訂單信息")
- Rel_D(fulfilment, post, "獲取物流費(fèi)用")
- Rel_D(ecommerce, taxamo, "代理信用卡處理")
- Rel_L(taxamo, braintree, "使用信用卡")
- Lay_D(customer, braintree)
- @enduml
Container容器
元素如下：
| 元素名稱 | 函數(shù) |
|---|---|
| 容器 | Container |
| 容器數(shù)據(jù)庫 | ContainerDb |
| 容器虛框 | Container_Boundry |
- @startuml
- !include ../C4_Container.puml
- LAYOUT_TOP_DOWN
- LAYOUT_WITH_LEGEND()
- title 網(wǎng)銀系統(tǒng)容器圖
- Person(customer, 客戶, "銀行客戶有自己的私人銀行賬號(hào)")
- System_Boundary(c1, "網(wǎng)銀") {
- Container(web_app, "Web 應(yīng)用", "Java, Spring MVC", "傳遞靜態(tài)內(nèi)容和網(wǎng)銀SPA")
- Container(spa, "單頁應(yīng)用", "JavaScript, Angular", "通過瀏覽器對(duì)用戶提供所有的網(wǎng)銀功能")
- Container(mobile_app, "手機(jī)應(yīng)用", "C#, Xamarin", "通過手機(jī)設(shè)備提供有限的網(wǎng)銀功能")
- ContainerDb(database, "數(shù)據(jù)庫", "SQL 數(shù)據(jù)庫", "存儲(chǔ)用戶的注冊(cè)信息，隨機(jī)認(rèn)證密碼，訪問日志等")
- Container(backend_api, "API應(yīng)用", "Java, Docker容器", "通過API提供網(wǎng)銀功能")
- }
- System_Ext(email_system, "郵件系統(tǒng)", "網(wǎng)絡(luò)軟件交換系統(tǒng)")
- System_Ext(banking_system, "Mainframe銀行系統(tǒng)", "存儲(chǔ)所有的核心客戶，賬號(hào)，事務(wù)銀行信息")
- Rel(customer, web_app, "使用", "HTTPS")
- Rel(customer, spa, "使用", "HTTPS")
- Rel(customer, mobile_app, "使用")
- Rel_Neighbor(web_app, spa, "傳輸")
- Rel(spa, backend_api, "使用", "異步, JSON/HTTPS")
- Rel(mobile_app, backend_api, "使用", "異步, JSON/HTTPS")
- Rel_Back_Neighbor(database, backend_api, "讀寫", "同步, JDBC")
- Rel_Back(customer, email_system, "發(fā)送郵件到")
- Rel_Back(email_system, backend_api, "發(fā)送郵件", SMTP")
- Rel_Neighbor(backend_api, banking_system, "使用", "同步/異步, XML/HTTPS")
- @enduml
Component組件
元素如下：
| 元素名稱 | 函數(shù) |
|---|---|
| 組件 | Component |
| 組件數(shù)據(jù)庫 | ComponentDb |
- @startuml
- !include ../C4_Component.puml
- LAYOUT_WITH_LEGEND()
- title 網(wǎng)銀系統(tǒng)組件圖 - API應(yīng)用
- Container(spa, "單頁應(yīng)用", "javascript 和 angular", "通過瀏覽器提供所有的網(wǎng)銀系統(tǒng)功能給到用戶.")
- Container(ma, "手機(jī)應(yīng)用", "Xamarin", "通過手機(jī)設(shè)備提供有限的網(wǎng)銀系統(tǒng)功能給用戶.")
- ContainerDb(db, "數(shù)據(jù)庫", "關(guān)系數(shù)據(jù)庫 Schema", "存儲(chǔ)用戶的注冊(cè)信息, 隨機(jī)認(rèn)證令牌, 訪問日志等.")
- System_Ext(mbs, "Mainframe銀行系統(tǒng)", "存儲(chǔ)用戶，賬號(hào)，交易等所有的核心銀行信息.")
- Container_Boundary(api, "API 應(yīng)用") {
- Component(sign, "登錄控制器", "MVC Rest 控制器", "允許用戶登錄到網(wǎng)銀系統(tǒng)")
- Component(accounts, "賬戶匯總控制器", "MVC Rest 控制器", "提供用戶匯總的銀行賬號(hào)")
- Component(security, "安全組件", "Spring Bean", "提供登錄，修改密碼等相關(guān)功能")
- Component(mbsfacade, "Mainframe 銀行系統(tǒng) Facade", "Spring Bean", "一個(gè)mainframe 銀行系統(tǒng) facade.")
- Rel(sign, security, "使用")
- Rel(accounts, mbsfacade, "使用")
- Rel(security, db, "讀寫", "JDBC")
- Rel(mbsfacade, mbs, "使用", "XML/HTTPS")
- }
- Rel(spa, sign, "使用", "JSON/HTTPS")
- Rel(spa, accounts, "使用", "JSON/HTTPS")
- Rel(ma, sign, "使用", "JSON/HTTPS")
- Rel(ma, accounts, "使用", "JSON/HTTPS")
- @enduml
Code代碼
即通用的，元素如下：
| 元素名稱 | 函數(shù) |
|---|---|
| 虛框 | Boundry |
| 從上到下關(guān)系 | Rel |
| 反向關(guān)系 | Rel_Back |
| 從上到下關(guān)系 | Rel_U |
| 從下到上關(guān)系 | Rel_D |
| 從左到右關(guān)系 | Rel_L |
| 從右到左關(guān)系 | Rel_R |
代碼級(jí)別可使用PlantUML繪制時(shí)序圖，流程圖，類圖描述具體接口或者功能的實(shí)現(xiàn)細(xì)節(jié)；
這塊是PlantUML的基礎(chǔ)知識(shí)了，不詳細(xì)展開，自行查閱資料即可。
- @startuml
- actor 用戶 as user
- participant 瀏覽器 as browser
- participant 前端 as front
- participant 登錄服務(wù) as loginServer
- database 數(shù)據(jù)庫 as db
- user -> browser: 打開登錄頁面
- browser->front:加載資源,輸入賬號(hào)密碼
- front->loginServer:ajax請(qǐng)求
- loginServer->db:按照賬號(hào)查詢，校驗(yàn)密碼
- return: 返回結(jié)果
- @enduml
C4PlantUML
它是兩個(gè)東西的合體，提供了一種簡(jiǎn)單的方法來描述和溝通軟件架構(gòu)。
plantuml被創(chuàng)造用來允許你繪制UML圖，使用簡(jiǎn)單和人類容易閱讀的文本描述，因?yàn)樗鼪]有阻止你繪制反常的圖，它只是一個(gè)繪圖工具而不是一個(gè)建模工具；
他是使用最多的文本繪圖工具，被wiki,論壇，文本編輯器和IDE強(qiáng)烈支持，可以使用不同的編程語言或者文檔來生成；
C4模型對(duì)軟件架構(gòu)來說是一個(gè)抽象第一的繪圖方式。基于抽象，可以反映出軟件架構(gòu)師和開發(fā)者是如何思考和構(gòu)建軟件的。
少量的抽象和繪圖類型是的C4模型很容易學(xué)習(xí)和使用；
C4代表著context,containers,components，code;這一系列水平層級(jí)的圖，你可以使用它來從不同的尺度向不同的聽眾描述你的軟件架構(gòu)。
C4模型和plantUML 分工如下：
| 技術(shù)點(diǎn) | 用途 |
|---|---|
| plantUML | 寫簡(jiǎn)單的代碼即可繪圖 |
| c4模型 | 一種對(duì)系統(tǒng)架構(gòu)的抽象的方法論 |
| C4PlantUML | 定義一種C4模型的繪圖風(fēng)格，使用PlantUML進(jìn)行文本繪圖 |
使用方式：
下載 C4PlantUML 選擇你熟悉的IDE集成即可使用；
| IDE | 使用方式 |
|---|---|
| vscode | 安裝 PlantUML 和 PlantUML Preview 插件 , Jdk , graphviz |
vscode引入
.vscode/C4.code-snippets . |
| idea | 下載plantUML插件，安裝好 graphviz
打開C4PlantUML文件即可 |
命名規(guī)則：
- context 上下文圖
- container 容器圖
- component 組件圖
- sequence 時(shí)序圖
- usecase 用例圖
- class 類圖
- activity 活動(dòng)圖
- state 狀態(tài)圖
- object 對(duì)象圖
- deployment 部署圖
- timing 定時(shí)圖
繪圖步驟：
1.創(chuàng)建模型圖名，按照上面的命名規(guī)則， xxx_項(xiàng)目名稱.puml;
2.引入相對(duì)路徑下的 path/C4_Component.puml
3.使用內(nèi)置的函數(shù)，繪圖；
小結(jié)
如果看完之后你只能記住一句話：C4PlantUML提供了一個(gè)繪圖方式讓你輕松的描述和表達(dá)軟件架構(gòu)；
網(wǎng)站標(biāo)題：程序員你是怎么繪制架構(gòu)圖？
分享URL：http://fisionsoft.com.cn/article/dpgshhi.html
