🏗️ I Vibe-Coded an Architecture Diagram Generator That Exports to .drawio — Here's What I Learned

The Challenge: Architecture Diagrams Are Tedious

Every developer knows the drill. You need to document your system architecture — maybe for a design review, an RFC, or just to explain your setup to a new team member. So you open draw.io, Excalidraw, or Lucidchart and spend 45 minutes dragging boxes, aligning arrows, fiddling with spacing.

The irony: the actual architectural thinking takes 5 minutes. "React frontend, Node API, PostgreSQL, Redis cache, behind a load balancer." You could say it in one sentence. But turning that sentence into a visual diagram takes 10x longer.

I wanted to see if I could build a tool where you just *describe* the architecture and get the diagram.

The Prompt

I used bubbling.dev to generate the app. Here's roughly what I described:

"Build an architecture diagram generator. I type a system description like 'React frontend → Node.js API → PostgreSQL database with Redis cache, behind an AWS load balancer' and it generates a visual architecture diagram. Include example descriptions the user can click to try. Add a Download .drawio button to export for editing in diagrams.net. Dark mode, indigo accent."

The AI generated a complete React application in about 3 minutes.

What Worked Surprisingly Well

**SVG rendering with typed icons.** The generated app uses 12 different SVG icon types — server, database, cloud, lambda, load balancer, queue, cache, storage, container, user, service, and a generic box. Each node in the diagram gets the right icon based on what it represents. A PostgreSQL component gets a cylinder (database icon), an AWS Lambda gets the lambda shape, etc.

**The .drawio export actually works.** This was the part I was most skeptical about. The app generates valid mxGraph XML — the format that diagrams.net uses internally. You click "Download .drawio", open the file in draw.io, and there's your diagram — fully editable. You can move nodes, change colors, add more components, and save it back.

**Arrow connections with labels.** The edges between components render as orthogonal arrows with optional labels ("REST API", "WebSocket", "gRPC"). They connect center-to-center and have proper arrowheads.

**Dark themed and clean.** The diagram renders on a dark background with indigo (#6366f1) accent color. It looks professional enough to paste into a presentation.

What Didn't Work Well

**Auto-layout is basic.** The nodes are positioned on a simple grid — x increments of 200, y increments of 150. This works for 5-8 components. Beyond that, you get a long horizontal strip or overlapping nodes. A proper force-directed graph algorithm (like dagre or elk) would fix this, but the AI didn't generate one — understandably, since that's a complex algorithm to fit in a single file.

**Component type detection is imperfect.** If you type "message broker" the AI might assign it a generic box instead of a queue icon. "API Gateway" sometimes gets a server icon instead of a load balancer. The mapping from natural language to component type is a fuzzy problem.

**Complex architectures get messy.** A microservices system with 15+ services, multiple databases, queues, and external integrations produces a diagram that's technically correct but visually overwhelming. You'd want collapsible groups, layering, or sub-diagrams for that — features that would require a lot more than a single generated file.

**No drag-and-drop editing.** The diagram is read-only in the browser. You can only edit it by downloading the .drawio file and opening in diagrams.net. For a v1, this is fine — but a production tool would need in-browser editing.

Technical Deep Dive

**How the SVG rendering works:** Each node is a `<g>` group containing a `<rect>` (rounded, dark fill, indigo stroke) and a `<svg>` sub-element with the icon path data, plus a `<text>` label. Edges are `<line>` elements with an arrowhead `<marker>` definition. The viewBox auto-calculates from the bounding box of all nodes.

**How the .drawio export works:** The app maintains a `DiagramData` object: `{ nodes: [{id, label, type, x, y, width, height}], edges: [{from, to, label, style}] }`. The `toDrawioXml()` function maps each node type to an mxGraph shape style string (e.g., database → `shape=cylinder3;whiteSpace=wrap;boundedLbl=1;size=15;`) and generates the XML with proper cell IDs, geometry, and parent-child relationships.

The generated XML is minimal but valid — it opens in diagrams.net and you can immediately start editing. Styles include dark fill (#1e1e2e), indigo stroke (#6366f1), and light text (#e2e8f0) so the diagram looks consistent with the in-browser preview.

**No dependencies:** The entire diagram tool is pure React + SVG + string templating. No mxgraph library, no D3, no charting framework. The .drawio export is just XML string concatenation.

My Takeaway: When Vibe Coding Works and When It Doesn't

This experiment taught me something about the boundaries of AI-generated apps:

**Vibe coding works great for:** Single-purpose tools with well-defined inputs and outputs. "Text in → diagram out" is a perfect prompt because the AI knows exactly what to generate.

**Vibe coding struggles with:** Interactive editors, complex algorithms (layout engines), and apps that need deep library integration. The AI can generate a diagram *viewer*, but a full diagram *editor* with drag-and-drop, snapping, and undo/redo would need a proper graphics library.

**The sweet spot is "generate + export to pro tools."** Let the AI handle the tedious first draft (parsing your description into components and connections), then hand off to draw.io for fine-tuning. You skip the worst part (starting from a blank canvas) and still get a fully editable result.

For quick architecture discussions, design doc sketches, and "let me show you how this system works" moments — a vibe-coded diagram generator gets you 80% there in 3 minutes. The last 20% (pixel-perfect layout, custom styling) happens in draw.io after export.