序
本文主要介紹一下撰寫技術文檔中可能會用的一些畫圖工具。這里主要分為兩大派，一派是直接拖拽完成，一派是通過代碼來完成
UI工具
主要有processon、draw.io、excalidraw、archimatetool、cloudcraft.co
processon
架構圖
https://www.processon.com/view/6220b5de1e085333a8970d39?fromnew=1
類圖
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
拓撲圖
https://www.processon.com/view/621ec89f0e3e7471a24c1554?fromnew=1
draw.io
國內貌似訪問不了，可以畫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
類圖
[圖片上傳失敗...(image-2d2a45-1648786007335)]
https://plantuml.com/zh/class-diagram
狀態圖
[圖片上傳失敗...(image-2b623a-1648786007335)]
https://plantuml.com/zh/state-diagram
流程圖/活動圖
[圖片上傳失敗...(image-6e356e-1648786007335)]
https://plantuml.com/zh/activity-diagram-legacy
時序圖/順序圖
[圖片上傳失敗...(image-555c5c-1648786007335)]
https://plantuml.com/zh/sequence-diagram
C4
[圖片上傳失敗...(image-52ff08-1648786007335)]
Context Mapper
這個應該是DDD愛好者最喜歡的工具，因為可以畫出context map，非常高大上
[圖片上傳失敗...(image-a6b76-1648786007335)]
structurizr
主打Diagrams as code的思想，可以導出PlantUML，C4-PlantUML,Mermaid,DOT,WebSequenceDiagrams,Ilograph格式
[圖片上傳失敗...(image-2f07da-1648786007335)]
mermaid
跟markdown編輯器集成的比較好
[圖片上傳失敗...(image-2b717e-1648786007335)]
小結
- 喜歡自己手工畫的，可選processon、draw.io、excalidraw、archimatetool、cloudcraft.co
- 喜歡通過代碼生成的，可選plantuml、C4-PlantUML、Context Mapper、structurizr、mermaid
