<h2>工具简介：流程图绘制能做什么？</h2>
<p>工具派「流程图绘制」是一款轻量的在线绘图工具：在浏览器里拖拽图形、连线、编辑文字，即可完成流程图、架构图、UML 图，并导出高清 PNG 图片。写技术方案、梳理业务流程、画系统架构时，无需安装 Visio 或 draw.io。</p>
<p><strong>核心特点：</strong></p>
<ul>
<li><strong>9 种图形</strong>：矩形、圆角矩形、圆形、菱形、椭圆、平行四边形、六边形、圆柱、文档，覆盖流程图常用符号</li>
<li><strong>连接模式</strong>：点击两个图形自动生成带箭头的连线，可编辑连线标签</li>
<li><strong>属性面板</strong>：选中图形后可调整填充色、边框、文字颜色、线宽</li>
<li><strong>编辑辅助</strong>：撤销/重做、网格吸附、缩放、全屏、框选多选、复制粘贴</li>
<li><strong>双格式导出</strong>：PNG 高清图片（按内容裁剪）+ JSON 工程备份（可重新导入继续编辑）</li>
</ul>
<h2>第一步：打开工具，认识界面</h2>
<p>进入工具派首页，在左侧「设计可视化」分类中找到「流程图绘制」，或直接在顶部搜索框输入&quot;流程图&quot;进入工具页。</p>
<p><img src="/api/file/download?path=article/202607/1783845163948_7168.png" alt="第一步：打开流程图绘制工具，认识界面"></p>
<p>界面分为三部分：左侧是形状库和工具栏，中间是无限画布，右上角是视图控制（吸附网格、缩放、重置、全屏）。画布内置了一个「开始 → 处理 → 判断 → 结束」的示例流程图，可以直接在上面修改，也可以清空后从零开始。</p>
<h2>第二步：绘制图形并编辑文字</h2>
<p>画流程图的基本操作：选形状 → 拖拽绘制 → 编辑文字 → 连线。</p>
<p><img src="/api/file/download?path=article/202607/1783845168580_2341.png" alt="第二步：绘制图形并编辑文字"></p>
<p>具体操作：</p>
<ol>
<li><strong>绘制图形</strong>：在形状库点击需要的形状（如矩形），然后在画布上按住鼠标拖拽，松手即生成图形</li>
<li><strong>编辑文字</strong>：切回「选择」模式，双击图形即可输入文字</li>
<li><strong>调整样式</strong>：选中图形后，左侧属性面板可以修改填充色、边框、文字颜色和线宽</li>
<li><strong>连接图形</strong>：点击「连接」进入连接模式，依次点击两个图形即可生成带箭头的连线；双击连线可编辑标签</li>
<li><strong>移动排版</strong>：选择模式下拖拽图形移动位置，按住 Shift 点击可多选，空白处拖拽平移画布</li>
</ol>
<p>操作失误随时可以「撤销」（Ctrl+Z），也可以 Ctrl+C/V 复制粘贴图形快速复用。</p>
<h2>功能与快捷键说明</h2>
<table>
<thead>
<tr>
<th>功能</th>
<th>操作方式</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>绘制图形</td>
<td>选形状后拖拽</td>
<td>9 种形状可选</td>
</tr>
<tr>
<td>移动图形</td>
<td>选择模式拖拽</td>
<td>可框选、Shift+点击多选</td>
</tr>
<tr>
<td>编辑文字</td>
<td>双击图形/连线</td>
<td>图形文字和连线标签均可编辑</td>
</tr>
<tr>
<td>连接图形</td>
<td>连接模式点击两个图形</td>
<td>自动生成箭头连线</td>
</tr>
<tr>
<td>平移画布</td>
<td>空白处拖拽</td>
<td>无限画布</td>
</tr>
<tr>
<td>撤销/重做</td>
<td>Ctrl+Z / 工具栏按钮</td>
<td>误操作可恢复</td>
</tr>
<tr>
<td>复制粘贴</td>
<td>Ctrl+C / Ctrl+V</td>
<td>快速复用图形</td>
</tr>
<tr>
<td>删除</td>
<td>Delete 键 / 删除按钮</td>
<td>删除选中图形</td>
</tr>
<tr>
<td>视图</td>
<td>吸附网格/缩放/重置/全屏</td>
<td>右上角控制</td>
</tr>
</tbody></table>
<h2>第三步：导出PNG图片和JSON备份</h2>
<p>流程图画完后，点击左侧绿色「导出 PNG」按钮即可下载图片。</p>
<p><img src="/api/file/download?path=article/202607/1783845173170_4164.png" alt="第三步：导出PNG图片和JSON备份"></p>
<p>实测导出效果：PNG 按内容自动裁剪（本例导出为 439×530），白色背景带淡网格，文字和箭头清晰，可直接插入 Word、PPT 或技术文档。</p>
<p>强烈建议同时点击「导出 JSON」保存一份工程备份：JSON 文件完整记录了所有图形（shapes）、连线（edges）和版本信息，之后用「导入 JSON」即可恢复画布继续编辑，不用担心浏览器刷新丢失。</p>
<h2>常见问题</h2>
<p><strong>Q1：浏览器刷新后画的内容还在吗？</strong><br>刷新会清空画布，请养成随时「导出 JSON」备份的习惯，下次用「导入 JSON」恢复。</p>
<p><strong>Q2：导出的 PNG 是透明的吗？</strong><br>默认勾选「白色背景」，导出为白底图片；取消勾选可导出透明背景 PNG，方便叠加到其他文档中。</p>
<p><strong>Q3：能画泳道图、时序图吗？</strong><br>可以用矩形+连线组合出泳道图、简单时序图等，9 种基础图形覆盖面较广；复杂 UML 图建议配合文字标注。</p>
<p><strong>Q4：画布不够用怎么办？</strong><br>画布是无限延展的，空白处拖拽即可平移；右上角可以缩放视图或进入全屏模式获得更大绘制空间。</p>
<h2>总结与相关工具</h2>
<p>流程图绘制把专业绘图软件的核心功能搬进了浏览器：拖拽画图、双击写字、一键导出，三步搞定。搭配以下工具可以组成完整的设计可视化工作流：</p>
<ul>
<li><a href="/tools/chart_generator">图表生成器</a>：输入数据生成柱状图、折线图、饼图等 11 种图表</li>
<li><a href="/tools/whiteboard">在线白板</a>：无限画布白板，支持手绘风格图形和多人头脑风暴</li>
<li><a href="/tools/business_card_generator">名片生成器</a>：在线设计商务名片，导出高清 PDF/PNG</li>
<li><a href="/tools/svg_to_png">SVG 转 PNG</a>：矢量图转位图，支持自定义尺寸和背景</li>
</ul>
<p>画流程图无需安装任何软件，<a href="/tools/flowchart">立即使用工具派流程图绘制</a>，打开浏览器就能画！</p>


