程序员画图的痛点
- 各个图形怎么对不齐啊?
- 这个在线服务怎么要收费啊? 只能免费画这么几张图? 现在没网了, 用不了啊!
- 同事画的图的逻辑比较老了, 现在业务迭代了, 已经跟最新的逻辑对不上了, 但是他只留了张图啊, 我怎么改啊? 诶, 重新画吧
- 这个项目的设计图在哪里呀? 找不到, 唉, 看代码慢慢摸索吧.
- 好不容易找到设计图了, 怎么是个在线的地址, 点进去, 已经404了啊
图的选择: 什么场景画什么图?
架构图
软件开发过程中，开发人员可以使用技术架构图来描述软件的整体架构，包括不同模块、组件和服务之间的依赖关系。这样，开发人员可以更好地理解系统的结构，并能够更好地进行开发和维护。此外，技术架构图还可以用于帮助开发人员诊断和解决系统中的问题。
适合场景
- 给不懂技术的人演示, 展示公司技术实力
- 介绍系统总体组成, 表现整个系统包含哪些服务, 让看的人有个点和面的印象. 其实跟实际代码开发过程没有什么重要关系.
- 在设计一个新系统的时候, 必须使用架构图.
不适合的场景
- 需要表现一个具体的功能点逻辑
时序图
时序图是一种UML交互图，用来描述对象之间发送消息的时间顺序和动态协作。它可以表示用例的行为顺序，每条消息对应一个类操作或状态机中的触发事件。时序图是一个二维图，横轴表示对象，纵轴表示时间，消息在各对象之间横向传递，依照时间顺序纵向排列。时序图也可以用来对一个场景下的对象交互建模，展示了系统的不同部件的执行序列。
时序图适合表现对象之间的动态协作和时间顺序。例如，它可以用于描述系统中不同部件之间的交互。
适合场景
- 业务逻辑中涉及到其他组件,其他服务的交互时, 使用时序图展示较好; 如tcp连接过程, 数据包流传
- 再排查bug,性能优化时能帮助定位是哪里的可能出现问题及出现性能瓶颈
不适合场景
- 需要表现业务逻辑判断的场景
- 需要表现整体架构的场景
补充：
时序图反映了一系列对象的交互与协作关系，清晰立体地反映系统的调用纵深链路。
时序图的核心元素包括：参与者（Actor）、生命线（Lifeline）、控制焦点（Focus of control）、消息（Message）等。
顺序图的语法和功能
PlantUML序列图的语法：你可以有几种类型的参与者（演员和其他人），箭头，音符，组…改变字体和颜色也有可能。
https://plantuml.com/zh/sequence-diagram
微信支付时序图（经典）
流程图
流程图是一种图表，用于表示过程或工作流程。在软件设计中，流程图通常用于可视化软件算法或程序中涉及的步骤。它们可以帮助开发人员识别设计中潜在的问题和低效性，并计划和优化程序的逻辑和结构。流程图通常使用标准符号和形状来表示不同类型的操作、决策和输入。
适合场景
- 适合表达一个具体的功能点逻辑, 这个一般会要求产品文档就得写好, 研发只需要在此基础上补充一些判断逻辑.
不适合场景
- 涉及数据流转的场景表现不佳
- 无法进行整体系统介绍, 只能表现具体功能点
状态图
状态图常用来表示某个对象的状态流转, 因为可能包含很多状态, 而不同状态之前可能不能任意转换, 因此使用状态图表示可能的路径, 在编程时可以规避BUG
参考与学习
UML、ArchiMate、BPMN、流程圖模板
了解 UML、BPMN、ArchiMate、流程圖、思維導圖、ERD、DFD、SWOT、PEST、價值鍊等等。從圖表示例中學習並開始在線創建圖表。
https://online.visual-paradigm.com/tw/diagrams/templates/
软件的选择: 我用过的各个产品的横评
| 推荐指数 | 产品名 | 下载(在线)地址 | 收费形式 | 适合场景 | 优点 | 缺点 |
| ⭐️⭐️⭐️⭐️⭐️ | mysql workbench | https://www.mysql.com/products/workbench/ | 免费 | 数据表设计 | 1. 可以管理数据库 | |
| 2. 可以导出E-R图 | ||||||
| 3. 可以标示表关系,如1-n,m-n | ||||||
| ⭐️⭐️⭐️⭐️ | excalidraw | https://excalidraw.com/ | 免费 | 流程图,架构图,思维导图 | 1. 可以绘制手绘风格的图 | |
| 2. 非常适合云服务架构图, 因为有配套的云厂商的图片 | ||||||
| 3. 可以在线协作画图 | ||||||
| ⭐️⭐️⭐️ | Idea UML图 | https://www.jetbrains.com/ | 免费/收费 | code review,代码设计 | 1. 使用UML功能,对类有一个直观展示 | |
| 2. 可以一键导出各种画图软件的格式,或者在线编辑 | ||||||
| ⭐️⭐️⭐️ | Datagrip | https://www.jetbrains.com/ | 收费 | 数据表设计 | 也可以展示数据表的E-R图 | 1. 不能标示表之前的关系 |
| 2. 收费 | ||||||
| ⭐️⭐️⭐️⭐️⭐️ | VS Code的markdown扩展的mermaid插件 | https://mermaid.js.org/ | 开源免费 | 架构图, 流程图,时序图,思维导图 | 1. 比较好看 | |
| 2. 和markdown结合较好, 可以用较少的代码表达复杂的内容 | ||||||
| ⭐️⭐️⭐️⭐️⭐️ | VS Code的PlantUML | http://www.plantuml.com/ | ||||
| https://c4model.com/ | 开源免费 | 架构图 | 1. 全能的软件 | 1. 图比较古老, 赶不上现在的审美 | ||
| ⭐️⭐️⭐️ | draw.io | https://app.diagrams.net/ | 开源免费 | 架构图, 流程图,时序图 | 1. 非常适合云服务架构图, 因为有配套的云厂商的图片 | |
| 2. 可以导出源文件.drawio, 方便版本管理 | 1. 源文件内容格式比较复杂, 几乎无法直接文本编辑来改变内容, 只能通过UI交互设计 |
Idea: Java程序员必备, UML图, Idea导出
idea 还可以通过插件来查看时序图 SequenceDiagram
MySQL Workbench: 最适合表设计以及展示的软件
Datagrip: Jetbrains家的数据库管理软件, 支持各种数据库
Mermaid: 代码即图片,使用mermaid插件设计流程图
PlantUML: 免费开源的全能绘图软件, UI稍显落后
draw.io: 最全能的技术绘图软件,支持各种图形种类, 也支持手绘风格
<mxfile host="app.diagrams.net" modified="2023-07-11T11:48:46.297Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36" version="21.1.4" etag="Vk56FYurCNT3bhcBm2TL" type="device"> <diagram id="U-IhvMMfK_tPmmFvKWC0" name="Page-1"> <mxGraphModel dx="1950" dy="882" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" background="none" math="0" shadow="0"> <root> <mxCell id="0" /> <mxCell id="1" parent="0" /> <object placeholders="1" c4Name="哈哈哈" c4Type="Software System" c4Description="Description of software system." label="<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%]</div><br><div><font style="font-size: 11px"><font>%c4Description%</font></font></div>" id="jzu2_plOl5HEqln0LSlW-1"> <mxCell style="rounded=1;whiteSpace=wrap;html=1;labelBackgroundColor=none;fillColor=#1061B0;fontColor=#FF1CCA;align=center;arcSize=10;strokeColor=#0D5091;metaEdit=1;resizable=0;points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];shadow=0;" vertex="1" parent="1"> <mxGeometry x="120" y="240" width="240" height="120" as="geometry" /> </mxCell> </object> <object placeholders="1" c4Name="Container name" c4Type="ContainerScopeBoundary" c4Application="Container" label="<font style="font-size: 16px"><b><div style="text-align: left">%c4Name%</div></b></font><div style="text-align: left">[%c4Application%]</div>" id="jzu2_plOl5HEqln0LSlW-4"> <mxCell style="rounded=1;fontSize=11;whiteSpace=wrap;html=1;dashed=1;arcSize=20;fillColor=none;strokeColor=#666666;fontColor=#333333;labelBackgroundColor=none;align=left;verticalAlign=bottom;labelBorderColor=none;spacingTop=0;spacing=10;dashPattern=8 4;metaEdit=1;rotatable=0;perimeter=rectanglePerimeter;noLabel=0;labelPadding=0;allowArrows=0;connectable=0;expand=0;recursiveResize=0;editable=1;pointerEvents=0;absoluteArcSize=1;points=[[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0.25,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0],[0,0.25,0]];" vertex="1" parent="1"> <mxGeometry x="30" y="200" width="400" height="280" as="geometry" /> </mxCell> </object> <mxCell id="jzu2_plOl5HEqln0LSlW-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="jzu2_plOl5HEqln0LSlW-5"> <mxGeometry relative="1" as="geometry"> <mxPoint x="-140" y="430" as="targetPoint" /> </mxGeometry> </mxCell> <object placeholders="1" c4Name="Person name" c4Type="Person" c4Description="Description of person." label="<font style="font-size: 16px"><b>%c4Name%</b></font><div>[%c4Type%]</div><br><div><font style="font-size: 11px"><font color="#cccccc">%c4Description%</font></div>" id="jzu2_plOl5HEqln0LSlW-5"> <mxCell style="html=1;fontSize=11;dashed=0;whiteSpace=wrap;fillColor=#083F75;strokeColor=#06315C;fontColor=#ffffff;shape=mxgraph.c4.person2;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];resizable=0;direction=east;" vertex="1" parent="1"> <mxGeometry x="-290" y="10" width="200" height="180" as="geometry" /> </mxCell> </object> </root> </mxGraphModel> </diagram></mxfile>
XML
Excalidraw: 更高的审美需求
个人建议的最佳实践
- 图表代码化, 跟随项目代码一起被git管理, 这样可以跟踪流程变化, 避免使用一些在线服务存在付费, 以及图随着人员变动找不到了, 以及后续维护的同事不好改图
- 架构图使用C4模型设计; 流程图, 时序图建议使用mermaid插件;库表设计使用DDL源码;
- 新建项目的时候建议做架构图,数据库表使用E-R图,接口设计UML图; 项目迭代, 做时序图和流程图就够了