AI 流程图工具如何实现无需登录的对话生成、源码编辑和实时预览？

作者：袖梨 2026-09-13

Codigram 是一款把自然语言转换为 Mermaid.js 图表的浏览器应用。用户无需注册即可描述流程，通过对话继续修改，必要时直接编辑 Mermaid 源码，并在同一界面查看实时预览。原作者公开说明其技术栈为 React、Gemini 2.5 Flash 与 Mermaid.js，项目保存在用户设备上，还支持自动修复、美化、解释以及 PNG、SVG 和源码导出。

这类工具解决了什么问题

Mermaid 适合把图表纳入 Markdown、代码仓库和文档流水线，但首次使用者常在语法、编辑器和 AI 对话工具之间反复切换。真正影响效率的并非单次生成，而是从想法到可用图表之间的反馈回路太长。

一个完整的 AI 流程图工作台应把四件事放在同一上下文中：自然语言需求、可修改源码、实际渲染结果和可继续追问的对话。Codigram 的产品思路正是缩短这条路径，而不是发明新的图表格式。

无需登录的体验怎样成立

无需登录通常意味着应用不要求先创建远端账户，页面打开后即可创建项目。会话列表、图表源码和界面偏好可以通过浏览器本地存储保存，从而让用户刷新或再次访问时继续编辑。

不过，“项目保存在设备上”不等于“所有数据都不离开浏览器”。如果自然语言需要由 Gemini 2.5 Flash 转换为 Mermaid，生成请求仍可能发送到模型服务。产品应分别说明账户状态、项目持久化、模型请求、日志保留和导出文件的去向。

核心工作流是什么

用户用自然语言描述希望表达的系统或业务流程。
前端把描述和输出约束组成模型提示。
模型返回 Mermaid.js 源码。
应用清理代码围栏和无关说明。
Mermaid 解析并渲染为 SVG。
用户在对话、源码编辑器和图表预览之间迭代。
完成后导出 PNG、SVG 或原始源码。

这里真正的状态源应是 Mermaid 文本。预览是源码的派生结果，对话则用于产生新的源码版本。只要这三者的职责清楚，用户就能在自动生成和精确手工控制之间切换。

自然语言如何变成 Mermaid

模型提示不应只有一句“生成流程图”，还应包含目标图类型、允许的语法、输出格式和当前源码。首次生成可使用如下结构：

任务：根据需求生成 Mermaid 流程图。
要求：仅返回 Mermaid 源码，不要代码围栏和解释。
图类型：flowchart TD
需求：用户提交订单，系统校验库存；库存不足时提示失败，
库存充足时创建订单并发起支付。

明确输出限制可以减少 Markdown 围栏、自然语言说明和多份候选代码混入渲染器。服务端或前端仍需验证返回值，不能假设模型总会遵循格式。

对话修改为什么要携带当前源码

用户说“把支付失败分支改成重试三次”时，模型必须知道当前图中有哪些节点、标识和连接。修改请求至少应包含当前 Mermaid 源码、用户新指令和保持无关部分不变的约束。

当前源码：
flowchart TD
  A[提交订单] --> B{库存充足?}
  B -- 否 --> C[提示库存不足]
  B -- 是 --> D[创建订单]
  D --> E[发起支付]

修改：为支付失败增加最多三次重试，保留库存分支不变。
仅返回修改后的完整 Mermaid 源码。

返回完整源码实现简单，但模型可能无意改动无关区域。更严格的实现可让模型返回结构化修改计划，再由程序确定性地应用到图模型。

源码编辑器应该承担什么职责

内置编辑器不是高级用户的装饰功能，而是 AI 输出不准确时的直接逃生通道。它至少应支持语法高亮、行号、查找替换、撤销重做、错误定位和自动缩进。

编辑状态与预览状态分离，输入过程中不覆盖最后一次有效图。
使用防抖，避免每个按键都触发昂贵渲染。
解析失败时标出具体行列和错误原因。
保留有效版本，便于一键恢复。
不要在用户手工修改后由后台生成结果静默覆盖。

实时预览如何实现

