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

> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/flowchart-guide

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

工具派「流程图绘制」是一款轻量的在线绘图工具：在浏览器里拖拽图形、连线、编辑文字，即可完成流程图、架构图、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)，打开浏览器就能画！