Interactive Flowchart: Collaborate with AI to Generate Interactive Diagrams

Interactive Flowchart is an open-source Django-based tool that collaborates with large language models (LLMs) via conversational interaction to generate various diagrams such as flowcharts and architecture diagrams. It supports six rendering formats including Mermaid, Graphviz, and Draw.io. The core process uses a three-step generation method and supports iterative optimization, aiming to lower the threshold for diagram creation, improve efficiency, and is suitable for scenarios like technical documentation and teaching materials.

Original Author/Maintainer: cloudy-sfu Source Platform: GitHub Original Link: https://github.com/cloudy-sfu/Interactive-flowchart Traditional diagram tools require manual drawing and have a high learning curve. This project simplifies the generation process through LLM conversational interaction, allowing users to create professional diagrams without needing professional syntax.

The core workflow consists of three steps:

1. Describe Requirements: Users describe diagram requirements in natural language, and the LLM proactively asks questions to clarify;
2. Generate Description: The LLM generates a detailed diagram description, which users can review and edit;
3. Confirm Generation: After user confirmation, the diagram is generated and a version number is added. Iteration Mechanism: Users cannot edit diagrams directly, but can improve the description through dialogue to regenerate, and version history review is supported.

Django Backend: Provides user authentication, session management, and backend management functions (multi-user roles, conversation history saving, Admin interface). Multi-Renderer Support:

• Mermaid (default): Concise syntax, widely supported;
• Cytoscape: Complex network diagram visualization;
• Graphviz: Classic automatic layout;
• LaTeX TikZ: Adapted for academic papers;
• Draw.io: Supports manual editing;
• SVG: Cross-platform vector format.

User Experience: Automatically switches between light/dark themes (based on browser settings); supports HTML, source code, and experimental image export. Application Scenarios:

• Technical document writing (architecture diagrams, data flow diagrams);
• Teaching material creation (flowcharts, concept maps);
• Business process sorting (decision point identification);
• Algorithm visualization (execution flow, data structures).

Technical Highlights:

• Conversational requirement clarification: LLM proactively asks questions to help users clarify requirements;
• Version management: Each generation adds a version, allowing history review;
• Template system: Provides multiple templates for quick start. Current Limitations:
• Model dependency: Mainly supports Gemini API;
• Editing restrictions: Cannot edit diagrams directly, need to regenerate;
• Image export: Only Mermaid supports experimental export.

Local Deployment Steps:

1. Clone the repository and create a virtual environment;
2. Install dependencies: pip install -r requirements.txt;
3. Run migrations: python manage.py migrate;
4. Create a superuser: python manage.py createsuperuser;
5. Start the service: python manage.py runserver. Recommendations: Use environment variables to manage API keys; use strong models (e.g., Gemini 1.5 Pro) for main functions and small models (e.g., Gemini 1.5 Flash) for title generation to reduce costs.

The value of this tool lies in lowering the threshold for diagram creation, improving iteration efficiency, and supporting multi-format output. Future directions include supporting more LLM providers (OpenAI, local models, etc.), real-time collaboration, industry-specific templates, and improving image export quality. It is suitable for technical writers, educators, and business analysts to try.