Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

GenAI-DrawIO-Creator: A Framework for Automated Diagram Generation

Jinze Yu, Dayuan Jiang

TL;DR

The paper addresses the challenge of turning natural language into editable, structured diagrams by introducing GenAI-DrawIO-Creator, a Claude 3.7–driven framework that outputs draw.io XML. It presents a three-layer web architecture, a specialized prompt and XML validation pipeline, and a real-time streaming user experience, along with an image-to-diagram replication capability. Key contributions include an end-to-end XML generation and verification workflow, two-phase streaming for responsiveness, and a diagram-history mechanism for iterative refinement. Experimental results across multiple diagram types show high semantic accuracy, near-perfect structural validity, and substantial speedups over manual diagram creation, highlighting practical potential for AI-assisted diagramming in software and systems engineering.

Abstract

Diagrams are crucial for communicating complex information, yet creating and modifying them remains a labor-intensive task. We present GenAI-DrawIO-Creator, a novel framework that leverages Large Language Models (LLMs) to automate diagram generation and manipulation in the structured XML format used by draw.io. Our system integrates Claude 3.7 to reason about structured visual data and produce valid diagram representations. Key contributions include a high-level system design enabling real-time diagram updates, specialized prompt engineering and error-checking to ensure well-formed XML outputs. We demonstrate a working prototype capable of generating accurate diagrams (such as network architectures and flowcharts) from natural language or code, and even replicating diagrams from images. Simulated evaluations show that our approach significantly reduces diagram creation time and produces outputs with high structural fidelity. Our results highlight the promise of Claude 3.7 in handling structured visual reasoning tasks and lay the groundwork for future research in AI-assisted diagramming applications.

GenAI-DrawIO-Creator: A Framework for Automated Diagram Generation

TL;DR

The paper addresses the challenge of turning natural language into editable, structured diagrams by introducing GenAI-DrawIO-Creator, a Claude 3.7–driven framework that outputs draw.io XML. It presents a three-layer web architecture, a specialized prompt and XML validation pipeline, and a real-time streaming user experience, along with an image-to-diagram replication capability. Key contributions include an end-to-end XML generation and verification workflow, two-phase streaming for responsiveness, and a diagram-history mechanism for iterative refinement. Experimental results across multiple diagram types show high semantic accuracy, near-perfect structural validity, and substantial speedups over manual diagram creation, highlighting practical potential for AI-assisted diagramming in software and systems engineering.

Abstract

Diagrams are crucial for communicating complex information, yet creating and modifying them remains a labor-intensive task. We present GenAI-DrawIO-Creator, a novel framework that leverages Large Language Models (LLMs) to automate diagram generation and manipulation in the structured XML format used by draw.io. Our system integrates Claude 3.7 to reason about structured visual data and produce valid diagram representations. Key contributions include a high-level system design enabling real-time diagram updates, specialized prompt engineering and error-checking to ensure well-formed XML outputs. We demonstrate a working prototype capable of generating accurate diagrams (such as network architectures and flowcharts) from natural language or code, and even replicating diagrams from images. Simulated evaluations show that our approach significantly reduces diagram creation time and produces outputs with high structural fidelity. Our results highlight the promise of Claude 3.7 in handling structured visual reasoning tasks and lay the groundwork for future research in AI-assisted diagramming applications.
Paper Structure (16 sections, 1 figure)

This paper contains 16 sections, 1 figure.

Table of Contents

  1. Introduction
  2. Related Work
  3. Large Language Models for Structured Output
  4. Diagram Generation Approaches
  5. Multimodal and Interactive Approaches
  6. Methodology
  7. System Architecture
  8. Optimized XML Generation and Validation
  9. Real-Time Streaming and User Experience
  10. Image-Based Diagram Replication
  11. System Prompt Design and Few-Shot Guidance
  12. Output Verification and Diagram History
  13. Experiments
  14. Experimental Setup
  15. Performance Results
  16. ...and 1 more sections

Figures (1)

  • Figure 1: System Architecture of GenAI-DrawIO-Creator: Three-layer design with (1) Front-end Layer (Next.js components for UI), (2) Integration Layer (API routes and XML validation), and (3) External Services Layer (Claude 3.7 and draw.io engine). User inputs flow to Claude 3.7, which generates diagram XML that is validated and rendered, with version history supporting iterative refinement.