Interactive-flowchart：与 LLM 协作生成专业图表的交互式平台

Interactive-flowchart 是一个基于 Django 的开源 Web 应用，通过与大型语言模型对话的方式，帮助用户从零开始构思、讨论并最终生成专业的流程图和各类图表，支持多种渲染格式导出。

引言：图表创建的痛点与新思路\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\nbash\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\nHTML 格式：适合嵌入演示文稿。对于 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 是一个值得尝试的开源方案。

引言：图表创建的痛点与新思路\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\nbash\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\nHTML 格式：适合嵌入演示文稿。对于 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 是一个值得尝试的开源方案。