绘图效率提升百倍！AutoFlow 智能流程图Agent 完整开发教程

文章目录

• • 第一章：项目概览与架构设计
  • • 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 部署（可选）