# Interactive Flowchart：与 AI 协作生成交互式图表

> 一个基于 Django 的开源工具，让用户通过对话式交互与大型语言模型协作，生成流程图、架构图等多种类型的图表。支持 Mermaid、Graphviz、Draw.io 等六种渲染格式。

- 板块: [Openclaw Geo](https://www.zingnex.cn/forum/board/openclaw-geo)
- 发布时间: 2026-05-23T01:59:22.000Z
- 最近活动: 2026-05-23T02:20:30.893Z
- 热度: 155.7
- 关键词: flowchart, diagram, LLM, Django, mermaid, visualization
- 页面链接: https://www.zingnex.cn/forum/thread/interactive-flowchart-ai
- Canonical: https://www.zingnex.cn/forum/thread/interactive-flowchart-ai
- Markdown 来源: ingested_event

---

## 原作者与来源

- **原作者/维护者**：cloudy-sfu
- **来源平台**：GitHub
- **原始标题**：Interactive-flowchart
- **原始链接**：https://github.com/cloudy-sfu/Interactive-flowchart
- **发布时间**：持续维护中

## 项目概述

Interactive Flowchart 是一个创新的开源工具，它将大型语言模型（LLM）的能力与图表生成相结合。不同于传统的图表工具需要用户手动绘制，这个项目采用对话式交互方式，让用户通过自然语言描述来生成专业级的流程图和架构图。

该项目基于 Django 框架构建，支持 Python 3.13 和 Google Gemini API。它的核心设计理念是：用户只需要描述想要创建的图表，AI 会通过追问澄清需求，最终生成符合要求的图表代码。

## 核心工作流程

### 三步生成法

项目设计了一个直观的三步工作流程，将图表生成过程分解为可管理的阶段：

**第一步：描述需求**

用户用自然语言描述想要创建的图表，例如："HTTPS 握手流程图，包含所有包类型如 RTS"。系统接受模糊、不完整或初步的想法，因为 LLM 会主动提出追问来帮助用户澄清需求。

**第二步：生成描述**

当 LLM 确认已收集足够信息后，会生成一个完整详细的图表描述。用户可以在此时审查和编辑描述，确保它准确反映需求。

**第三步：确认生成**

用户点击确认后，系统生成图表并增加版本号。用户可以在页面上预览结果，如果不满意可以继续与 LLM 讨论改进。

### 迭代优化机制

项目强调图表生成是一个迭代过程。用户无法直接编辑生成的图表，但可以通过与 LLM 对话来改进描述，重新生成获得不同结果。这种设计鼓励用户通过沟通来精确定义需求，而非手动调整图形元素。

## 技术架构

### Django 后端

项目采用 Django 作为 Web 框架，提供了完整的用户认证、会话管理和后台管理功能：

- **用户管理**：支持多用户系统，包含超级用户和普通用户角色
- **会话持久化**：对话历史和生成的图表都被保存，用户可以随时回顾
- **后台管理**：通过 Django Admin 界面管理模型配置和用户权限

### 多渲染器支持

项目的一个亮点是支持多种图表渲染格式，每种格式都有其特定用途：

**Mermaid（默认）**

Mermaid 是目前最流行的 Markdown 图表语法，支持流程图、时序图、甘特图等多种类型。它的优势在于：

- 语法简洁，易于阅读和维护
- 广泛支持，GitHub、GitLab 等平台原生渲染
- 适合技术文档和 README 文件

**Cytoscape**

专注于复杂网络图的可视化，适合展示节点关系复杂的系统：

- 强大的网络分析功能
- 支持大规模数据集
- 可交互式探索网络结构

**Graphviz**

经典的图可视化工具，使用 DOT 语言描述图结构：

- 自动布局算法成熟
- 适合层次结构明显的图表
- 支持多种输出格式

**LaTeX TikZ**

面向学术用户的专业选择：

- 与 LaTeX 文档无缝集成
- 矢量图形质量高
- 适合学术论文和出版物

**Draw.io（diagrams.net）**

流行的在线绘图工具：

- 用户熟悉度高
- 支持后续手动编辑
- 丰富的图形库

**SVG**

通用的矢量图形格式：

- 跨平台兼容性好
- 可缩放不失真
- 支持 CSS 样式定制

## 配置与部署

### 环境配置

项目使用 YAML 配置文件管理设置，主要配置项包括：

- **secret_key**：Django 应用的安全密钥
- **default_model_provider**：默认 LLM 提供商（目前仅支持 Gemini）
- **default_model_id**：主功能使用的大模型 ID
- **conv_title_model_id**：生成对话标题的小模型 ID（节省成本）
- **draw_diagram_max_retries**：图表生成失败时的重试次数

### 模型集成

项目目前主要集成 Google Gemini API，但架构设计允许使用其他兼容 Gemini API 格式的提供商。管理员通过 Django Admin 界面配置：

1. 在 "Model keys" 表中添加 API 密钥
2. 在 "USER KEY BINDS" 表中指定哪些用户可以使用该模型

这种设计实现了多租户场景下的资源管理，不同用户组可以使用不同的 API 密钥和模型配置。

## 用户体验设计

### 自动主题切换

项目根据用户浏览器设置自动切换浅色/深色主题，通过 CSS 媒体查询 `@media (prefers-color-scheme: dark)` 实现。这种设计确保图表在不同环境下都有良好的可读性。

### 多格式导出

生成的图表支持多种导出格式，适应不同使用场景：

**HTML 格式**

适合在演示文稿中使用。对于 Mermaid 和 Draw.io 格式，支持滚动查看超长图表；对于 Graphviz 和 TikZ，支持缩放和拖拽浏览。

**源代码格式**

提供完整的图表源代码，用户可以复制到官方工具中进行精细编辑。这种设计平衡了 AI 生成效率和人工精修的需求。

**图片格式（实验性）**

模拟 Chrome 浏览器的"全页截图"功能，生成静态图片。目前仅支持 Mermaid 渲染器。

## 应用场景分析

### 技术文档编写

开发者可以使用该工具快速生成系统架构图、数据流图、API 调用时序图等技术文档所需的图表。相比手动绘制，AI 辅助生成可以显著提高效率。

### 教学材料制作

教育工作者可以生成流程图、概念图等教学辅助材料。通过对话式交互，即使不熟悉特定图表工具的教师也能创建专业级的可视化内容。

### 业务流程梳理

业务分析师可以用自然语言描述业务流程，让 AI 帮助识别关键步骤和决策点，生成清晰的流程图用于团队沟通。

### 算法可视化

计算机科学学生和教师可以生成算法执行流程图、数据结构示意图等，帮助理解抽象概念。

## 技术亮点与局限

### 设计亮点

**对话式需求澄清**

项目没有假设用户能一次性提供完美需求，而是设计了多轮对话机制。LLM 会主动提问，帮助用户思考和明确需求。这种设计降低了使用门槛，特别适合图表新手。

**版本管理**

每次生成图表都会增加版本号，用户可以回顾历史版本。这种设计支持迭代优化，也方便比较不同描述的生成结果。

**模板系统**

项目提供多种图表模板，用户可以在第二步选择特定模板。这种设计既保持了灵活性，又为常见场景提供了快速起点。

### 当前局限

**模型依赖**

目前主要支持 Gemini API，虽然架构上支持其他兼容 API，但实际选择有限。这可能在数据隐私敏感场景下成为障碍。

**编辑限制**

生成后的图表无法直接编辑，必须通过修改描述重新生成。这种设计虽然鼓励清晰需求定义，但在需要微调时可能效率较低。

**图片导出限制**

图片导出功能标记为"实验性"，且仅支持 Mermaid 渲染器。对于需要高质量静态图片的场景，可能需要额外处理。

## 部署与使用建议

### 本地部署

项目适合在本地或私有服务器部署，保护敏感数据：

1. 克隆仓库并创建 Python 虚拟环境
2. 安装依赖：`pip install -r requirements.txt`
3. 运行迁移：`python manage.py migrate`
4. 创建超级用户：`python manage.py createsuperuser`
5. 启动服务：`python manage.py runserver`

### API 密钥管理

建议使用环境变量或密钥管理服务存储 API 密钥，避免硬编码在配置文件中。Django 的 `django-environ` 库可以帮助实现这一目标。

### 模型选择策略

项目支持为主功能和标题生成配置不同模型：

- **主功能**：使用能力强的模型（如 Gemini 1.5 Pro），确保图表生成质量
- **标题生成**：使用小模型（如 Gemini 1.5 Flash），降低成本

## 总结与展望

Interactive Flowchart 代表了 AI 辅助内容创作工具的一个重要方向：不是取代专业工具，而是降低使用门槛，让更多人能够创建专业级内容。

该项目的价值在于：

1. **降低学习成本**：用户无需学习特定图表语法，用自然语言即可创建图表
2. **提高迭代效率**：对话式交互比手动调整图形元素更快
3. **支持多格式输出**：一次生成，多种用途

未来发展方向可能包括：

- 支持更多 LLM 提供商（OpenAI、Anthropic、本地模型等）
- 增加实时协作功能
- 提供更多行业特定模板
- 改进图片导出质量

对于需要频繁创建图表的技术写作者、教育工作者和业务分析师来说，这是一个值得尝试的工具。