## 工具简介：流程图绘制能做什么？

工具派「流程图绘制」是一款轻量的在线绘图工具：在浏览器里拖拽图形、连线、编辑文字，即可完成流程图、架构图、UML 图，并导出高清 PNG 图片。写技术方案、梳理业务流程、画系统架构时，无需安装 Visio 或 draw.io。

**核心特点：**

- **9 种图形**：矩形、圆角矩形、圆形、菱形、椭圆、平行四边形、六边形、圆柱、文档，覆盖流程图常用符号
- **连接模式**：点击两个图形自动生成带箭头的连线，可编辑连线标签
- **属性面板**：选中图形后可调整填充色、边框、文字颜色、线宽
- **编辑辅助**：撤销/重做、网格吸附、缩放、全屏、框选多选、复制粘贴
- **双格式导出**：PNG 高清图片（按内容裁剪）+ JSON 工程备份（可重新导入继续编辑）

## 第一步：打开工具，认识界面

进入工具派首页，在左侧「设计可视化」分类中找到「流程图绘制」，或直接在顶部搜索框输入"流程图"进入工具页。

![第一步：打开流程图绘制工具，认识界面](/api/file/download?path=article/202607/1783845163948_7168.png)

界面分为三部分：左侧是形状库和工具栏，中间是无限画布，右上角是视图控制（吸附网格、缩放、重置、全屏）。画布内置了一个「开始 → 处理 → 判断 → 结束」的示例流程图，可以直接在上面修改，也可以清空后从零开始。

## 第二步：绘制图形并编辑文字

