User documentation: AI-supported diagram generator#

1. Purpose#

The AI-supported diagram generator is a tool for automatically creating technical diagrams from natural language descriptions or structured data. The system combines a chat interface with a multi-stage validation process to produce syntactically correct and visually appealing diagrams.

Basic principle: You describe the diagram you need in natural language or upload structured data. The system analyzes your input, selects the appropriate diagram type, and generates the corresponding code. An integrated validation pipeline automatically checks and corrects syntax errors before the diagram is rendered.

2. Range of functions#

Core functions:

  • Natural language diagram creation: Describe your diagram in the chat, and the system automatically selects the appropriate type
  • 12 diagram types: flowchart, mind map, organizational chart, Gantt chart, sequence diagram, swimlane, Kanban board, state diagram, ER diagram, network graph, pie chart, user journey
  • Smart data processing: Automatic recognition and conversion of various data formats (CSV, JSON, indented lists, Markdown)
  • Template library: Over 40 predefined templates for business, technical, and project diagrams
  • Code editor with undo function: Manual post-processing of generated diagrams with undo option
  • Automatic validation: Multi-level syntax checking with automatic error correction
  • Export options: Save as SVG, PNG, or source code
  • Session management: Save your work and continue later

3. Operation#

Step 1: Provide data

You have three options for entering source data:

  • Manual entry: Structured data in the left text field (e.g., indented hierarchies)
  • File upload: Upload CSV or JSON files (max. 10 MB)
  • Select template: Select a predefined template from the drop-down menu

Step 2: Describe the diagram

Use the chat field to describe the diagram you need. Examples:

  • “Create an organizational chart from the data”
  • “Show a process flow for module registration”
  • “Create a Kanban board with Backlog, In Progress, and Done”

Step 3: Selection and refinement

The system generates 1-3 diagram suggestions. You can:

  • Click on a diagram to select it for export
  • Formulate change requests in the chat: “Add another layer”
  • Manually adjust the code in the editor on the right and re-render with “Render”

Step 4: Export

Select the desired format (SVG, PNG, code) and click “Export Selected” or “Export All.”

Important controls:

  • Smart Convert: Automatically converts your input data to a format optimized for diagrams
  • Undo button: Undoes the last code change (max. 50 steps)
  • Render button: Updates the diagram preview after manual code changes
  • History gallery: Shows previous diagrams; clicking restores a diagram

Special notes:

  • File size limit: 10 MB
  • Supported formats: CSV (with comma or tab), JSON, indented lists, Markdown lists
  • For manual code changes: Click the render button; auto-rendering is disabled
  • Note Mermaid syntax: Node IDs without special characters, labels without quotation marks

4. Application example#

Initial situation:

A department wants to visualize the organizational structure for a new research group. The hierarchy is available as an indented list:

Project management
  Work package 1: Data collection
    Doctoral student A
    Student assistant
  Work package 2: Modeling
    Doctoral student B
    Postdoc
  Work package 3: Evaluation
    Doctoral student C

Procedure:

  1. Copy the list into the left data field
  2. Enter in the chat: “Create an organizational chart for the research group”
  3. The system recognizes the format and generates a hierarchical diagram
  4. Select one of the suggestions by clicking on it
  5. Optional: Customize names in the code editor (e.g., “Doctoral Student A” → “Dr.-Kand. Schmidt”)
  6. Click “Render” to apply changes
  7. Export as SVG for use in presentations

Result:

A structured organizational chart with clearly recognizable hierarchical levels that can be directly integrated into LaTeX documents or PowerPoint presentations.

5. Recommendations for efficient use#

Data preparation:

  • Use clear, consistent labels in your input data
  • For hierarchies: Indent with 2 or 4 spaces
  • For CSV: Specify column headers (“From,” “To” for relationships)
  • Use “Smart Convert” for unclean data formats

Diagram creation:

  • Start with a template and customize it
  • Formulate precise chat requests: “Create a sequence diagram for the login process with client, server, and database”
  • For complex diagrams: Refine step by step instead of all at once
  • Use the undo function when experimenting with code changes

Quality assurance:

  • Check generated diagrams for technical correctness
  • For validation errors: Let the system correct automatically (usually done without user intervention)
  • For final versions: Export as SVG (best quality and scalability)

Workflow optimization:

  • Save frequently used diagrams as templates
  • Use the session export function for longer work sessions
  • Activate the history gallery to quickly restore previous versions

6. System limitations#

The tool cannot:

  • Guarantee the technical correctness or completeness of diagram content (responsibility lies with the user)
  • Process images or handwritten sketches as input
  • Render diagrams with more than ~50 nodes/elements performantly
  • Function without an external LLM API (local installation required)
  • Automatically extract semantic relationships from unstructured continuous text

Important limitations:

  • Rendering quality depends on the installed Mermaid CLI (optional, but recommended)
  • Token limits of the LLM API limit the complexity of individual requests
  • DrawIO and Python Gantt are only experimental features (Mermaid is the main format)
  • No real-time collaboration (single-user system)
  • No version control for diagrams (manual session exports required)

7. Summary#

The AI-powered diagram generator is a tool for efficiently creating technical visualizations in academic and scientific contexts. By combining natural language input, automatic validation, and manual post-processing options, the system achieves a balance between automation and user control.

Key message: You retain technical control over the content and structure of your diagrams, while the system takes care of the technical implementation and syntax correctness. The automatic validation pipeline with a ~95% success rate significantly reduces manual correction efforts, but does not replace the user’s obligation to check the content.

Backward Chat Doc Forward