Architecture diagram tool

Draw how a system fits together: clients, APIs, load balancers, services, databases and caches, joined by labelled arrows. It opens with a small web application to change into yours, and exports to PNG or SVG for documents and slides.

What goes in an architecture diagram

Usually the parts that run (clients, services, functions), where data lives (databases, caches, file storage), what sits between them (API gateway, load balancer, queue, CDN), and the outside world (users, third-party systems). The architecture icons cover these, from API and load balancer to firewall, CDN, secrets and monitoring.

Containers group shapes into boundaries, such as a network, a cloud account or a team's part of the system, and move everything inside them along.

Show one level at a time

A diagram that shows everything is hard to read. A common approach, the C4 model, uses one diagram for the system and what surrounds it, one for the applications and data stores inside it, and more detailed ones only where they help. Keep each in a tab of its own, and duplicate a diagram from "All diagrams" to start the next level from it.

Label the connections

Say what each arrow carries ("REST", "SQL", "events") and point it the way requests go. A connector's type tells a call (solid line) from an asynchronous message (dashed line), so the diagram shows what waits on what.

Questions

Which icons are included?

Around 35 architecture icons (client, API, load balancer, server, database, cache, queue, CDN, firewall, function, storage and more), the basic shapes, and logos of common technologies such as PostgreSQL, Redis, Kafka, NGINX and Kubernetes.

Can I draw AWS, Azure or Google Cloud diagrams?

There are no cloud provider icon sets yet. The general icons and a few service badges (S3, SQS, SNS, DynamoDB, API Gateway, Pub/Sub) cover most diagrams; label the shapes with the services they stand for.

How do I put the diagram in documentation?

Export it as SVG, which stays sharp at any size, or as PNG; or copy it as an image and paste it straight into a document or wiki page.