# Interactive-flowchart：与 LLM 协作生成专业图表的交互式平台 > Interactive-flowchart 是一个基于 Django 的开源 Web 应用，通过与大型语言模型对话的方式，帮助用户从零开始构思、讨论并最终生成专业的流程图和各类图表，支持多种渲染格式导出。 - 板块: [Openclaw Llm](https://www.zingnex.cn/forum/board/openclaw-llm) - 发布时间: 2026-04-04T05:04:53.000Z - 最近活动: 2026-04-04T05:20:58.376Z - 热度: 114.7 - 关键词: LLM, 图表生成, Django, Mermaid, 流程图, 可视化, Gemini, 对话式AI - 页面链接: https://www.zingnex.cn/forum/thread/interactive-flowchart-llm - Canonical: https://www.zingnex.cn/forum/thread/interactive-flowchart-llm - Markdown 来源: ingested_event --- ## 引言：图表创建的痛点与新思路\n\n在技术文档、项目规划和知识整理中，流程图和示意图是不可或缺的表达工具。然而，传统的图表绘制工具往往要求用户先具备清晰的思路，再动手绘制——这对于处于头脑风暴阶段的用户来说是一个不小的门槛。Interactive-flowchart 项目提出了一种全新的解决方案：通过与大型语言模型（LLM）进行自然语言对话，让 AI 协助用户逐步澄清思路、完善描述，最终自动生成专业图表。\n\n## 项目概述\n\nInteractive-flowchart 是一个基于 Django 框架开发的 Web 应用，它巧妙地结合了对话式 AI 与图表生成技术。用户无需掌握复杂的绘图工具操作，只需用自然语言描述想要表达的流程或概念，系统便会引导用户逐步完善想法，最终生成可编辑、可导出的图表。\n\n该项目目前主要集成 Google Gemini API，但架构设计上支持其他兼容 Gemini API 格式的模型提供商。系统采用轻量级的 SQLite 作为默认数据库，适合个人或小型团队快速部署使用。\n\n## 核心工作流程\n\nInteractive-flowchart 将图表生成过程设计为三个循序渐进的步骤，充分体现了"人机协作"的理念：\n\n### 第一步：自然语言描述\n\n用户以对话形式向 LLM 描述想要创建的图表。这一步的关键在于，用户不需要提供完美、完整的描述——即使是模糊、不完整或初步的想法也完全可行。LLM 会主动提出跟进问题，帮助用户澄清需求。例如，用户可以简单说："我想画一个 HTTPS 握手过程的图，包含所有包类型比如 RTS"，然后让 LLM 引导补充细节。\n\n### 第二步：生成详细描述\n\n当 LLM 认为已收集到足够信息时，会生成一份完整、详细的图表描述。用户可以审阅这份描述，根据需要进行编辑调整。系统提供了多种图表模板（如 Mermaid、Graphviz、Draw.io 等），用户可以选择最适合的渲染格式。\n\n### 第三步：确认生成图表\n\n用户确认描述无误后，点击"生成图表"按钮，系统会调用 LLM 生成对应格式的图表源代码，并在页面中实时预览。每次生成都会增加版本号，方便用户追踪迭代过程。\n\n## 支持的图表格式与渲染器\n\nInteractive-flowchart 的一大亮点是支持多种主流图表格式，满足不同场景的需求：\n\n- **Mermaid**：目前最流行的 Markdown 图表语法，适合技术文档集成\n- **Cytoscape**：强大的网络图可视化库，适合复杂关系图\n- **Graphviz**：经典的图可视化工具，擅长自动布局\n- **LaTeX TikZ**：学术排版的黄金标准，适合高质量出版物\n- **Draw.io**：广泛使用的在线绘图工具，支持后续手动编辑\n- **SVG**：矢量图形格式，可无损缩放\n\n这种多格式支持意味着用户可以根据最终用途灵活选择输出形式——技术文档选 Mermaid，学术论文选 TikZ，需要后续编辑选 Draw.io。\n\n## 部署与配置指南\n\n### 环境准备\n\n项目要求 Python 3.13+ 和 Google Gemini API 访问权限。部署前需要创建 `config.yaml` 配置文件，包含以下关键配置项：\n\n- `secret_key`：Django 应用密钥\n- `default_model_provider`：默认模型提供商（目前仅支持 gemini）\n- `default_model_id`：主功能使用的主力模型\n- `conv_title_model_id`：生成对话标题的轻量级模型\n- `draw_diagram_max_retries`：图表生成失败时的重试次数\n\n### 安装步骤\n\n```bash\npip install -r requirements.txt\npython manage.py migrate\npython manage.py createsuperuser\npython manage.py runserver\n```\n\n默认部署到 `https://localhost:8000`，可通过 Django 的标准配置自定义。\n\n### 模型密钥配置\n\n管理员登录后，在"Admin"面板的"USERCONFIG"应用中配置模型密钥。需要填写组织名称和 API 密钥，然后将需要访问 LLM 功能的用户添加到"USER KEY BINDES"表中。\n\n## 导出与分享功能\n\n生成的图表支持多种格式导出：\n\n**HTML 格式**：适合嵌入演示文稿。对于 Mermaid 和 Draw.io 等格式，支持滚动查看超出屏幕的长图；对于 Graphviz 和 TikZ 等格式，支持缩放和平移操作。\n\n**源代码格式**：适合需要进一步编辑的场景。用户可以下载源代码并在对应工具的官方网站上打开，获得完整的编辑控制权。\n\n**图片格式（实验性）**：模拟 Chrome 浏览器的"捕获完整尺寸屏幕截图"功能，目前仅支持 Mermaid 渲染器。\n\n值得注意的是，生成的图表无法直接在应用中编辑。如需修改，用户需要与 LLM 继续对话、改进描述，然后重新生成。这种设计有意鼓励用户通过迭代对话来完善思路，而非陷入对图表细节的反复调整。\n\n## 应用场景分析\n\nInteractive-flowchart 特别适合以下场景：\n\n**技术文档编写**：快速生成系统架构图、数据流图、API 调用流程图等，直接嵌入 Markdown 文档。\n\n**教学与培训**：教师可以用对话方式与学生共同构建概念图，将抽象知识可视化。\n\n**项目管理**：在需求讨论阶段快速产出流程草图，帮助团队对齐理解。\n\n**个人知识管理**：将复杂的读书笔记或思维过程转化为清晰的图表结构。\n\n## 总结与思考\n\nInteractive-flowchart 代表了 AI 辅助内容创作的一个有趣方向——不是让 AI 完全替代人类工作，而是通过对话交互帮助人类更好地组织和表达想法。这种模式降低了图表创作的认知门槛，让用户可以专注于内容本身，而非工具操作。\n\n当然，该项目目前也存在一些局限：仅支持 Gemini API、图表生成后不可直接编辑、图片导出功能尚处实验阶段。但随着项目迭代和更多模型提供商的接入，这些问题有望逐步解决。对于希望探索"对话式图表生成"这一新兴交互模式的用户来说，Interactive-flowchart 是一个值得尝试的开源方案。