React 组件可以源码变化，在防抖后调用 Mermaid 渲染接口生成 SVG，再把结果放入隔离的预览容器。一次渲染需要唯一 ID，且要处理组件卸载、旧请求晚到和重复初始化。

源码变化
  → 等待短暂防抖
  → 解析与渲染 Mermaid
  → 成功：替换 SVG 并保存有效版本
  → 失败：保留旧 SVG，显示错误位置

保留旧的有效预览很重要。若每次语法错误都清空画布，用户在手工输入尚未闭合的节点或子图时会看到频繁闪烁。

怎样防止异步结果覆盖新内容

AI 生成和 Mermaid 渲染都是异步过程。用户可能连续发出两个请求，第二个先完成，随后第一个旧结果又返回。解决方法是为每次生成分配递增请求号或使用取消控制器，只接受当前活动请求的结果。

源码编辑同样需要版本号。提交 AI 修改时记录基线版本；结果返回时若用户已手工改过源码，应提示冲突或生成对比，而不是直接覆盖。

自动修复功能应怎样设计

当 Mermaid 解析失败时，可把错误消息、失败源码和图类型一并发给模型，让它只修复语法。修复提示必须限制改动范围：

修复下面 Mermaid 源码的语法错误。
保持节点文本、业务逻辑和连接方向不变。
仅输出修复后的完整源码。
解析错误：Parse error on line 6 ...

修复后应再次使用真实 Mermaid 解析器验证。模型声称“已修复”不是成功标准；只有目标版本能够解析和渲染，才能进入历史记录。

美化与修复有什么区别

修复以恢复有效语法为目标，原则上不改变语义。美化则可能调整布局方向、子图、节点命名、空行和样式。两者不能共用一个模糊按钮，否则用户很难判断为何拓扑发生变化。

格式化：只改变缩进和空白。
布局优化：改变方向、分组或连接表达。
视觉美化：增加 classDef、主题或节点样式。
语法修复：只处理导致解析失败的问题。

图表解释功能如何工作

解释功能把 Mermaid 源码转换为自然语言摘要，适合代码审查、文档补充和无障碍场景。提示应要求模型列出参与者、主路径、分支和异常情况，并禁止虚构源码中不存在的行为。

解释结果属于辅助文本，不能反过来证明图表正确。若源码本身遗漏了一个分支，模型可能只会忠实解释这个不完整结果。

缩放、平移、重置和全屏怎样加入

原作者说明，Mermaid.js 负责把文本渲染成 SVG，自定义 React 组件在外层增加缩放、平移、重置、编辑和全屏。常见实现是在预览容器内维护变换矩阵：

滚轮或按钮修改缩放比例。
指针拖动修改平移偏移。
重置恢复适配视口的初始矩阵。
全屏只改变承载容器，不重新生成图表。
源码更新后重新计算边界，但不必强制丢失用户视角。

控制按钮需要稳定尺寸和可访问名称，键盘用户也应能完成缩放、重置和退出全屏。

项目怎样保存在浏览器

简单应用可把项目元数据与 Mermaid 文本保存在 localStorage；项目变多、历史版本变大时，更适合使用 IndexedDB。典型项目结构包括：

{
  "id": "project-id",
  "title": "订单流程",
  "source": "flowchart TD ...",
  "diagramType": "flowchart",
  "updatedAt": "...",
  "history": []
}

本地存储应处理配额、迁移、损坏数据和清理浏览器后的丢失风险。导出源码不仅是分享功能，也是用户可控的备份机制。

为什么仍然需要版本历史

对话修改可能一次重写整份源码。没有历史记录时，用户只能靠编辑器撤销，而且刷新页面后可能无法恢复。每次成功渲染后保存版本快照，可同时记录触发来源、用户提示和时间。

历史不应保存每个按键，而应围绕有意义的检查点：首次生成、AI 修改成功、自动修复成功、用户手工保存和导入文件。

PNG、SVG 和源码导出有什么差异

SVG 保留矢量质量，适合网页、设计工具和继续处理。
PNG 兼容性高，适合聊天、演示和不支持 SVG 的平台。
Mermaid 源码体积小、可版本控制，是最重要的可编辑交付物。

