这款免费流程图工具,让我卸载了用了三年的桌面软件

前言

作为一名全栈开发工程师，画流程图是我日常工作中绕不开的高频需求。

技术方案评审
时，需要用时序图、架构图来说明系统交互；
系统设计阶段
，需要用 UML 图、ER 图来对齐后端数据结构；
业务需求梳理
时，需要用泳道图、状态机图来跟产品经理对齐流程；
运维部署
时，需要用网络拓扑图来展示服务部署架构。

之前一直用的是某知名桌面端流程图软件（名字就不提了，懂的都懂），功能确实强大，但槽点也很多：每次冷启动要等十几秒，画到一半时不时弹出升级付费的弹窗，最烦的是换了电脑就得重新安装激活。临时要给同事看个图，还得先导出再传文件，协作效率极低。

直到最近我发现了这个在线工具——福兮流程工厂（forxi.cn/hub/flow-factory），抱着试试看的心态用了几天，结果把我用了三年的桌面软件直接卸载了。

下面从功能完整度、操作体验、应用场景、技术实现四个维度，来一次深度评测。

一、零门槛上手，打开浏览器就能画

这款工具最大的特点就是不需要安装、不需要注册、不需要登录，打开网址就能直接画。没有 splash 加载动画，页面秒开，画布直接可用。

界面采用经典的三栏布局：

左侧
：图形库面板（192px 宽），提供所有可用的图形和线条样式
中间
：无限画布区域，自适应浏览器窗口大小
右侧
：属性编辑面板（272px 宽），选中节点或连线后显示对应属性

如果你用过 ProcessOn、draw.io 或 Visio，这个布局基本无缝切换，几乎零学习成本。

二、图形库详解——16 种原生图形 + 自定义渲染

左侧图形库提供了 16 种矢量图形，全部使用 SVG 渲染，放大不失真：

序号	图形名称	类型标识	默认尺寸	典型用途
1	矩形	rect	120×60	通用流程步骤、函数调用
2	正方形	square	80×80	统一建模语言节点、状态
3	圆形	circle	80×80	开始/结束节点、状态标记
4	椭圆	ellipse	140×70	开始/结束（宽版）、数据库实体
5	菱形	diamond	100×100	判断/分支条件
6	三角形	triangle	100×90	警告标记、聚合符号
7	圆角矩形	roundRect	120×50	流程开始/结束、子流程
8	六边形	hexagon	110×80	准备/初始化操作
9	平行四边形	parallelogram	130×60	数据输入/输出
10	梯形	trapezoid	120×60	手动操作、特殊流程
11	五边形	pentagon	100×100	自定义标记节点
12	气泡	callout	130×70	注释、标注说明
13	圆柱	cylinder	80×100	数据库、数据存储
14	十字	cross	80×80	医疗流程标记、特殊节点
15	星形	star	90×90	重点标记、评分节点
16	人形	person	70×110	用户角色、组织架构

两种添加方式

点击添加
：直接点击图形卡片，节点自动出现在画布中央偏右的位置，多次点击会自动错位排列避免重叠。
拖拽添加
：按住图形卡片拖到画布任意位置释放，节点精确落在鼠标位置。支持 HTML5 Drag & Drop API，拖拽过程中有半透明预览效果。

连线操作

节点边缘有8 个连接锚点（上下左右 + 四个角），鼠标悬停节点边缘会出现蓝色连接点，按住拖出即可创建连线。连线会自动吸附到目标节点的最近锚点，支持智能路径调整（adjustEdge），拖拽节点时连线自动跟随重绘。

三、画布工具栏——10+ 种辅助功能

顶部工具栏从左到右依次是：

3.1 视图控制

功能	说明	快捷键/操作
放大	画布以 10% 步进放大	点击按钮 / 滚轮
缩小	画布以 10% 步进缩小	点击按钮 / 滚轮
缩放显示	实时显示当前缩放百分比，点击可一键重置为 100%	点击百分比徽章
适应画布	自动计算缩放比，让所有节点都显示在当前视口内	点击全屏按钮

3.2 历史操作

功能	说明	快捷键
撤销	回退到上一步操作	`Ctrl + Z`
重做	恢复被撤销的操作	`Ctrl + Y`

3.3 编辑操作

功能	说明	快捷键
删除选中	删除当前选中的节点或连线	`Delete` 键
清空画布	一键清除画布上所有内容（带确认逻辑）	—

3.4 背景模式切换

这是我觉得很用心的一个细节。支持三种画布背景：

点阵背景
：浅灰底 + CSS 径向渐变模拟的点阵图案（20px 间距），类似 Sketch/Figma 的画板背景，适合大多数场景。
网格背景
：CSS 网格线（24px 间距），适合需要精确定位对齐的场景，比如画系统部署架构图。
纯色渐变背景
：淡蓝到淡紫到淡橙的渐变，截屏导出时视觉效果更好，适合直接用于文档。

