序
本文主要介绍一下撰写技术文档中可能会用的一些画图工具。这里主要分为两大派,一派是直接拖拽完成,一派是通过代码来完成
UI工具
主要有processon、draw.io、excalidraw、archimatetool、cloudcraft.co
processon
架构图
文章图片
https://www.processon.com/vie...
类图
文章图片
https://www.processon.com/vie...
ER图
文章图片
https://www.processon.com/vie...
用例图
文章图片
https://www.processon.com/vie...
流程图
文章图片
https://www.processon.com/vie...
拓扑图
文章图片
https://www.processon.com/vie...
draw.io
国内貌似访问不了,可以画C4、ER、UML、ArchiMate、AWS/Azure等
excalidraw
文章图片
archimatetool
文章图片
cloudcraft
文章图片
主要是AWS的一些组件diagram as code 主要有plantuml、C4-PlantUML、Context Mapper、structurizr、mermaid
plantuml 用例图
文章图片
https://plantuml.com/zh/use-c...
类图
文章图片
https://plantuml.com/zh/class...
状态图
【技术文档画图工具箱】
文章图片
https://plantuml.com/zh/state...
流程图/活动图
文章图片
https://plantuml.com/zh/activ...
时序图/顺序图
文章图片
https://plantuml.com/zh/seque...
C4 主要有C4-PlantUML及C4-Builder
文章图片
Context Mapper 这个应该是DDD爱好者最喜欢的工具,因为可以画出context map,非常高大上
文章图片
structurizr 主打Diagrams as code的思想,可以导出PlantUML,C4-PlantUML,Mermaid,DOT,WebSequenceDiagrams,Ilograph格式
文章图片
mermaid 跟markdown编辑器集成的比较好
文章图片
小结
- 喜欢自己手工画的,可选processon、draw.io、excalidraw、archimatetool、cloudcraft.co
- 喜欢通过代码生成的,可选plantuml、C4-PlantUML、Context Mapper、structurizr、mermaid
- 如何画好一张架构图?
- 别再问我们用什么画图的了!问就是excalidraw
- processon
- draw.io
- hediet.vscode-drawio
- excalidraw
- cloudcraft.co
- plantuml
- C4-PlantUML
- c4model
- c4model Tool
- Context Mapper
- Context Mapper - Visual Studio Marketplace
- structurizr
- mermaid