序
本文主要介紹一下撰寫(xiě)技術(shù)文檔中可能會(huì)用的一些畫(huà)圖工具。這里主要分為兩大派练对，一派是直接拖拽完成，一派是通過(guò)代碼來(lái)完成
UI工具
主要有processon、draw.io械念、excalidraw、archimatetool运悲、cloudcraft.co
processon
架構(gòu)圖
https://www.processon.com/view/6220b5de1e085333a8970d39?fromnew=1
類(lèi)圖
https://www.processon.com/view/556ff07de4b09b5faa995344?fromnew=1
ER圖
https://www.processon.com/view/62372217f346fb0725f7fddf?fromnew=1
用例圖
https://www.processon.com/view/5938e003e4b0282707d79918?fromnew=1
流程圖
https://www.processon.com/view/6221abcfe401fd072a4a6be3?fromnew=1
拓?fù)鋱D
https://www.processon.com/view/621ec89f0e3e7471a24c1554?fromnew=1
draw.io
國(guó)內(nèi)貌似訪問(wèn)不了龄减，可以畫(huà)C4、ER班眯、UML希停、ArchiMate、AWS/Azure等
excalidraw
[圖片上傳失敗...(image-1ddcaf-1648786007335)]
archimatetool
[圖片上傳失敗...(image-1d5012-1648786007335)]
cloudcraft
[圖片上傳失敗...(image-edd127-1648786007335)]
主要是AWS的一些組件
diagram as code
主要有plantuml署隘、C4-PlantUML宠能、Context Mapper、structurizr磁餐、mermaid
plantuml
用例圖
[圖片上傳失敗...(image-3900a7-1648786007335)]
https://plantuml.com/zh/use-case-diagram
類(lèi)圖
[圖片上傳失敗...(image-2d2a45-1648786007335)]
https://plantuml.com/zh/class-diagram
狀態(tài)圖
[圖片上傳失敗...(image-2b623a-1648786007335)]
https://plantuml.com/zh/state-diagram
流程圖/活動(dòng)圖
[圖片上傳失敗...(image-6e356e-1648786007335)]
https://plantuml.com/zh/activity-diagram-legacy
時(shí)序圖/順序圖
[圖片上傳失敗...(image-555c5c-1648786007335)]
https://plantuml.com/zh/sequence-diagram
C4
[圖片上傳失敗...(image-52ff08-1648786007335)]
Context Mapper
這個(gè)應(yīng)該是DDD愛(ài)好者最喜歡的工具违崇，因?yàn)榭梢援?huà)出context map，非常高大上
[圖片上傳失敗...(image-a6b76-1648786007335)]
structurizr
主打Diagrams as code的思想，可以導(dǎo)出PlantUML羞延，C4-PlantUML,Mermaid,DOT,WebSequenceDiagrams,Ilograph格式
[圖片上傳失敗...(image-2f07da-1648786007335)]
mermaid
跟markdown編輯器集成的比較好
[圖片上傳失敗...(image-2b717e-1648786007335)]
小結(jié)
- 喜歡自己手工畫(huà)的渣淳，可選processon、draw.io伴箩、excalidraw入愧、archimatetool、cloudcraft.co
- 喜歡通過(guò)代碼生成的嗤谚，可選plantuml棺蛛、C4-PlantUML、Context Mapper呵恢、structurizr鞠值、mermaid
