Design Beaver v2: the fix our own canvas couldn't draw

Design Beaver has an opinion about single EC2 instances. Draw one serving production traffic with no Auto Scaling group and no load balancer in front of it. The tool tells you what to do instead: put instances in an Auto Scaling group across multiple AZs, fronted by an ALB (or NLB) or CloudFront.

Good advice. Until this release, you couldn’t draw it.

There was no Availability Zone on the canvas and no Auto Scaling group. The tool named a fix, then handed you a canvas that couldn’t express it and a validator that couldn’t check whether you’d applied it. That’s the worst shape a validation rule can take: a lecture with no mechanism behind it.

v2 fixes that, along with the other thing we got wrong in v1.

An Availability Zone is a layer, not a text field

We’d already decided this one, in the opposite direction. When we built VPC and subnet containers, we deliberately stopped nesting at two levels and made the zone a config field on the subnet. Fewer layers, less drag-and-drop ambiguity, and the zone still readable on the node.

That call was right on its own terms and wrong the moment Auto Scaling arrived. A text field can tell you which zone a subnet is in. It can’t show a reader two zones at once, and “two zones at once” is the entire point of the advice above. So the zone is now a real container: VPC, then AZ, then subnet, then your services.

An Auto Scaling group is the interesting part, because it is not another nesting level.

A real group spans subnets and zones. A node on our canvas has exactly one parent, and its subnet has already claimed it. Make the group a fourth level of containment and “one group across two AZs” becomes structurally impossible to express — the precise shape the whole change exists to enable. So group membership runs alongside containment rather than inside it. An instance sits in a subnet and belongs to a group, and the group is free to stretch across zones.

With the shape drawable, the rule behind it becomes real. Put every instance of a group in one zone and Design Beaver now says this:

Every instance in this Auto Scaling group is in us-east-1a. A subnet sits entirely within one Availability Zone, so a single-zone group has nowhere to launch replacements if that zone fails. Put instances in an Auto Scaling group across multiple AZs, fronted by an ALB (or NLB) or CloudFront.

That last sentence is the same prescription from the top of this post. The warning pulls it from the same file rather than retyping it, so the two can’t drift apart. AWS treats this as enough of a mistake to ship a Config rule for it, autoscaling-multiple-az.

This is the part generic tools structurally can’t do. In draw.io you can draw the same picture — a labelled rectangle around two instance icons — and it’s a rectangle. It has no idea it represents a group, which zones its contents are in, or that one zone is a problem. Cloudcraft knows AWS well enough to price what you’ve drawn. It will happily total up the monthly cost of a single-zone group without mentioning that the group is the flaw.

The rule also knows when to stay quiet. An empty group boundary is work in progress, not an error. A group whose instances aren’t placed in zones yet gets no warning either, because there’s nothing to judge. A validator that fires on an unfinished diagram trains you to ignore it.

The other thing we got wrong: no accounts

v1 kept your diagrams in your browser. No sign-in, no server, nothing to create. We framed that as respect for your time, and it reads well on a landing page.

Then we watched what happened. Roughly 40 to 50 people opened the tool in the weeks after launch. Six or seven came back at least once. Nobody stuck.

A diagram that lives in one browser’s storage isn’t something you return to. It’s on one machine. It’s gone if you clear site data. You can’t send it to the person reviewing the design, which is most of why anyone draws architecture in the first place. “No account” wasn’t respect for your time. It was a tool that couldn’t hold onto your work, described generously.

So v2 has accounts. Sign in with Google or GitHub, and your diagrams live in Postgres instead of your browser. Each one has its own URL. There’s a dashboard listing them, sorted by what you edited last. Row-level security scopes every row to its owner, so a diagram is readable by exactly one account. The free tier holds 5.

This is friction we added on purpose, and it’s a real trade: some people will bounce at a sign-in screen who would have drawn a box. We’d still rather have a tool worth coming back to.

Every problem in the diagram, in one list

Design Beaver validates as you draw, which only helps if you can see what it found. In v1, a finding attached itself to the edge or node you’d just touched. That works beautifully on the fifth box. It works poorly on the thirtieth, when the thing you got wrong sits two screens to the left and you have no reason to look.

The Problems panel lists every error, warning and note in the whole diagram, sorted by severity. Click a row and the canvas selects the offending node or edge and brings it into view. A clean diagram says “All checks passed” rather than going quiet, which is a different message from a diagram that has never been checked.

Nothing new is validated here. It’s the same rules the canvas already ran, finally legible in one place.

The rest of it

• Search in the service palette. Press / and type. It matches descriptions as well as names, so “cdn” finds CloudFront and “queue” finds SQS without a hand-maintained list of aliases. Enter drops the top hit onto the canvas.
• Copy, paste, duplicate. Ctrl/Cmd+C, V and D on a selection, with the edges between selected nodes carried along. Undo history went from 5 steps to 50.
• PNG export rebuilt. It rasterizes the same SVG the SVG export produces, so text stays sharp at any scale instead of arriving as a screenshot of the canvas. Exported edges keep their validation color, so the PNG in your design doc shows the same red and amber the canvas showed you.
• Account settings and self-serve deletion. Our privacy policy promised deletion on request, which used to mean me running SQL by hand. Now it’s a button.
• A feedback button in the toolbar, which lands in my inbox.

If a rule is wrong, the fix is a file

The Auto Scaling story above is the whole method in miniature. The advice came from ec2.yaml, a plain-text file that says what an EC2 instance connects to, what each connection needs, and which patterns to avoid and why. It was correct and grounded in AWS documentation. The canvas just couldn’t keep up with it, and the gap was visible in the file long before it was visible in the product.

That’s the trade we make by keeping rules out of application code. You can point at a claim and argue with it. So if Design Beaver flags something it shouldn’t, or waves through something it shouldn’t, tell me — through the feedback button or wherever you find me. The fix is usually one file, and it ships to everyone.

Design Beaver is free while it’s in beta. Sign in with Google or GitHub and your diagrams save to your account. It runs in any browser, phone included — a big screen is still the best place to build a diagram, but reviewing and annotating one works fine in your hand.