AI工具+drawio生成各种图表
浅尝一下
<strong>第一步：</strong>使用AI工具生成可视化代码
- 提需求
- 结果输出（使用Mermaid语法可以直接在Typora中直接生成图表）
graph TD
subgraph 合同签订前
A[合同调研] --> B[合同草拟]
B --> C[合同审批]
C -->|同步ERP| D[预算分配]
D -->|生成合同编号| E[合同签订]
end
subgraph 合同执行中
E --> F[费用申请]
F -->|对接OA| G{OA审批}
G -->|通过| H[预算检查]
H -->|ERP校验| I[费用支付]
G -->|驳回| F
H -->|超预算| J[预算调整申请]
J -->|OA审批| H
I --> K[活动执行]
K -->|GPS定位/拍照取证| L[费用核销]
end
subgraph 合同执行后
L --> M[生成费用报表]
M -->|ERP入账| N[财务核算]
N --> O[费用分析]
O --> P[优化策略]
end
subgraph 系统对接
Q[OA系统] <-->|审批流同步| G
R[ERP系统] <-->|预算数据交互| D
R <-->|支付数据交互| I
R <-->|核算数据同步| N
end
<strong>第二步：</strong>基于Drawio生成可视化图表
<strong>第三步：</strong>根据实际业务需求，微调图表，优化展示效果
同样的，另外的使用场景还有：根据文档描述生成图表
比如说：使用 DeepSeek 网站进行AI问答
- 访问 DeepSeek 网站
- 注册或登录账户
- 进行AI问答
- 查看回答
graph TD
A[访问DeepSeek网站] --> B[注册或登录账户]
B --> C[进行AI问答]
C --> D[查看回答]
总体上感觉用起来确实还不错，能很大程度的提高我们的工作效率。
<hr />
简单的了解一下drawio
drawio是个啥玩意？
<p style="color: red">drawio是个开源、免费的绘图工具。</p>
<p style="color: red">me印象里的画图场景有：</p>
- 画用例图（明确系统的操作角色，以及系统提供的所有功能和服务），这个在进行系统操作相关培训的时候必不可少
- 画系统流程图（进行模块划分，明确每个模块之间的交互方式，尤其需要关注的是<font color="red">数据在各个模块之间的数据流转</font>），这个在开发人员内部进行系统培训的时候必不可少
- 画架构图，这个可以帮助开发人员快速的理解系统的整体设计，各个组件之间的交互以及数据流
<p style="color: red">me经常用的到的图表有哪些呢？</p>
- 流程图（<font color="red">最常用</font>）
- 时序图（用于展示<font color="red">多个角色</font>在<font color="red">时间顺序上</font>如何协作的），比如这篇文章：什么是jwt？为什么要用jwt？用的就是时序图
- 甘特图（通过甘特图可以知道你要<font color="red">做什么+什么时候做+做多久+谁来做</font>，横向看时间，纵向看任务），比如这篇文章：国产AI之光！DeepSeek用的就是甘特图
- 架构图
这里以画流程图的方式了解一下drawio的使用：
drawio的操作界面主要分成三个部分：形状面板+画布+格式化面板。
画流程图，我们首先要知道的是各个形状及其代表的节点类型：
| 形状 | 节点类型 |
|---|---|
| 椭圆或圆角矩形 | 开始节点/结束节点 |
| 菱形 | 决策节点 |
| 矩形 | 处理数据节点 |
| 连接线 | 连接形状 |
例子：
使用drawio好用快捷键有（Windows系统）：
Ctrl + D：复制选中的元素
Ctrl + 按住选择的元素：复制副本
箭头与图形的连接点，可以是蓝色也可以是绿色。其中蓝色方框之间的连接点，会随着图形的相对位置变化而变动，始终是最短路径；而绿色方框之间的连接点，是不会发生变化的。（所以说上面菱形拖出来的连接点可以用绿色的）
另外在画流程图的时候还可能使用到泳道图：
泳道图是一种特殊的流程图，用于展示不同参与者或部门在业务流程中的角色和责任。
比如我们常见的OA审批流程就是一个泳道图的例子。
泳道图有横向泳道图和纵向泳道图，体现在形状面板->高级：
还有我们在画系统流程图的时候，可以把系统业务拆分成多个模块，通过各个模块之间的相互协作串联整个系统流程图。
这个时候需要用子流程进行分解，将复制流程进行简化。
我们一般的操作是拖拽出一个矩形，然后将矩形边框虚线化，使用快捷键Ctrl + G将图形转化为容器，接着将相关流程拖拽到容器中，拖拽时容器的边框会呈现蓝色阴影，将容器折叠后，调整容器的大小，标注名称，再调整一下在父流程相对位置（更有层级感）。
简单的了解一下纯文本绘图工具Mermaid
就像用Markdown写文章会自动排版一样，Mermaid用纯文本代码描述图表结构，自动生成流程图、思维导图等可视化图表。
Mermaid就像“图表界的Markdown”，用写代码的方式画图，特别适合需要频繁修改、注重逻辑而非美感的场景。从技术文档到学习笔记，从项目管理到AI协作，它都能让可视化变得简单高效。
嗯……，好像很厉害的样子，但是我先不学。
结尾
giao！！！
