文章目录
- 第一章：项目概览与架构设计
- 1.1 项目解决的核心问题
- 1.2 四种工作模式
- 1.3 系统架构图
- 1.4 完整目录结构
- 第二章：环境准备
- 2.1 系统要求
- 2.2 安装步骤
- Step 1: 安装 Python
- Step 2: 创建并激活虚拟环境
- Step 3: 安装 Node.js
- Step 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 工厂与 Pipeline
- 9.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.json
- 12.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 四种工作模式
┌───────────────────────────────────
