技术文档画图工具箱

序 本文主要介绍一下撰写技术文档中可能会用的一些画图工具。这里主要分为两大派,一派是直接拖拽完成,一派是通过代码来完成
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
doc
  • 如何画好一张架构图?
  • 别再问我们用什么画图的了!问就是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

    推荐阅读