Drawing architecture diagrams by hand is tedious. You drag boxes around, align icons, fix arrows, and then your design changes and you do it all again. I wanted something where I could just describe an architecture in plain English — or paste an existing diagram — and get a clean, AWS-style diagram back.
This post is the story of building Diagram AI: a browser app that turns natural language and images into architecture diagrams. It runs on Vercel, uses Amazon Bedrock (Claude Haiku 4.5) for the language understanding, and renders the actual diagrams with AWS's open-source diagram-as-code tool. I'll be honest about the parts that didn't go smoothly, because that's where the real lessons were.
The core idea
The pipeline is simple to describe:
[User input: text or a diagram screenshot]