画流程图的基本操作：选形状 → 拖拽绘制 → 编辑文字 → 连线。

![第二步：绘制图形并编辑文字](/api/file/download?path=article/202607/1783845168580_2341.png)

具体操作：

1. **绘制图形**：在形状库点击需要的形状（如矩形），然后在画布上按住鼠标拖拽，松手即生成图形
2. **编辑文字**：切回「选择」模式，双击图形即可输入文字
3. **调整样式**：选中图形后，左侧属性面板可以修改填充色、边框、文字颜色和线宽
4. **连接图形**：点击「连接」进入连接模式，依次点击两个图形即可生成带箭头的连线；双击连线可编辑标签
5. **移动排版**：选择模式下拖拽图形移动位置，按住 Shift 点击可多选，空白处拖拽平移画布

操作失误随时可以「撤销」（Ctrl+Z），也可以 Ctrl+C/V 复制粘贴图形快速复用。

## 功能与快捷键说明

| 功能 | 操作方式 | 说明 |
| --- | --- | --- |
| 绘制图形 | 选形状后拖拽 | 9 种形状可选 |
| 移动图形 | 选择模式拖拽 | 可框选、Shift+点击多选 |
| 编辑文字 | 双击图形/连线 | 图形文字和连线标签均可编辑 |
| 连接图形 | 连接模式点击两个图形 | 自动生成箭头连线 |
| 平移画布 | 空白处拖拽 | 无限画布 |
| 撤销/重做 | Ctrl+Z / 工具栏按钮 | 误操作可恢复 |
| 复制粘贴 | Ctrl+C / Ctrl+V | 快速复用图形 |
| 删除 | Delete 键 / 删除按钮 | 删除选中图形 |
| 视图 | 吸附网格/缩放/重置/全屏 | 右上角控制 |

## 第三步：导出PNG图片和JSON备份

流程图画完后，点击左侧绿色「导出 PNG」按钮即可下载图片。

![第三步：导出PNG图片和JSON备份](/api/file/download?path=article/202607/1783845173170_4164.png)

实测导出效果：PNG 按内容自动裁剪（本例导出为 439×530），白色背景带淡网格，文字和箭头清晰，可直接插入 Word、PPT 或技术文档。

强烈建议同时点击「导出 JSON」保存一份工程备份：JSON 文件完整记录了所有图形（shapes）、连线（edges）和版本信息，之后用「导入 JSON」即可恢复画布继续编辑，不用担心浏览器刷新丢失。

## 常见问题

**Q1：浏览器刷新后画的内容还在吗？**
刷新会清空画布，请养成随时「导出 JSON」备份的习惯，下次用「导入 JSON」恢复。

**Q2：导出的 PNG 是透明的吗？**
默认勾选「白色背景」，导出为白底图片；取消勾选可导出透明背景 PNG，方便叠加到其他文档中。

**Q3：能画泳道图、时序图吗？**
可以用矩形+连线组合出泳道图、简单时序图等，9 种基础图形覆盖面较广；复杂 UML 图建议配合文字标注。

**Q4：画布不够用怎么办？**
画布是无限延展的，空白处拖拽即可平移；右上角可以缩放视图或进入全屏模式获得更大绘制空间。

## 总结与相关工具

流程图绘制把专业绘图软件的核心功能搬进了浏览器：拖拽画图、双击写字、一键导出，三步搞定。搭配以下工具可以组成完整的设计可视化工作流：

- [图表生成器](/tools/chart_generator)：输入数据生成柱状图、折线图、饼图等 11 种图表
- [在线白板](/tools/whiteboard)：无限画布白板，支持手绘风格图形和多人头脑风暴
- [名片生成器](/tools/business_card_generator)：在线设计商务名片，导出高清 PDF/PNG
- [SVG 转 PNG](/tools/svg_to_png)：矢量图转位图，支持自定义尺寸和背景

画流程图无需安装任何软件，[立即使用工具派流程图绘制](/tools/flowchart)，打开浏览器就能画！

工具派流程图绘制工具，在线拖拽绘制流程图、架构图和UML图，提供矩形、菱形、圆形等9种图形，支持双击编辑文字、属性面板调样式、JSON导入导出备份，导出高清PNG图片。

流程图绘制教程：拖拽式在线画流程图，导出高清PNG和JSON备份