什么是流程图制作器？

通过拖放操作构建流程图，支持判断菱形、处理框、输入/输出平行四边形、文档形状和连接线。完成后可导出为 PNG、SVG 或 PDF。

画布提供流程矩形、判断菱形、起止圆角胶囊、输入/输出平行四边形和文档形状。它们会自动吸附到位,移动节点时连接线也会跟着走。双击节点改名称,从一个连接点拖到另一个连接点就能连起两个图形,改色或清空画布都只需一键。图做完后,可以导出透明背景的 SVG 用于 PPT、任意缩放级别的 PNG,或适合打印的 PDF。

使用方法

1. 第一步 — 从工具栏将形状节点（处理框、判断框、开始/结束框）拖入画布。
2. 第二步 — 从一个连接点拖向另一个以连接节点。双击节点可编辑文字标签。
3. 第三步 — 调整布局后，将流程图导出为 PNG、SVG 或 PDF，可用于演示文稿、打印或技术文档。

何时使用

• 在写代码前,先把后端请求流程(含成功和失败分支)整理成图。
• 梳理客服升级路径,让新员工入职第一天就能看懂。
• 设计文档里用文字讲不清楚时,直接画一张算法流程图。

结果

一位产品经理绘制用户注册流程：开始 → 注册 → 邮箱已验证？（判断）→ 是 → 进入仪表盘 / 否 → 重发验证邮件 → 返回验证步骤。

常见问题

流程矩形和判断菱形有什么区别?

矩形表示动作或步骤(发送邮件、更新记录)。菱形表示是/否或分支判断,会把流程分成两条路径。胶囊形则标记整个流程的起点和终点。遵守这些约定,流程图才好读。

怎么把两个图形连起来?

把鼠标悬停在节点上,边缘会出现小的连接点。从一个连接点按住拖到另一个图形的连接点,松开即可生成箭头。之后还可以拖动箭头的中点重新走线,绕开其他节点。

能给箭头加文字,而不是只给方框加吗?

可以。双击箭头中点会出现输入框。常用于在判断菱形的两条出线上标注「是」和「否」,或者在状态转移上写条件,比如「status=200」或「重试次数耗尽」。

为什么推荐导出 SVG 而不是 PNG?

SVG 在任何缩放级别都保持清晰,以后想在 Figma、Illustrator 或 Inkscape 里改字或改色都能直接编辑。PNG 是固定分辨率,但贴进 Confluence、Notion 或 PowerPoint 时兼容性更好,不容易出问题。

画布能承载多少节点而不卡顿?

React Flow 在几百个节点以内都流畅。再多,在中低配笔记本上拖动和缩放就会变慢。如果图大到那个程度,建议拆成顶层总览,再为每个子系统单独画一张详图,用链接串起来。

相关工具