三种背景均为纯 CSS 实现，不依赖任何图片资源，切换瞬间完成零延迟。

3.5 文件操作

功能	说明
导入 JSON	选择之前导出的 `.json` 流程图文件，恢复编辑状态，实现跨设备"云存档"
导出 JSON	将当前流程图保存为 JSON 文件，包含所有节点位置、样式、文本、连线关系等完整信息
导出图片	一键导出为 PNG 高清图片，自动添加 40px 内边距，白色背景，适合直接插入文档或 PPT

四、属性编辑面板——专业级定制能力

这是整个工具的精华所在。右侧属性面板根据选中对象的不同，展示不同的编辑界面。

4.1 单选节点——13 项属性可调

选中单个节点后，面板分为六个区块：

填充

19 种预设填充色（含 transparent 无填充），带颜色选择器取色 + 色板快速切换

文字

文本颜色：12 种预设色（白/灰/黑/蓝/红/黄/绿），覆盖浅色和深色填充场景
字号：8px–72px 可调，数字输入框精确控制

边框

边框颜色：同填充色板，19 种可选
边框宽度：0–12px 可调
圆角大小：0–60px 可调（矩形/圆角矩形适用）

内容

文本输入框：修改节点显示文字，支持双击节点直接编辑

形状

4 种形状快速切换：矩形 ↔ 圆形 ↔ 菱形 ↔ 椭圆，选中即可切换，无需删除重建

布局

X/Y 坐标：精确到像素的节点位置
宽/高：40–600 / 30–400 范围，精确控制节点尺寸

快捷操作按钮

复制节点：在右下方 30px 偏移处创建一个完全相同的节点
水平居中：将节点移动到画布水平中线
垂直居中：将节点移动到画布垂直中线
删除节点：移除当前节点

4.2 单选连线——9 项属性可调

选中单条连线后，面板分为三个区块：

标签

文字输入框：给连线添加说明文字（如"是/否"、“通过/驳回”），文字浮在连线上方带白色背景气泡

线条

颜色：19 种预设色
粗细：1–10px 可调
线型：实线 / 虚线 / 点线 / 点划线，四种线型通过 SVG stroke-dasharray 实现

实线：none
虚线：6 3（6px 实线段 + 3px 间隔）
点线：2 3（2px 实点 + 3px 间隔）
点划线：8 3 2 3（长段 + 间隔 + 点 + 间隔）

线段类型：折线 / 直线 / 曲线（贝塞尔），三种路径算法

折线：LogicFlow 自动计算转折点，90° 直角拐弯
直线：起点到终点最短路径
曲线：三次贝塞尔曲线平滑过渡

箭头

方向：单向 → / 反向 ← / 双向 ↔ / 无箭头 —，四种方向
大小：4–24px 可调，控制箭头尺寸

4.3 多选批量编辑——效率杀手锏

这是最让我惊喜的功能。拖拽框选多个节点后（LogicFlow SelectionSelect 插件支持），右侧面板自动切换为批量编辑模式：

批量节点属性（框选多个节点时）

统一修改填充色
统一修改边框颜色和宽度
统一修改节点文字内容和颜色
统一修改文字字号
水平对齐
：以选中节点的 Y 轴平均值对齐
垂直对齐
：以选中节点的 X 轴平均值对齐
删除选中
：一键清除所有选中元素

批量连线属性（框选多条连线时）

统一修改线条颜色
统一修改线条宽度（1–10px）
统一修改线型（实线/虚线/点线/点划线）

批量操作在实际使用中非常高频。比如画完一个复杂流程图后，想统一把所有"判断节点"改成黄色填充加粗边框，框选后三秒搞定。

五、典型应用场景

5.1 业务流程图

最基础的用法。用矩形表示处理步骤、菱形表示判断条件、椭圆表示开始/结束，配合连线标签标注条件分支（“是/否”、“通过/驳回”）。适合需求文档、业务方案中的流程说明。

推荐图形：矩形 + 菱形 + 椭圆 + 圆角矩形推荐线型：折线 + 实线 + 单向箭头

5.2 系统架构图

用不同形状表示不同组件层级，用不同颜色区分服务类型。例如矩形表示微服务、圆柱表示数据库、六边形表示中间件。

推荐图形：矩形 + 圆柱 + 六边形 + 平行四边形推荐线型：直线 + 实线 + 双向箭头推荐背景：网格模式，方便对齐

5.3 组织架构图

人形图标天然适合表示岗位角色，配合矩形表示部门名称，可以快速搭建出清晰的组织层级关系图。

推荐图形：人形 + 矩形 + 圆角矩形推荐线型：折线 + 实线 + 单向箭头

5.4 UML 用例图 / 状态机图

圆形表示状态、椭圆表示用例、菱形表示分支、矩形表示实体，配合曲线连线可以画出规范的 UML 图。

推荐图形：圆形 + 椭圆 + 菱形 + 矩形推荐线型：曲线 + 实线/虚线

