DEV Community

yujinze
yujinze

Posted on

I Built an AI Agent That Converts Natural Language to Architecture Diagrams — Here's How It Works

I've been frustrated with drawing architecture diagrams manually. Every time I need to document a system, I open draw.io and drag boxes for 20 minutes. So I built an AI agent that does it for me — from a text description.

The Core Idea

You type: "AWS architecture with ECS, RDS, ElastiCache, and API Gateway"

You get a complete draw.io diagram, with the right shapes, labels, and layout — in about 30 seconds.

The agent loop:

User Request → Plan → Generate draw.io XML → Semantic Verification → Self-Correct (if needed) → Render
Enter fullscreen mode Exit fullscreen mode

The Secret Sauce: Semantic Verification

Most AI diagram tools are black boxes — you don't know if the output actually matches what you asked for. This system programmatically verifies the generated diagram by checking if all requested components are present in the XML output.

If a component is missing → it self-corrects and regenerates.

MCP Integration

The MCP (Model Context Protocol) server is the feature I'm most excited about. It means Claude Desktop can generate diagrams on demand, directly from conversation. No UI needed.

Supported Providers

Works with every major AI provider: OpenAI, Anthropic Claude, Gemini, DeepSeek, Ollama (fully local), AWS Bedrock, Azure OpenAI, and more.

34+ Shape Libraries

AWS, GCP, Azure, Kubernetes, UML, BPMN, flowchart primitives — you name it.

Open Source

Apache 2.0, fully self-hostable. No data leaves your browser (your API calls are between you and the provider).

Live demo: https://genai-drawio-creator.vercel.app

GitHub: https://github.com/tuoxie2046/GenAI-DrawIO-Creator


Would love feedback, especially from engineers working on cloud infrastructure!

Top comments (0)