Architecture Canvas
Build a diagram from components and connections — on the canvas or in a list — check it against published rules and export it to Mermaid, SVG, Markdown or PDF. Everything runs in your browser; the diagram and its versions stay with you.
Free, no sign-up
The diagram is empty: add a component from the palette, choose a template or load the example.
Drag components with a mouse or finger; drag the background to pan; Ctrl or ⌘ + wheel to zoom. Keyboard: Tab to reach components, arrows move the selected one (Shift for bigger steps), Enter opens properties, Delete removes. The full editor without the canvas is the “Components and connections” tab.
The diagram is stored only in this browser. Check rules v1.0, 2026-10-13.
How the tool works
Components
15 types: web client, mobile app, admin panel, API gateway, backend service, worker, queue, auth provider, SQL and NoSQL databases, cache, search, object storage, external API, monitoring. Each type has its own outline and icon.
Connections
An arrow goes from the caller to the callee; for a queue it is producer → queue → consumer. Each connection has a protocol (HTTP/REST, GraphQL, gRPC, SQL / DB driver, Events / pub-sub, Webhook, WebSocket, File transfer), a mode (sync or async), an auth flag and a description.
Checks
16 rules look at the shape of the graph: a client talking to a database directly, shared databases, synchronous call cycles, public services without auth, sensitive data without backups and more. Each finding is highlighted on the diagram.
Versions and export
Save a version before changes and compare it with the current diagram: components and connections added, removed and changed, by name. Export a Markdown document, Mermaid, SVG, JSON, and PDF via print.
The canvas works with a mouse, touch and the keyboard: Tab moves between components, arrows move the selected one (Shift for bigger steps), Enter opens properties, Delete removes after confirmation. The full editor without the canvas is the “Components and connections” tab — the primary one on phones and with a screen reader.
Check rules
The table is generated from the same code as the checks — rules v1.0, 2026-10-13. The level is a review priority, not a risk rating of your product.
AC-01 · Node without connections
- Level
- Medium
- When it fires
- A component has no connections at all (except monitoring, often drawn without arrows)
- Why it matters
- Either the diagram is incomplete or the component is redundant — a reader cannot tell why it exists.
- What to do
- Add its connections or remove it.
AC-02 · Connection to itself
- Level
- High
- When it fires
- A connection has the same source and target
- Why it matters
- Usually a typo; internal calls are not shown on a component diagram.
- What to do
- Delete the connection or pick another target.
AC-03 · Duplicate connection
- Level
- Low
- When it fires
- Two connections share source, target and protocol
- Why it matters
- Duplicates clutter the diagram and confuse dependency counts.
- What to do
- Keep one connection and merge the descriptions.
AC-04 · Client talks to a database directly
- Level
- High
- When it fires
- A connection from a web client, mobile app or admin panel to an SQL/NoSQL database
- Why it matters
- Database credentials end up on the client, and permission and business-rule checks are not on the server. The exception is a platform with row-level access rules; then show its API as a separate backend node.
- What to do
- Route the access through a backend service or API.
AC-05 · Database shared by several services
- Level
- Medium
- When it fires
- Two or more services or workers write to one database (connections not marked read-only)
- Why it matters
- The schema becomes a shared contract: a change for one service can break another. For a monolith with a worker this is often a deliberate choice.
- What to do
- Assign a data owner; others go through its API or events, or mark their connections read-only.
AC-06 · Public service without auth
- Level
- High
- When it fires
- A public backend or gateway: no inbound connection requires auth, and there is no auth provider on the diagram
- Why it matters
- The diagram does not show who checks access to a service exposed to the internet, or how.
- What to do
- Mark the connections that require auth or add an auth provider; if the service is open on purpose, say so in its notes.
AC-07 · Synchronous call cycle
- Level
- High
- When it fires
- Services call each other synchronously in a loop (A → B → … → A)
- Why it matters
- A failure or slowdown in one service cascades to the others; such loops are hard to deploy independently.
- What to do
- Break the loop: make one call asynchronous (an event) or extract the shared logic.
AC-08 · Client calls an external API with a secret
- Level
- High
- When it fires
- A synchronous connection from a client to an external integration that requires auth
- Why it matters
- The external API key would ship in client code, where it can be extracted.
- What to do
- Call the external API through your backend (a proxy) and keep the key on the server.
AC-09 · Queue without a producer or consumer
- Level
- Medium
- When it fires
- Nobody writes to the queue (no inbound connections) or nobody reads from it (no outbound ones)
- Why it matters
- Messages either never appear or pile up unprocessed.
- What to do
- Show the producer (service → queue) and the consumer (queue → worker or service).
AC-10 · Sensitive data without backups
- Level
- High
- When it fires
- A database or file store holds personal or payment data, and backups are not described
- Why it matters
- Losing such data means downtime and obligations to customers and regulators.
- What to do
- Describe backups and restore testing, then tick “backups described”.
AC-11 · No monitoring
- Level
- Medium
- When it fires
- There are three or more services (backends, gateways, workers) and no monitoring and logs node
- Why it matters
- With several services and no shared logs and metrics, failures are hunted blind.
- What to do
- Add a monitoring and logs node and show which services report to it.
AC-12 · Duplicate names
- Level
- Medium
- When it fires
- Two components share a name (case-insensitive)
- Why it matters
- Neither the diagram nor the export can tell them apart.
- What to do
- Make the names specific, for example by purpose or environment.
AC-13 · Worker without inputs
- Level
- Low
- When it fires
- A worker has no inbound connections
- Why it matters
- It is unclear where the worker gets its work. For a scheduled (cron) job this is fine.
- What to do
- Show the queue or service that gives it work, or state the schedule in technology or notes.
AC-14 · Gateway routes nowhere
- Level
- Medium
- When it fires
- An API gateway has connections but none outbound
- Why it matters
- A gateway exists to route requests to services.
- What to do
- Show the services the gateway routes to.
AC-15 · Nobody uses the data store
- Level
- Medium
- When it fires
- A database, cache, search engine or file store has only outbound connections
- Why it matters
- Data stores rarely initiate calls; the connection direction is probably reversed.
- What to do
- Check the direction: the arrow goes from the caller to the store.
AC-16 · Client calls nothing
- Level
- Low
- When it fires
- A client has connections but none outbound
- Why it matters
- Clients usually initiate calls; the direction may be reversed (push notifications are fine).
- What to do
- Check the arrow directions from the client.
Web client
- Auto-layout layer
- 1 — clients
- Specific properties
- —
Mobile app
- Auto-layout layer
- 1 — clients
- Specific properties
- —
Admin panel
- Auto-layout layer
- 1 — clients
- Specific properties
- —
API gateway
- Auto-layout layer
- 2 — gateway and auth
- Specific properties
- exposure
Backend service
- Auto-layout layer
- 3 — services
- Specific properties
- exposure
Worker / cron
- Auto-layout layer
- 4 — queues and workers
- Specific properties
- exposure
Queue / event broker
- Auto-layout layer
- 4 — queues and workers
- Specific properties
- exposure
Auth provider
- Auto-layout layer
- 2 — gateway and auth
- Specific properties
- exposure
SQL database
- Auto-layout layer
- 5 — data stores and external APIs
- Specific properties
- exposure, data sensitivity, backups
NoSQL database
- Auto-layout layer
- 5 — data stores and external APIs
- Specific properties
- exposure, data sensitivity, backups
Cache
- Auto-layout layer
- 5 — data stores and external APIs
- Specific properties
- exposure, data sensitivity
Search engine
- Auto-layout layer
- 5 — data stores and external APIs
- Specific properties
- exposure, data sensitivity
Object storage / CDN
- Auto-layout layer
- 5 — data stores and external APIs
- Specific properties
- exposure, data sensitivity, backups
External integration / API
- Auto-layout layer
- 5 — data stores and external APIs
- Specific properties
- exposure
Monitoring and logs
- Auto-layout layer
- 5 — data stores and external APIs
- Specific properties
- exposure
Limitations
- The tool sees only what is drawn: it does not assess load, latency, infrastructure cost, fault tolerance or legal compliance.
- “Requires auth” and “backups described” are your own statements; the tool does not verify they are actually in place.
- Arrow direction follows the “caller → callee” convention. Drawn the other way, some rules (queues, stores without inbound connections) will raise false findings.
- The diagram is designed for dozens of components (up to 150); split larger systems into several diagrams by context.
- Version comparison covers components, connections and their properties; moves on the canvas are counted separately and do not change meaning.
Privacy
- The diagram is built and checked in your browser: the tool itself does not send names, technologies or notes to a server, and they never appear in the page address.
- The draft and versions are stored only in this browser (localStorage); “Clear all” deletes them. Export files are created on your device.
- Before export the tool warns you if the notes look like a password or an API key.
- Analytics receives only the fact of a check (whether there are findings, by category) and the export format — not the diagram’s content.
- The result reaches us only if you send a request yourself and keep the “Attach the result” box ticked — the form shows exactly what will be sent.
Related tools
All tools · 40
Idea → Product blueprintAn interview about your idea → roles, features, three MVP scope options, priorities and risks. You get a Product Blueprint to start development from.
MVP complexity estimateProduct type, platforms, modules and integrations → a complexity band, workstreams and the questions you need answered before any honest price.
Scope and cost calculatorModules, effort, your rates, complexity factors, dependencies and a risk reserve → a cost and timeline range with every number explained, plus estimate comparison.
Technical brief generatorBuild a brief step by step: goal, roles, scenarios, integrations, data, acceptance criteria. You get Markdown to copy or download.
Requirements interviewerAn adaptive client interview → roles and permissions, functional and non-functional requirements, conflicts, acceptance criteria and an approved baseline with sources.
Tech Stack AdvisorCompare technologies within one layer by product fit, team experience, maintenance cost, performance and security — with hard constraints, the conditions that change the answer, and an ADR export.Want an engineer to review the architecture?
A technical consultation is a paid engineering review of the diagram, its risks and next steps. The first short conversation about the format is free; the cost is set after a brief and an agreed scope.
- The first short conversation is free — we choose the format
- NDA — yours or ours
- Pricing after a brief and an agreed scope