Tag Archives: Web App

Azure Canvas 2.0 – Design Azure Architecture Without Leaving Your Browser

If you’ve ever sketched an Azure architecture on a whiteboard, then spent an hour translating it into JSON or Bicep by hand, Azure Canvas was built to close that gap. It’s a free, browser-based diagramming tool that lets you drag, drop, and connect real Azure resources — and then export a working infrastructure-as-code template from the diagram you just built.

Try it now: azure-canvas.com https://azure-canvas.com/

What it does

Azure Canvas gives you a visual canvas and a toolbox of Azure resources, organized into five categories:

Network & Connectivity — VNets, subnets, VMs, VPN Gateways, Public IPs, Local Network Gateways, VPN Connections, VNet Peering, NSGs, Bastion, Azure Firewall, Route Tables, NAT Gateways, Application Gateway, Load Balancer, Private Endpoints, and Private DNS Zones.

Compute & Containers — App Service, Function Apps, Container Apps, and AKS.

Data & Security — Resource Groups, Storage Accounts, Azure SQL Database, Key Vault, and Managed Identities.

Observability — Log Analytics Workspaces and Application Insights.

Messaging & Events — Service Bus and Event Grid.

Drop a VNet onto the canvas and it behaves like a real container — subnets divide it automatically, and VMs, NSGs, route tables, and NAT gateways snap inside the right subnet. Gateways, Bastion hosts, and Firewalls get their own reserved subnets, sized correctly (Bastion subnets default to `/26`, matching Azure’s actual minimum).

Built for fast iteration

A few things make Azure Canvas feel less like a static diagram tool and more like a working design surface:

Multi-select and group move — click-drag a selection box around several resources, or Shift+click to build a selection, then drag them all together to make room elsewhere.

Keyboard delete — select anything and hit Delete. Deleting a parent (a VNet, a subnet, a resource group) automatically cascades to whatever depends on it, so you never end up with orphaned references.

Arrange canvas — one click tidies resource groups, VNets, and top-level resources into a clean grid.

Change all locations — swap every resource in the diagram to a different Azure region in one action.

Load Example — generates a randomized, fully-wired sample architecture pulling from every toolbox category, useful for exploring what the tool can represent.

From diagram to deployable code

This is where Azure Canvas earns its name. Every property panel uses dropdowns for anything with a fixed set of valid Azure values — VM sizes, OS images, SKUs, runtime versions — so you can’t accidentally type an invalid configuration. Names, CIDR ranges, IP addresses, and credentials stay as free-text fields, because those genuinely need to be unique.

When you’re ready, Generate Bicep exports a deployable template built directly from your diagram — including the dependencies Azure actually requires, like App Service plans, Function App storage wiring, Container App managed environments, and Private Endpoint subnet/target relationships. Export JSON gives you a lossless copy of the whole model if you want to save or share the diagram itself.

If you sign in with your Microsoft Entra account, Azure Canvas validates your diagram against a real subscription — checking resource provider registration, region availability, VM size availability, and storage account name availability — before you ever open the Azure portal.

Everything stays where you left it

Diagrams save to your browser’s local storage (Diagram → Save/Load from browser), or export to a JSON file you can hand to a colleague or check into a repo. Nothing is uploaded to a backend by default — it’s your browser and your Azure subscription, nothing in between.

Who it’s for

Azure Canvas is aimed at anyone who thinks in diagrams before they think in code: architects sketching a new environment, engineers documenting an existing one, or anyone learning how Azure networking and compute resources actually fit together. It’s an early build, free to use, and still finding its rough edges — feedback is welcome via the About popup in the app.

Give it a try: azure-canvas.com https://azure-canvas.com/