日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
程序員你是怎么繪制架構(gòu)圖？

作為一個(gè)程序員，假如讓你繪制當(dāng)前正在開(kāi)發(fā)的項(xiàng)目的架構(gòu)圖，你會(huì)怎么繪制？

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開(kāi)發(fā)人員和項(xiàng)目經(jīng)理組成的專業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺(jué)設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開(kāi)發(fā)等方面的工作，以確保網(wǎng)站外觀精美、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)易于使用并且具有良好的響應(yīng)性。

背景

先來(lái)同步一個(gè)理念。架構(gòu)圖的作用是什么？

我回答一下：

提供了一個(gè)簡(jiǎn)單的方法給到開(kāi)發(fā)團(tuán)隊(duì)（從開(kāi)發(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)前正在開(kāi)發(fā)項(xiàng)目的架構(gòu)圖。

問(wèn)題 回答
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è)

布局說(shuō)明 語(yǔ)法
從上到下LAYOUT_TOP_DOWN
從左到右LAYOUT_RIGHT_LEFT
自由布局LAYOUT_WITH_LEGEND
素描布局LAYOUT_AS_SKETCH

可自定義更多的布局，源碼是基于plantUML語(yǔ)法；

Context上下文

元素如下：

元素名稱 函數(shù)
角色Person
外部角色Person_Ext
關(guān)注的軟件系統(tǒng)System
外部軟件系統(tǒng)System_Ext
系統(tǒng)數(shù)據(jù)庫(kù)SystemDb
系統(tǒng)外部數(shù)據(jù)庫(kù)SystemDb_Ext
系統(tǒng)虛框System_Boundry
企業(yè)虛框Enterprise_Boundry

可以使用plantUML繪制系統(tǒng)全景圖，系統(tǒng)物理部署圖；

下面是一個(gè)例子：

 
 
 
    
  
  
  
  1. @startuml "enterprise" 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. !include ../C4_Context.puml 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. LAYOUT_TOP_DOWN 
    6. 
  
  
  
  6. LAYOUT_WITH_LEGEND() 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8. Person(customer, "客戶", "一種限制工具的客戶") 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. Enterprise_Boundary(c0, "限制工具") { 
    11. 
  
  
  
  11.     Person(csa, "客戶服務(wù)代理", "處理客戶詢問(wèn)") 
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.     System(ecommerce, "電子商務(wù)系統(tǒng)", "允許客戶通過(guò)widgets.com站點(diǎn)在線購(gòu)買工具") 
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.     System(fulfilment, "履行系統(tǒng)", "負(fù)責(zé)處理和傳遞客戶訂單") 
    16. 
  
  
  
  16. } 
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18. System(taxamo, "Taxamo", "計(jì)算本地稅務(wù)并扮演Braintree支付前臺(tái)") 
    19. 
  
  
  
  19.  
    20. 
  
  
  
  20. System(braintree, "Braintree支付", "處理信用卡支付購(gòu)買工具") 
    21. 
  
  
  
  21.  
    22. 
  
  
  
  22. System(post, "澤西郵報(bào)", "計(jì)算全世界的包裹郵費(fèi)") 
    23. 
  
  
  
  23.  
    24. 
  
  
  
  24. Rel_R(customer, csa, "咨詢", "電話") 
    25. 
  
  
  
  25.  
    26. 
  
  
  
  26. Rel_R(customer, ecommerce, "下工具訂單") 
    27. 
  
  
  
  27.  
    28. 
  
  
  
  28. Rel(csa, ecommerce, "查詢訂單信息") 
    29. 
  
  
  
  29.  
    30. 
  
  
  
  30. Rel_R(ecommerce, fulfilment, "發(fā)送訂單信息") 
    31. 
  
  
  
  31.  
    32. 
  
  
  
  32. Rel_D(fulfilment, post, "獲取物流費(fèi)用") 
    33. 
  
  
  
  33.  
    34. 
  
  
  
  34. Rel_D(ecommerce, taxamo, "代理信用卡處理") 
    35. 
  
  
  
  35.  
    36. 
  
  
  
  36. Rel_L(taxamo, braintree, "使用信用卡") 
    37. 
  
  
  
  37.  
    38. 
  
  
  
  38. Lay_D(customer, braintree) 
    39. 
  
  
  
  39.  
    40. 
  
  
  
  40. @enduml 
    41.

Container容器

元素如下：

