文章源自略懂百科-http://wswcn.cn/104308.html

序

本文主要介绍一下撰写技术文档中可能会用的一些画图工具。这里主要分为两大派，一派是直接拖拽完成，一派是通过代码来完成文章源自略懂百科-http://wswcn.cn/104308.html

UI工具

主要有processon[1]、draw.io[2]、excalidraw[3]、archimatetool[4]、cloudcraft.co[5]文章源自略懂百科-http://wswcn.cn/104308.html

processon

架构图

https://www.processon.com/view/6220b5de1e085333a8970d39?fromnew=1文章源自略懂百科-http://wswcn.cn/104308.html

类图

https://www.processon.com/view/556ff07de4b09b5faa995344?fromnew=1文章源自略懂百科-http://wswcn.cn/104308.html

ER图

https://www.processon.com/view/62372217f346fb0725f7fddf?fromnew=1文章源自略懂百科-http://wswcn.cn/104308.html

用例图

https://www.processon.com/view/5938e003e4b0282707d79918?fromnew=1文章源自略懂百科-http://wswcn.cn/104308.html

流程图

https://www.processon.com/view/6221abcfe401fd072a4a6be3?fromnew=1文章源自略懂百科-http://wswcn.cn/104308.html

拓扑图

https://www.processon.com/view/621ec89f0e3e7471a24c1554?fromnew=1文章源自略懂百科-http://wswcn.cn/104308.html

draw.io

国内貌似访问不了，可以画C4、ER、UML、ArchiMate、AWS/Azure等文章源自略懂百科-http://wswcn.cn/104308.html

excalidraw[6]

archimatetool[7]

cloudcraft[8]

主要是AWS的一些组件文章源自略懂百科-http://wswcn.cn/104308.html

diagram as code

主要有plantuml[9]、C4-PlantUML[10]、Context Mapper[11]、structurizr[12]、mermaid[13]文章源自略懂百科-http://wswcn.cn/104308.html

plantuml

用例图

https://plantuml.com/zh/use-case-diagram文章源自略懂百科-http://wswcn.cn/104308.html

类图

https://plantuml.com/zh/class-diagram文章源自略懂百科-http://wswcn.cn/104308.html

状态图

https://plantuml.com/zh/state-diagram文章源自略懂百科-http://wswcn.cn/104308.html

流程图/活动图

https://plantuml.com/zh/activity-diagram-legacy文章源自略懂百科-http://wswcn.cn/104308.html

时序图/顺序图

https://plantuml.com/zh/sequence-diagram文章源自略懂百科-http://wswcn.cn/104308.html

C4

主要有C4-PlantUML[14]及C4-Builder[15]文章源自略懂百科-http://wswcn.cn/104308.html

Context Mapper[16]

这个应该是DDD爱好者最喜欢的工具，因为可以画出context map，非常高大上文章源自略懂百科-http://wswcn.cn/104308.html

structurizr[17]

主打Diagrams as code的思想，可以导出PlantUML，C4-PlantUML,Mermaid,DOT,WebSequenceDiagrams,Ilograph格式文章源自略懂百科-http://wswcn.cn/104308.html

mermaid[18]

跟markdown编辑器集成的比较好文章源自略懂百科-http://wswcn.cn/104308.html

小结

• 喜欢自己手工画的，可选processon[19]、draw.io[20]、excalidraw[21]、archimatetool[22]、cloudcraft.co[23]• 喜欢通过代码生成的，可选plantuml[24]、C4-PlantUML[25]、Context Mapper[26]、structurizr[27]、mermaid[28]文章源自略懂百科-http://wswcn.cn/104308.html

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]文章源自略懂百科-http://wswcn.cn/104308.html

外部链接

[1]processonhttps://www.processon.com/文章源自略懂百科-http://wswcn.cn/104308.html

[2]draw.iohttps://app.diagrams.net/文章源自略懂百科-http://wswcn.cn/104308.html

[3]excalidrawhttps://excalidraw.com/文章源自略懂百科-http://wswcn.cn/104308.html

[4]archimatetoolhttps://www.archimatetool.com/文章源自略懂百科-http://wswcn.cn/104308.html

[5]cloudcraft.cohttps://cloudcraft.co/app文章源自略懂百科-http://wswcn.cn/104308.html

[6]excalidrawhttps://excalidraw.com/文章源自略懂百科-http://wswcn.cn/104308.html

[7]archimatetoolhttps://www.archimatetool.com/文章源自略懂百科-http://wswcn.cn/104308.html

[8]cloudcrafthttps://app.cloudcraft.co/文章源自略懂百科-http://wswcn.cn/104308.html

