首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >技术文档画图工具箱

技术文档画图工具箱

原创
作者头像
code4it
发布2022-04-01 12:01:37
发布2022-04-01 12:01:37
1.9K0
举报
文章被收录于专栏:码匠的流水账码匠的流水账

本文主要介绍一下撰写技术文档中可能会用的一些画图工具。这里主要分为两大派,一派是直接拖拽完成,一派是通过代码来完成

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] processon https://www.processon.com/

[2] draw.io https://app.diagrams.net/

[3] excalidraw https://excalidraw.com/

[4] archimatetool https://www.archimatetool.com/

[5] cloudcraft.co https://cloudcraft.co/app

[6] excalidraw https://excalidraw.com/

[7] archimatetool https://www.archimatetool.com/

[8] cloudcraft https://app.cloudcraft.co/

[9] plantuml https://github.com/plantuml/plantuml

[10] C4-PlantUML https://github.com/plantuml-stdlib/C4-PlantUML

[11] Context Mapper https://github.com/ContextMapper

[12] structurizr https://structurizr.com/

[13] mermaid https://github.com/mermaid-js/mermaid

[14] C4-PlantUML https://github.com/plantuml-stdlib/C4-PlantUML

[15] C4-Builder https://adrianvlupu.github.io/C4-Builder/#/

[16] Context Mapper https://github.com/ContextMapper

[17] structurizr https://structurizr.com/

[18] mermaid https://github.com/mermaid-js/mermaid

[19] processon https://www.processon.com/

[20] draw.io https://app.diagrams.net/

[21] excalidraw https://excalidraw.com/

[22] archimatetool https://www.archimatetool.com/

[23] cloudcraft.co https://cloudcraft.co/app

[24] plantuml https://github.com/plantuml/plantuml

[25] C4-PlantUML https://github.com/plantuml-stdlib/C4-PlantUML

[26] Context Mapper https://github.com/ContextMapper

[27] structurizr https://structurizr.com/

[28] mermaid https://github.com/mermaid-js/mermaid

[29] 如何画好一张架构图? https://mp.weixin.qq.com/s/2HjvNnfP7bLNQF5xh8PxIQ

[30] 别再问我们用什么画图的了!问就是excalidraw https://mp.weixin.qq.com/s/byF_ZXGnzmxHriO0eb7rmQ

[31] processon https://www.processon.com/

[32] draw.io https://app.diagrams.net/

[33] hediet.vscode-drawio https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

[34] excalidraw https://excalidraw.com/

[35] cloudcraft.co https://cloudcraft.co/app

[36] plantuml https://github.com/plantuml/plantuml

[37] C4-PlantUML https://github.com/plantuml-stdlib/C4-PlantUML

[38] c4model https://c4model.com/

[39] c4model Tool https://c4model.com/#Tooling

[40] Context Mapper https://github.com/ContextMapper

[42] structurizr https://structurizr.com/

[43] mermaid https://github.com/mermaid-js/mermaid

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • UI工具
  • processon
    • 架构图
    • 类图
    • ER图
    • 用例图
    • 流程图
    • 拓扑图
  • draw.io
  • excalidraw[6]
  • archimatetool[7]
  • cloudcraft[8]
  • diagram as code
  • plantuml
    • 用例图
    • 类图
    • 状态图
    • 流程图/活动图
    • 时序图/顺序图
  • C4
  • Context Mapper[16]
  • structurizr[17]
  • mermaid[18]
  • 小结
  • doc
    • 外部链接
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档