文章目录第一章：项目概览与架构设计1.1 项目解决的核心问题1.2 四种工作模式1.3 系统架构图1.4 完整目录结构第二章：环境准备2.1 系统要求2.2 安装步骤Step 1: 安装 PythonStep 2: 创建并激活虚拟环境Step 3: 安装 Node.jsStep 4: 准备 LLM API 密钥第三章：后端项目搭建3.1 创建目录结构3.2 创建所有 `__init__.py` 文件3.3 创建 Python 依赖文件3.4 安装后端依赖3.5 创建环境变量示例文件3.6 创建实际 `.env` 配置文件第四章：核心配置模块4.1 文件位置4.2 完整代码4.3 代码详解第五章：数据模型层5.1 文件位置5.2 完整代码5.3 代码详解第六章：提示词工程6.1 标准模式 —— 文本优化提示词6.2 标准模式 —— 代码生成提示词6.3 灵感模式提示词6.4 提示词调用关系图第七章：工具层 —— Mermaid 校验器7.1 设计理念7.2 文件位置7.3 完整代码7.4 代码详解第八章：服务层 —— LLM 服务与计划转换器8.1 LLM 服务封装8.2 计划模式转换器第九章：智能体层 —— Agent 工厂与 Pipeline9.1 代码工具函数集9.2 Agent 工厂9.3 生成流水线（Pipeline）9.4 导出接口9.5 流式 Agent 服务编排第十章：API 路由层10.1 计划模式路由10.2 智能体流式聊天路由第十一章：应用入口与启动11.1 FastAPI 应用主文件11.2 启动后端服务第十二章：前端项目搭建12.1 创建前端项目12.2 创建 package.json12.3 创建 Vite 配置12.4 创建 HTML 入口12.5 创建前端环境变量示例12.6 安装前端依赖第十三章：前端核心组件13.1 React 入口文件13.2 主应用组件（App.jsx）—— 完整代码13.3 组件架构详解第十四章：前端 API 服务与 Mermaid 渲染14.1 API 服务封装14.2 Mermaid 渲染封装第十五章：前端样式系统15.1 完整样式文件15.2 CSS 设计系统第十六章：运行测试与验证16.1 完整启动流程16.2 验证清单后端健康检查计划模式测试浏览器访问16.3 四种模式的使用演示模式一：计划模式（无需 LLM）模式二：代码模式（无需 LLM）模式三：标准模式（需要 LLM）模式四：灵感模式（需要 LLM）16.4 预览区操作第十七章：部署指南17.1 生产环境配置1. 修改后端 `.env`2. 构建前端3. 使用 Nginx 部署（推荐方案）4. 使用 systemd 管理后端进程17.2 Docker 部署（可选）第一章：项目概览与架构设计1.1 项目解决的核心问题在日常工作中，我们经常需要在日常工作中，我们经常需要将想法、计划或业务流程转换为可视化的流程图。传统做法是手动用 Visio、Draw.io 等工具一步步绘制，或者手写 Mermaid 语法——这两种方式都存在明显痛点：将想法、计划或业务流程转换为可视化的流程图。传统做法是手动用 Visio、Draw.io 等工具一步步绘制，或者手写 Mermaid 语法——这两种方式都存在明显痛点：问题说明文本到流程图转换效率低用户需要手动将想法转换为图形化表达手写 Mermaid 成本高Mermaid 语法对新手不友好，容易出错流程表达缺少统一结构缺少可视化反馈和标准化输出AutoFlow 正是为了解决这些问题而生。它利用大语言模型（LLM）的文本理解和代码生成能力，将用户输入的自然语言自动转换为标准的 Mermaid 流程图代码，并提供实时预览、方向切换和导出功能。1.2 四种工作模式┌───────────────────────────────────