[9]plantumlhttps://github.com/plantuml/plantuml文章源自略懂百科-http://wswcn.cn/104308.html

[10]C4-PlantUMLhttps://github.com/plantuml-stdlib/C4-PlantUML文章源自略懂百科-http://wswcn.cn/104308.html

[11]Context Mapperhttps://github.com/ContextMapper文章源自略懂百科-http://wswcn.cn/104308.html

[12]structurizrhttps://structurizr.com/文章源自略懂百科-http://wswcn.cn/104308.html

[13]mermaidhttps://github.com/mermaid-js/mermaid文章源自略懂百科-http://wswcn.cn/104308.html

[14]C4-PlantUMLhttps://github.com/plantuml-stdlib/C4-PlantUML文章源自略懂百科-http://wswcn.cn/104308.html

[15]C4-Builderhttps://adrianvlupu.github.io/C4-Builder//文章源自略懂百科-http://wswcn.cn/104308.html

[16]Context Mapperhttps://github.com/ContextMapper文章源自略懂百科-http://wswcn.cn/104308.html

[17]structurizrhttps://structurizr.com/文章源自略懂百科-http://wswcn.cn/104308.html

[18]mermaidhttps://github.com/mermaid-js/mermaid文章源自略懂百科-http://wswcn.cn/104308.html

[19]processonhttps://www.processon.com/文章源自略懂百科-http://wswcn.cn/104308.html

[20]draw.iohttps://app.diagrams.net/文章源自略懂百科-http://wswcn.cn/104308.html

[21]excalidrawhttps://excalidraw.com/文章源自略懂百科-http://wswcn.cn/104308.html

[22]archimatetoolhttps://www.archimatetool.com/文章源自略懂百科-http://wswcn.cn/104308.html

[23]cloudcraft.cohttps://cloudcraft.co/app文章源自略懂百科-http://wswcn.cn/104308.html

[24]plantumlhttps://github.com/plantuml/plantuml文章源自略懂百科-http://wswcn.cn/104308.html

[25]C4-PlantUMLhttps://github.com/plantuml-stdlib/C4-PlantUML文章源自略懂百科-http://wswcn.cn/104308.html

[26]Context Mapperhttps://github.com/ContextMapper文章源自略懂百科-http://wswcn.cn/104308.html

[27]structurizrhttps://structurizr.com/文章源自略懂百科-http://wswcn.cn/104308.html

[28]mermaidhttps://github.com/mermaid-js/mermaid文章源自略懂百科-http://wswcn.cn/104308.html

[29]如何画好一张架构图？https://mp.weixin.qq.com/s/2HjvNnfP7bLNQF5xh8PxIQ文章源自略懂百科-http://wswcn.cn/104308.html

[30]别再问我们用什么画图的了！问就是excalidrawhttps://mp.weixin.qq.com/s/byF_ZXGnzmxHriO0eb7rmQ文章源自略懂百科-http://wswcn.cn/104308.html

[31]processonhttps://www.processon.com/文章源自略懂百科-http://wswcn.cn/104308.html

[32]draw.iohttps://app.diagrams.net/文章源自略懂百科-http://wswcn.cn/104308.html

[33]hediet.vscode-drawiohttps://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio文章源自略懂百科-http://wswcn.cn/104308.html

[34]excalidrawhttps://excalidraw.com/文章源自略懂百科-http://wswcn.cn/104308.html

[35]cloudcraft.cohttps://cloudcraft.co/app文章源自略懂百科-http://wswcn.cn/104308.html

[36]plantumlhttps://github.com/plantuml/plantuml文章源自略懂百科-http://wswcn.cn/104308.html

[37]C4-PlantUMLhttps://github.com/plantuml-stdlib/C4-PlantUML文章源自略懂百科-http://wswcn.cn/104308.html

[38]c4modelhttps://c4model.com/文章源自略懂百科-http://wswcn.cn/104308.html

[39]c4model Toolhttps://c4model.com/Tooling文章源自略懂百科-http://wswcn.cn/104308.html

[40]Context Mapperhttps://github.com/ContextMapper文章源自略懂百科-http://wswcn.cn/104308.html

[41]Context Mapper - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=contextmapper.context-mapper-vscode-extension文章源自略懂百科-http://wswcn.cn/104308.html

[42]structurizrhttps://structurizr.com/文章源自略懂百科-http://wswcn.cn/104308.html

[43]mermaidhttps://github.com/mermaid-js/mermaid文章源自略懂百科-http://wswcn.cn/104308.html

文章源自略懂百科-http://wswcn.cn/104308.html