序
本文主要介绍一下撰写技术文档中可能会用的一些画图工具。这里主要分为两大派，一派是直接拖拽完成，一派是通过代码来完成
UI工具
主要有processon[1]、draw.io[2]、excalidraw[3]、archimatetool[4]、cloudcraft.co[5]
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[6]
archimatetool[7]
cloudcraft[8]
主要是AWS的一些组件
diagram as code
主要有plantuml[9]、C4-PlantUML[10]、Context Mapper[11]、structurizr[12]、mermaid[13]
plantuml
用例图
https://plantuml.com/zh/use-case-diagram
类图
https://plantuml.com/zh/class-diagram
状态图
https://plantuml.com/zh/state-diagram
流程图/活动图
https://plantuml.com/zh/activity-diagram-legacy
时序图/顺序图
https://plantuml.com/zh/sequence-diagram
C4
主要有C4-PlantUML[14]及C4-Builder[15]
Context Mapper[16]
这个应该是DDD爱好者最喜欢的工具，因为可以画出context map，非常高大上
structurizr[17]
主打Diagrams as code的思想，可以导出PlantUML，C4-PlantUML,Mermaid,DOT,WebSequenceDiagrams,Ilograph格式
mermaid[18]
跟markdown编辑器集成的比较好
小结
• 喜欢自己手工画的，可选processon[19]、draw.io[20]、excalidraw[21]、archimatetool[22]、cloudcraft.co[23]• 喜欢通过代码生成的，可选plantuml[24]、C4-PlantUML[25]、Context Mapper[26]、structurizr[27]、mermaid[28]
doc
•如何画好一张架构图？[29]•别再问我们用什么画图的了！问就是excalidraw[30]•processon[31]•draw.io[32]•hediet.vscode-drawio[33]•excalidraw[34]•cloudcraft.co[35]•plantuml[36]•C4-PlantUML[37]•c4model[38]•c4model Tool[39]•Context Mapper[40]•Context Mapper - Visual Studio Marketplace[41]•structurizr[42]•mermaid[43]
外部链接
[1]processonhttps://www.processon.com/
[2]draw.iohttps://app.diagrams.net/
[3]excalidrawhttps://excalidraw.com/
[4]archimatetoolhttps://www.archimatetool.com/
[5]cloudcraft.cohttps://cloudcraft.co/app
[6]excalidrawhttps://excalidraw.com/
[7]archimatetoolhttps://www.archimatetool.com/
[8]cloudcrafthttps://app.cloudcraft.co/
[9]plantumlhttps://github.com/plantuml/plantuml
[10]C4-PlantUMLhttps://github.com/plantuml-stdlib/C4-PlantUML
[11]Context Mapperhttps://github.com/ContextMapper
[12]structurizrhttps://structurizr.com/
[13]mermaidhttps://github.com/mermaid-js/mermaid
[14]C4-PlantUMLhttps://github.com/plantuml-stdlib/C4-PlantUML
[15]C4-Builderhttps://adrianvlupu.github.io/C4-Builder//
[16]Context Mapperhttps://github.com/ContextMapper
[17]structurizrhttps://structurizr.com/
[18]mermaidhttps://github.com/mermaid-js/mermaid
[19]processonhttps://www.processon.com/
[20]draw.iohttps://app.diagrams.net/
[21]excalidrawhttps://excalidraw.com/
[22]archimatetoolhttps://www.archimatetool.com/
[23]cloudcraft.cohttps://cloudcraft.co/app
[24]plantumlhttps://github.com/plantuml/plantuml
[25]C4-PlantUMLhttps://github.com/plantuml-stdlib/C4-PlantUML
[26]Context Mapperhttps://github.com/ContextMapper
[27]structurizrhttps://structurizr.com/
[28]mermaidhttps://github.com/mermaid-js/mermaid
[29]如何画好一张架构图？https://mp.weixin.qq.com/s/2HjvNnfP7bLNQF5xh8PxIQ
[30]别再问我们用什么画图的了！问就是excalidrawhttps://mp.weixin.qq.com/s/byF_ZXGnzmxHriO0eb7rmQ
[31]processonhttps://www.processon.com/
[32]draw.iohttps://app.diagrams.net/
[33]hediet.vscode-drawiohttps://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
[34]excalidrawhttps://excalidraw.com/
[35]cloudcraft.cohttps://cloudcraft.co/app
[36]plantumlhttps://github.com/plantuml/plantuml
[37]C4-PlantUMLhttps://github.com/plantuml-stdlib/C4-PlantUML
[38]c4modelhttps://c4model.com/
[39]c4model Toolhttps://c4model.com/Tooling
[40]Context Mapperhttps://github.com/ContextMapper
[41]Context Mapper - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=contextmapper.context-mapper-vscode-extension
[42]structurizrhttps://structurizr.com/
[43]mermaidhttps://github.com/mermaid-js/mermaid