元素名稱 函數(shù)
容器Container
容器數(shù)據(jù)庫(kù)ContainerDb
容器虛框Container_Boundry

 
 
 
    
  
  
  
  1. @startuml 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. !include ../C4_Container.puml 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. LAYOUT_TOP_DOWN 
    6. 
  
  
  
  6. LAYOUT_WITH_LEGEND() 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8. title 網(wǎng)銀系統(tǒng)容器圖 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. Person(customer, 客戶, "銀行客戶有自己的私人銀行賬號(hào)") 
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12. System_Boundary(c1, "網(wǎng)銀") { 
    13. 
  
  
  
  13.     Container(web_app, "Web 應(yīng)用", "Java, Spring MVC", "傳遞靜態(tài)內(nèi)容和網(wǎng)銀SPA") 
    14. 
  
  
  
  14.     Container(spa, "單頁(yè)應(yīng)用", "JavaScript, Angular", "通過(guò)瀏覽器對(duì)用戶提供所有的網(wǎng)銀功能") 
    15. 
  
  
  
  15.     Container(mobile_app, "手機(jī)應(yīng)用", "C#, Xamarin", "通過(guò)手機(jī)設(shè)備提供有限的網(wǎng)銀功能") 
    16. 
  
  
  
  16.     ContainerDb(database, "數(shù)據(jù)庫(kù)", "SQL 數(shù)據(jù)庫(kù)", "存儲(chǔ)用戶的注冊(cè)信息，隨機(jī)認(rèn)證密碼，訪問(wèn)日志等") 
    17. 
  
  
  
  17.     Container(backend_api, "API應(yīng)用", "Java, Docker容器", "通過(guò)API提供網(wǎng)銀功能") 
    18. 
  
  
  
  18. } 
    19. 
  
  
  
  19.  
    20. 
  
  
  
  20. System_Ext(email_system, "郵件系統(tǒng)", "網(wǎng)絡(luò)軟件交換系統(tǒng)") 
    21. 
  
  
  
  21. System_Ext(banking_system, "Mainframe銀行系統(tǒng)", "存儲(chǔ)所有的核心客戶，賬號(hào)，事務(wù)銀行信息") 
    22. 
  
  
  
  22.  
    23. 
  
  
  
  23. Rel(customer, web_app, "使用", "HTTPS") 
    24. 
  
  
  
  24. Rel(customer, spa, "使用", "HTTPS") 
    25. 
  
  
  
  25. Rel(customer, mobile_app, "使用") 
    26. 
  
  
  
  26.  
    27. 
  
  
  
  27. Rel_Neighbor(web_app, spa, "傳輸") 
    28. 
  
  
  
  28. Rel(spa, backend_api, "使用", "異步, JSON/HTTPS") 
    29. 
  
  
  
  29. Rel(mobile_app, backend_api, "使用", "異步, JSON/HTTPS") 
    30. 
  
  
  
  30. Rel_Back_Neighbor(database, backend_api, "讀寫", "同步, JDBC") 
    31. 
  
  
  
  31.  
    32. 
  
  
  
  32. Rel_Back(customer, email_system, "發(fā)送郵件到") 
    33. 
  
  
  
  33. Rel_Back(email_system, backend_api, "發(fā)送郵件", SMTP") 
    34. 
  
  
  
  34. Rel_Neighbor(backend_api, banking_system, "使用", "同步/異步, XML/HTTPS") 
    35. 
  
  
  
  35. @enduml 
    36.

Component組件

元素如下：

元素名稱 函數(shù)
組件Component
組件數(shù)據(jù)庫(kù)ComponentDb

 
 
 
    
  
  
  
  1. @startuml 
    2. 
  
  
  
  2.  !include ../C4_Component.puml 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4. LAYOUT_WITH_LEGEND() 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. title 網(wǎng)銀系統(tǒng)組件圖 - API應(yīng)用 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8. Container(spa, "單頁(yè)應(yīng)用", "javascript 和 angular", "通過(guò)瀏覽器提供所有的網(wǎng)銀系統(tǒng)功能給到用戶.") 
    9. 
  
  
  
  9. Container(ma, "手機(jī)應(yīng)用", "Xamarin", "通過(guò)手機(jī)設(shè)備提供有限的網(wǎng)銀系統(tǒng)功能給用戶.") 
    10. 
  
  
  
  10. ContainerDb(db, "數(shù)據(jù)庫(kù)", "關(guān)系數(shù)據(jù)庫(kù) Schema", "存儲(chǔ)用戶的注冊(cè)信息, 隨機(jī)認(rèn)證令牌, 訪問(wèn)日志等.") 
    11. 
  
  
  
  11. System_Ext(mbs, "Mainframe銀行系統(tǒng)", "存儲(chǔ)用戶，賬號(hào)，交易等所有的核心銀行信息.") 
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13. Container_Boundary(api, "API 應(yīng)用") { 
    14. 
  
  
  
  14.     Component(sign, "登錄控制器", "MVC Rest 控制器", "允許用戶登錄到網(wǎng)銀系統(tǒng)") 
    15. 
  
  
  
  15.     Component(accounts, "賬戶匯總控制器", "MVC Rest 控制器", "提供用戶匯總的銀行賬號(hào)") 
    16. 
  
  
  
  16.     Component(security, "安全組件", "Spring Bean", "提供登錄，修改密碼等相關(guān)功能") 
    17. 
  
  
  
  17.     Component(mbsfacade, "Mainframe 銀行系統(tǒng) Facade", "Spring Bean", "一個(gè)mainframe 銀行系統(tǒng) facade.") 
    18. 
  
  
  
  18.  
    19. 
  
  
  
  19.     Rel(sign, security, "使用") 
    20. 
  
  
  
  20.     Rel(accounts, mbsfacade, "使用") 
    21. 
  
  
  
  21.     Rel(security, db, "讀寫", "JDBC") 
    22. 
  
  
  
  22.     Rel(mbsfacade, mbs, "使用", "XML/HTTPS") 
    23. 
  
  
  
  23. } 
    24. 
  
  
  
  24.  
    25. 
  
  
  
  25. Rel(spa, sign, "使用", "JSON/HTTPS") 
    26. 
  
  
  
  26. Rel(spa, accounts, "使用", "JSON/HTTPS") 
    27. 
  
  
  
  27.  
    28. 
  
  
  
  28. Rel(ma, sign, "使用", "JSON/HTTPS") 
    29. 
  
  
  
  29. Rel(ma, accounts, "使用", "JSON/HTTPS") 
    30. 
  
  
  
  30. @enduml 
    31.

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ì)展開(kāi)，自行查閱資料即可。

 
 
 
    
  
  
  
  1. @startuml 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. actor 用戶 as user 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. participant 瀏覽器 as browser 
    6. 
  
  
  
  6. participant 前端 as front 
    7. 
  
  
  
  7. participant 登錄服務(wù) as loginServer 
    8. 
  
  
  
  8. database 數(shù)據(jù)庫(kù) as db 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. user -> browser: 打開(kāi)登錄頁(yè)面 
    11. 
  
  
  
  11. browser->front:加載資源,輸入賬號(hào)密碼 
    12. 
  
  
  
  12. front->loginServer:ajax請(qǐng)求 
    13. 
  
  
  
  13. loginServer->db:按照賬號(hào)查詢，校驗(yàn)密碼 
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15. return: 返回結(jié)果 
    16. 
  
  
  
  16.  
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18. @enduml 
    19.