5.5 数据库 ER 图

圆柱体天然适合表示数据表实体，矩形表示字段属性，配合连线标注关联关系（1:1 / 1:N / N:N）。

推荐图形：圆柱 + 矩形 + 菱形推荐线型：直线 + 实线/虚线

5.6 思维导图 / 决策树

以椭圆或圆角矩形为根节点，向外发散子节点，配合折线或曲线连接，可以快速画出结构清晰的决策树。

推荐图形：圆角矩形 + 椭圆 + 菱形推荐线型：曲线 + 实线

5.7 泳道图（手动分区）

虽然没有内置泳道模板，但可以通过添加不同颜色的矩形作为"泳道背景"，放置到最底层（调整 Z 轴顺序），再在上面摆放流程节点来手动实现泳道效果。

六、技术实现分析

出于职业习惯，F12 看了一下源码，技术栈这块也挺有意思：

6.1 核心引擎：LogicFlow

流程图的核心能力由 LogicFlow 提供，这是滴滴开源的一款专注业务场景的流程图编辑框架。主要用到的能力包括：

自定义节点注册
：16 种图形中除了内置的 rect/circle/ellipse/diamond，其余 12 种均通过 lf.register() 注册为自定义节点，使用 SVG path 或 h 函数渲染
SelectionSelect 插件
：实现框选和多选能力
Snapshot 插件
：实现画布截图导出为 PNG 图片
History 系统
：内置操作历史栈，支持撤销/重做
Snapline
：拖拽节点时的对齐辅助线
键盘快捷键系统
：Delete 删除、Ctrl+Z/Y 撤销重做

6.2 前端框架：Vue 3 Composition API

整个页面使用 <script setup> 语法编写，状态管理全部通过 ref/reactive 在组件内完成，没有引入额外的状态管理库。组件设计上采用内联 defineComponent 的方式定义了 ColorRow 颜色选择器子组件（render function 写法），减少了文件碎片化。

6.3 纯浏览器端运行

所有图形渲染、JSON 解析、图片导出都在浏览器端完成，不会把任何数据上传到服务器。这得益于 LogicFlow 纯前端的架构设计和 FileReader API + Blob URL 的本地文件处理方案。

6.4 导出图片的实现

导出图片使用的是 LogicFlow Snapshot 插件，其底层原理是 foreignObject + Canvas 转换，将 SVG 画布内容渲染到 Canvas 上再导出为 PNG。支持配置背景色（白色）和内边距（40px）。

6.5 响应式处理

工具本身只适配桌面端（屏幕宽度 ≥ 768px），移动端访问时会显示全屏提示引导用户使用电脑。这是合理的取舍——在手机屏幕上拖拽画流程图体验确实很差，不如不做。

七、优缺点总结

优势

维度	评价
上手门槛	零成本 ——无需安装注册，打开即用
图形丰富度	16 种矢量图形 + 4 种线型 + 3 种线段路径
编辑自由度	极高 ——单节点 13+ 属性，单连线 9+ 属性，支持批量编辑
导出能力	PNG 高清图片 + JSON 完整草稿，满足文档和存档双需求
性能	流畅 ——SVG 渲染，数百节点无明显卡顿
价格	完全免费，无任何收费入口或付费墙
隐私安全性	纯本地处理，零服务器上传，适合企业内部敏感流程
协作便利性	JSON 文件 = 天然协作格式，传文件即传进度

待改进

问题	说明
无移动端支持	仅桌面端可用，平板也无法使用
无内置模板	没有预设的流程图模板库，需要从零开始画
无实时协作	暂不支持多人同时在线编辑
图形库无搜索	16 种图形尚可接受，如果未来扩展到更多可能需要搜索过滤
无泳道图模板	需要手动拼出泳道效果

八、写在最后

作为开发者，我对工具的评判标准很简单：能不能让我专注于"画什么"而不是"怎么画"。

福兮流程工厂在这个维度上做得很好——图形库够用、属性面板直观、拖拽体验流畅、导出能力完善。它没有 Visio 那么重，也没有 ProcessOn 的文件数限制，定位就是一款纯粹、轻量、免费的在线流程图工具。

如果你也有以下痛点：

偶尔需要画流程图，不想为低频需求装一个桌面软件
需要在多台设备之间切换工作，不想反复安装激活
只是想快速画一张图贴到文档里，不想折腾复杂的功能

那么这款工具绝对值得一试。

在线体验：https://forxi.cn/hub/flow-factory
除了流程图工具，福兮还提供了文件预览（PDF/Word/Excel/PPT）、图片处理（压缩/裁剪/滤镜/水印）、OCR 文字识别、IT 开发工具箱（Base64/JSON/UUID/正则/时间戳等）、文件格式转换、超级计算器（科学/金融/进制/单位）、IP 归属地查询、临时邮箱等 40+ 款免费在线工具，全部无需安装注册，打开即用。