Azure Architecture — Reladraw template

Azure 云架构. Copy the source, paste into the official playground, done. No coordinates — every position is stated relative to something else.

Preview

Source (.reladraw)

node front "Front Door"
node app "App Service"  below front
node func "Functions"  right of app
node db "Azure SQL"  below app
node blob "Blob Storage"  right of db
node ad "Entra ID"  above func
edge front -> app
edge front -> func
edge app -> db
edge func -> blob
edge ad -> app "auth"

How to use

Open the Reladraw playground
Paste the source above — the diagram re-solves live
Export SVG from the playground, or render locally: npx reladraw azure-architecture.reladraw -o out.svg

When to use this template

Azure tenant: Front Door in front of App Service and Functions, backed by SQL and Blob.. Use it in cloud proposals and architecture reviews where every managed service needs to be visible at a glance.

How to customize

Add a step or node. Insert one line: node new_id 'New label' below anchor — placement is relative, so the solver re-flows the whole diagram instantly.
Relabel an edge. Edit the text after the arrow: edge a -> b 'your label' — labels are the fastest way to carry rates, protocols or percentages.
Change reading order. Swap a placement word: below to right of rotates a branch sideways without touching any other line.

FAQ

How do I draw this in Reladraw?

Declare each box with node, connect them with edge, and state one position per node relative to another. Paste the source from this page into the official playground and it renders immediately.

Can I use this template commercially?

Yes — the source is free to copy, modify and ship in docs, READMEs, books or client decks. No attribution required.

How do I export an image?

Render in the playground and export SVG, or run it locally: npx reladraw file.reladraw -o out.svg for CI-friendly builds.

Related templates

Microservices Architecture Database ER Diagram Network Topology