C4PlantUML

它是兩個(gè)東西的合體，提供了一種簡(jiǎn)單的方法來(lái)描述和溝通軟件架構(gòu)。

plantuml被創(chuàng)造用來(lái)允許你繪制UML圖，使用簡(jiǎn)單和人類容易閱讀的文本描述，因?yàn)樗鼪](méi)有阻止你繪制反常的圖，它只是一個(gè)繪圖工具而不是一個(gè)建模工具；

他是使用最多的文本繪圖工具，被wiki,論壇，文本編輯器和IDE強(qiáng)烈支持，可以使用不同的編程語(yǔ)言或者文檔來(lái)生成；

C4模型對(duì)軟件架構(gòu)來(lái)說(shuō)是一個(gè)抽象第一的繪圖方式?；诔橄螅梢苑从吵鲕浖軜?gòu)師和開(kāi)發(fā)者是如何思考和構(gòu)建軟件的。

少量的抽象和繪圖類型是的C4模型很容易學(xué)習(xí)和使用；

C4代表著context,containers,components，code;這一系列水平層級(jí)的圖，你可以使用它來(lái)從不同的尺度向不同的聽(tīng)眾描述你的軟件架構(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 

打開(kāi)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)頁(yè)名稱：程序員你是怎么繪制架構(gòu)圖？
鏈接URL：http://m.5511xx.com/article/dpgshhi.html