导出 PNG 时需要把 SVG 绘制到高分辨率 Canvas，并考虑设备像素比、背景色、字体加载和跨域图片污染。导出 SVG 时应保留命名空间和必要样式。

安全边界需要注意什么

Mermaid 文本最终会变成 SVG 和 DOM。应用应使用受信任的 Mermaid 安全配置，升级依赖，并避免允许任意脚本、危险链接或未经净化的 HTML 标签进入页面。

限制可接受的图表长度和模型输出大小。
对渲染容器实施内容安全策略。
不要把模型密钥直接打包进公开前端。
通过受控后端代理模型请求并实施限流。
明确敏感业务描述是否会发送给第三方模型。
对反馈表单等外部请求配置正确的连接策略。

原帖评论曾有人报告反馈功能受到内容安全策略限制。这并不影响核心图表能力，但说明外部服务域名必须与 CSP 配置保持一致。

无需登录如何控制模型成本

匿名使用降低门槛，却也更容易被自动化滥用。不能把供应商 API 密钥放在浏览器中。后端代理至少需要按 IP 或匿名设备令牌限速、限制提示长度、设置每日额度并记录不含敏感正文的计量信息。

还可以把手工编辑、预览、格式化和导出保持为纯本地功能，只在用户明确点击生成、修改、解释或 AI 修复时调用模型。

怎样验证生成结果

确认源码只包含预期 Mermaid 内容。
使用目标版本 Mermaid 实际解析并渲染。
核对所有关键节点或参与者。
检查主路径、分支方向和条件文本。
检查时序图的激活区间和响应箭头。
比较 AI 修改前后，确认无关结构未变化。
分别测试 SVG、PNG 和源码导出。

“画面看起来合理”不足以验收工程图。视觉预览可能掩盖错误连接，而源码也可能包含渲染器容忍但不符合团队规范的写法。

常见故障如何排查

模型返回代码围栏

强化仅输出源码的约束，并在进入解析器前只剥离明确匹配的代码围栏，不要用宽泛正则删除图中内容。

输入时预览不断闪烁

增加防抖并保留最后有效 SVG。渲染成功后再替换画布。

旧生成结果覆盖手工编辑

引入请求 ID、取消旧请求，并比较提交时的源码版本与当前版本。

导出的 PNG 模糊

按设备像素比放大 Canvas，等待字体加载，并允许用户选择导出倍率。

刷新后项目消失

检查本地存储写入、隐私模式、配额和数据迁移。为用户提供源码或项目包导出。

复杂图表预览卡顿

延长防抖时间、限制源码规模、避免重复初始化 Mermaid，并把导出等重任务与编辑反馈分开。

适合怎样的使用场景

快速梳理业务流程和产品想法。
生成系统组件关系的初稿。
把会议讨论转成可编辑图表。
为 README 和技术文档制作 Mermaid 图。
学习 Mermaid 语法并观察实时效果。

它不应替代领域审核。生产架构、合规流程和安全边界仍需负责人检查，特别是模型可能遗漏异常路径或错误理解术语。

实现这类产品的验收清单

打开页面无需账户即可创建项目。
模型密钥不出现在前端资源中。
首次生成只返回可解析 Mermaid。
对话修改携带当前源码和明确约束。
源码编辑器有错误定位和撤销恢复。
预览采用防抖并保留最后有效版本。
异步请求不会覆盖较新的用户内容。
本地项目能恢复并可主动导出备份。
SVG、PNG 和源码导出均经过验证。
隐私说明区分本地存储与模型请求。

总结

无需登录的 AI 流程图工具，关键不是简单地给 Mermaid 套一层聊天框，而是把自然语言生成、源码控制、可靠渲染、本地项目和多格式导出组成顺畅闭环。Codigram 展示了一种轻量实现：React 管理交互和状态，Gemini 2.5 Flash 把描述转换为 Mermaid.js，Mermaid 生成 SVG，自定义预览组件补充缩放、平移、重置与全屏。真正用于生产时，还要增加请求竞态保护、解析校验、版本历史、密钥隔离、限流和清晰隐私边界，才能让“无需登录”同时保持可靠与可持续。