MasterGo AI 虽然不能一键生成标准流程图（例如 Mermaid 或 BPMN 格式），但它凭借“多模态理解 + 结构化引导”的能力，能够协助你拼凑出逻辑清晰、可直接落地的页面流程图雏形。关键在于，你并非单纯依赖自动化输出，而是需要引导它准确理解你的业务路径与交互决策。

事实上，MasterGo AI 并不直接绘制传统意义上的流程图，但它具备这样的能力：当你将需求拆解到位后，它能够通过理解与整合，为你输出逻辑严谨、便于落地的页面流程图雏形。其精髓并非一蹴而就的生成，而是你如何让它深度消化你的业务流转与交互判断。

理解页面流程图的本质需求

页面流程图绝非装饰性工具，它的核心使命是展现“用户如何操作、系统如何反馈、在何处分流、在何处跳转”。要让 MasterGo AI 理清这套逻辑，你必须向其清晰交代三类要素：

• 节点类型：包括起始页、表单页、列表页、详情页、弹窗、404 页面或登录拦截页等；
• 流转关系：点击某按钮后跳转至哪一页？提交成功后去向何方？权限不足时呈现什么内容？
• 条件分支：例如“用户已登录 → 进入首页”，“未登录 → 弹出登录框 → 登录成功后再返回原页”。

用文字描述构建可被AI解析的流程骨架

避免使用“用户打开APP后看到首页”这类笼统表述，你需要将其细化为包含判断与动作的结构化语句：

• 当用户首次访问 /login 页面时，若存在有效 token，则自动重定向至 /dashboard；否则显示账号与密码输入框；
• 点击“忘记密码”按钮，跳转至 /reset-password，同时清空当前表单内容；
• 在 /product-list 页面，点击任意商品卡片，携带 id 参数跳转至 /product-detail?id=xxx；
• 若网络请求失败，所有列表页均展示“加载失败”提示，并附带重试按钮。

这类描述越贴近真实的前端路由逻辑与状态判断，AI 所生成的页面跳转关系就会越精准。

借助 MasterGo AI 的双输入能力强化流程准确性

单纯依赖文字描述，很容易遗漏视觉线索或隐含规则。建议你组合使用两种输入方式：

• 上传一张手绘流程草图（即便是简单的箭头、方框与简写文字），让 AI 捕捉布局顺序与连接方向；
• 同步提供设计稿链接（例如 MasterGo 内部共享链接），AI 可读取页面命名、图层分组以及交互标注（如“点击→跳转至XX页”）；
• 在提示词末尾强调：“请输出页面间跳转关系图，每个页面为一个矩形节点，跳转线上标注触发动作（如‘点击搜索按钮’‘提交成功后’），分支条件写在连线旁。”

后续处理：导出后做轻量校验与补全

AI 生成的结果通常是页面级跳转示意，而非标准流程图代码。你可以采取以下处理方式：

• 将生成的设计画布截图，利用 Mermaid Live Editor 手动重绘为 graph TD 格式；
• 或者复制页面名称与跳转说明，在 Prompt 中要求：“请将以下页面流转关系转为 Mermaid flowchart TD 代码，判断节点用菱形，页面节点用矩形，连线上标注触发条件”；
• 对于复杂状态（如“登录态变化影响多个页面入口”），建议先在 MasterGo 中使用「连接线工具」手动绘制跳转路径，再导出为 PNG 供开发团队对齐。

它虽不能替代专业的流程建模工具，却能帮助你将模糊的产品想法快速固化为可视、可讨论、可迭代的流程原型。