代码粘贴成图
把 JSON、React 组件、Prisma schema 或 SQL 转储直接粘贴进画布，AI 引擎解析其中的实体与关系，自动生成完整架构图，无需手动画框。
官方说明 ↗
OpenFlowKit
AI TOOL PROFILE工具资料免费开源的流程图工作室，支持代码粘贴、Mermaid.js 与 Figma 矢量导出
价格100% 免费，开源，MIT 许可
平台Web
归类聊天对话
收录2025-01-01
复核2025-01-01
编辑评分
4.1 / 5
★★★★☆
OpenFlowKit编辑总结
OpenFlowKit 是一款 100% 免费、开源的图表工具，面向开发者与设计师。核心特点是可以直接粘贴 JSON、React 组件、Prisma schema 或 SQL 转储，由 AI 引擎解析关系并自动生成架构画布，也支持 Mermaid.js 语法与自研 DSL。图表可导出为原生 Figma 矢量图层、SVG、PNG 或 JSON。采用 MIT 许可，支持本地优先存储，API 密钥保存在本地设备上。短板是官网目前篇幅较短，未公开任何具体限额、团队协作人数上限或版本号信息。
OpenFlowKit是什么？
OpenFlowKit 是一个面向开发者与设计师的免费开源图表工作室。官网将其定位为「像你一样思考的图表工作台」，采用 MIT 许可，主打对构建者友好——既可以写代码，也可以拖拽操作。
能力分三块。第一块是「图表即代码」，原生支持自研类型安全 DSL 与 Mermaid.js 语法，输入代码即自动完成布局；也可以把 JSON、React 组件、Prisma schema、SQL 转储或 GitHub 仓库粘贴进画布，由 AI 引擎解析实体关系并瞬间生成图表。第二块是最受强调的「电影级导出引擎」，号称首个面向系统设计的动态导出方案，一键把静态图转成 1080p 演示动画，直接渲染 MP4，引擎自动插值位移、透明度与路径，无需手画关键帧。第三块是 AI 助手 Flowpilot，可用自然语言对话增删和调整节点样式，例如在数据库前加一层 Redis 缓存。
用法上，工程师走「图表即代码」路线，把架构定义存成 JSON 纳入版本控制；设计师把画布内容复制粘贴进 Figma，得到可编辑的 SVG 和文本图层；不想暴露数据的人依赖本地优先存储，所有内容留在自己机器上。协作方面支持分享链接，通过 WebRTC 做点对点实时同步与延迟光标。
OpenFlowKit核心功能
图表即代码
原生支持自研类型安全 DSL 与 Mermaid.js 语法写图，定义节点后由引擎负责布局；导出 JSON 即可纳入版本控制，文档不会随截图过期。
官方说明 ↗电影级动画导出
一键把静态系统图转成演示动画并原生渲染为 1080p MP4，全程在浏览器内完成。引擎自动插值位移、透明度与走向，无需手设关键帧，复杂分支用平滑贝塞尔曲线连接。
官方说明 ↗Figma 矢量导出
支持导出为原生 Figma 矢量图层、SVG、PNG 或 JSON，也可以直接复制粘贴到 Figma，得到可编辑的矢量图形和文本层，不再是死板的位图。
官方说明 ↗Flowpilot AI 助手
用自然语言和图表对话来增删节点、调整样式。例如输入「在数据库前加一层 Redis 缓存」，它会新增 Redis 节点并重新连线，改动以 diff 形式呈现。
官方说明 ↗智能自动布局
底层由 ELK.js 驱动，自动为节点连线择路，并把节点对齐吸附到整齐位置，省掉手工对齐盒子的时间，新增服务也不会打乱整张布局。
官方说明 ↗本地优先与自带密钥
所有内容留在本地机器，没有云端追踪，也不强制同步。AI 功能使用用户自己的 OpenAI 或 Anthropic 密钥，密钥安全存储在本地设备，避免厂商锁定。
官方说明 ↗多人实时协作
分享一个链接即可多人共建，基于 WebRTC 的点对点同步，可做到零延迟实时光标，共享节点对象的改动即时可见。
官方说明 ↗白标画布
基于 React Flow 搭建，节点、连线与主题均可完全自定义，其为「终极白标画布」，可替换成自己的品牌视觉。
官方说明 ↗OpenFlowKit值不值得用？
当你的主要需求是「把代码或数据结构变成一张能放进文档、能进版本控制的架构图」时，OpenFlowKit 值得一试：免费开源、MIT 许可、本地优先，粘贴 Prisma schema 或 SQL 就能出图，导出 JSON 还能随时重建。当你要做的是高频商务演示、需要严格统一的企业模板库时，它目前的可控性和素材丰富度还不够，官网也未公开团队协作人数、存储或导出额度等上限，规模化落地前需要先自行确认。
建议选它的情况
- 需要把数据库 schema 或后端代码快速转成架构图的开发者
- 希望图表能进 Git 版本控制、不随截图过期的技术团队
- 要把产品架构图变成可编辑矢量层交给设计师的跨职能协作
- 对数据外流敏感、坚持本地存储和自带 API 密钥的用户
不建议选它的情况
- 需要现成精美模板库、开箱即出商务 PPT 的用户
- 不写代码、完全依赖拖拽且要求零学习成本的用户
- 需要明确 SLA、配额与商业支持的付费级企业采购
OpenFlowKit使用建议
入门先把路子走对
- 先粘一段代码打开后不要急着拖节点。找一段现成的 Prisma schema、SQL 或 JSON 粘进画布，看引擎自动生成的布局效果，比从空白画布开始快得多。
- 配好自己的 AI 密钥Flowpilot 的自然语言改图依赖你自己的 OpenAI 或 Anthropic 密钥，密钥存在本地设备。要在设置里先填入，否则 AI 助手无法调用。
- 从 Mermaid 语法切入如果已有 Mermaid.js 历史文档，直接粘进编辑器即可转为可视化画布，不必重新画一遍。
进阶省时间也省钱
- JSON 存进版本库导出的 JSON 是纯数据，适合跟代码一起提交。每次架构变更改这个文件，流程图就自动跟上代码节奏，避免文档漂移。
- 用对话批量改样式节点多的时候不要逐个点选，直接用自然语言描述改动，例如统一某一层服务的颜色或类型，让 Flowpilot 批量执行。
- 导出动画前先整理分层电影级导出会自动插值路径，节点层次越清楚，生成的动画越顺。导出 MP4 前先把同一逻辑层的节点归到一组，能让路径走得更自然。
- 给设计师发 Figma 图层不要截图交给设计。直接从画布复制粘贴到 Figma，得到的是可编辑的 SVG 和文本层，后续改文案、改色都不用回原工具。
OpenFlowKit适合谁用？
后端与架构工程师
推荐手上已有 Prisma schema、SQL 或 TypeScript 结构，想把它们直接变成能进版本库的架构图，而不是拿画图工具重画一遍。
技术文档维护者
推荐受够了「截图一存就过期」的文档漂移。导出 JSON 纳入版本控制后，代码改了图也能跟着重建。
与工程师协作的设计师
推荐需要把架构图放进 Figma 继续加工。导出为原生矢量层和文本层可直接编辑，省去重绘。
数据敏感型团队
推荐不愿把内部系统结构传到第三方云端。本地优先存储加自带 API 密钥的方式，数据不出机器。
产品经理或市场人员
有条件想快速做一张高质量演示动画，但既不想写代码也不熟悉 Mermaid 语法，前期需要一段适应时间。
需要企业级采购保障的团队
不推荐要求明确的服务等级、配额说明和商业支持合同。未公开具体存储与协作人数上限，也没有付费支持档位可谈。
OpenFlowKit优点和缺点
优点
- 100% 免费开源，MIT 许可，商用限制少
- 粘贴 Prisma、SQL、JSON 或 React 组件即可自动出图
- 原生支持自研 DSL 与 Mermaid.js 两种代码写图方式
- 率先提供电影级导出，一键生成 1080p MP4 演示动画
- 可导出原生 Figma 矢量图层，设计稿不再是死图
- 本地优先存储，AI 密钥保存在本机，避免云端追踪
缺点
- 未公开免费额度、存储上限与协作人数限制
- 未标明当前版本号与更新日志，迭代节奏不透明
- 介绍以功能宣传为主，缺少可核对的性能实测数据
- 平台形态仅限浏览器，未说明是否有桌面或移动客户端
OpenFlowKit常见问题
OpenFlowKit 是免费的吗？＋
是。在首屏和多处强调 100% 免费且开源，采用 MIT 许可，代码托管在 GitHub 上，可以直接查看。没有付费档位，也没有需要绑卡才能解锁的功能。
它能直接把我写的代码变成流程图吗？＋
可以。列出了 Prisma、SQL、TypeScript、JSON 和 GitHub 几类输入源，把内容粘进画布后，AI 引擎会解析其中的实体关系并自动构建画布。除了粘贴代码，也支持用自研 DSL 或 Mermaid.js 语法手写图表定义。
导出的文件能放进 Figma 编辑吗？＋
能。明确列出导出格式包括原生 Figma 矢量图层、SVG、PNG 和 JSON。也可以从画布直接复制粘贴进 Figma，得到的是可编辑的矢量图形与文本层，而不是位图，后续在 Figma 里还能继续改文案和配色。
用它调 AI 需要另外付钱吗？＋
Flowpilot 助手需要自带密钥，即填入你自己的 OpenAI 或 Anthropic API Key，密钥存储在本地设备上。工具本身不收费用，但调用这些模型产生的费用由你与对应模型服务商结算，OpenFlowKit 不经手。
本地优先是什么意思，我的图会被上传吗？＋
官网的说明是一切留在你自己的机器上，没有云端追踪，也不强制同步。你的 AI 密钥保存在本地设备，以避免厂商锁定。多人协作走的是 WebRTC 点对点连接，分享链接后才会有同步。
支持几个人一起编辑一张图？＋
涉及可以分享链接、多人共建，采用 WebRTC 点对点同步并支持实时光标，但未公开具体的并发人数上限。人数较多的团队建议先小范围试一轮再决定是否用于正式协作。
做出来的动画能直接用于演示吗？＋
可以。电影级导出引擎支持一键渲染成 1080p 的 MP4，引擎自动插值移动、透明度和路径，不需要手设关键帧。复杂分支用贝塞尔曲线连接，导出过程全程在浏览器内完成。
和 Mermaid 相比该选哪个？＋
如果只需要在文档里渲染简单流程，Mermaid 语法本身就在 OpenFlowKit 里被支持，可以直接粘贴使用。如果需要可视化的自由画布、Figma 矢量导出或动画演示，OpenFlowKit 提供了 Mermaid 之外的画布层和导出能力。
