Architecture
Architecture diagram generator — system diagrams from text
Describe the parts of your system — services, data stores, queues, external APIs — and ChartCraft draws the architecture diagram: components grouped into tiers, every dependency labelled.
Prose in. Diagram out.
You type
A React SPA calls an API gateway. The gateway routes to an auth service and an orders service. Orders writes to Postgres and publishes events to Kafka; a worker consumes them and updates the search index.
ChartCraft draws
How it works
Describe it
Write what you want in plain English — no syntax to learn.
ChartCraft compiles
It parses your description, builds the structure, and runs an automatic layout.
Refine & export
Tweak with follow-up messages, then export clean SVG or PNG.
What a good architecture diagram shows
An architecture diagram answers three questions at a glance: what are the parts, how do they talk, and where are the boundaries. Everything else is decoration.
| Element | What it means |
|---|---|
| Component (box) | A deployable or logical part: a service, an app, a database, a queue. |
| Dependency (labelled arrow) | Who calls whom, and with what — HTTPS, JDBC, events. Unlabelled arrows are the #1 reason architecture diagrams confuse. |
| Tier / group (region) | A boundary: frontend, backend, data layer, third-party. Groups turn a node soup into a readable system. |
| External system (outside the boundary) | Things you depend on but don't own: payment gateways, email providers, identity. |
| Data store (cylinder-style box) | Databases, caches, object storage — where state lives. |
Architecture diagram examples
From the public examples gallery — every one produced from a plain-English description. Open one to see its prompt.
Questions
How do I make an architecture diagram from text?
List your components and how they connect — “the SPA calls the API gateway, the gateway routes to auth and orders, orders writes to Postgres”. ChartCraft parses the description, groups components into tiers, and lays out the diagram automatically.
What should a system architecture diagram include?
Every component a request can touch, every dependency between them labelled with its protocol or payload, clear tier boundaries (frontend, backend, data), and the external systems you don't own. If a box or arrow doesn't help someone reason about the system, leave it out.
Can it draw cloud architectures like AWS or Kubernetes?
Yes — describe the pieces (load balancer, pods, node groups, RDS, S3) and their connections. The examples gallery has Kubernetes, IoT, ML pipeline, and event-driven architectures generated exactly this way.
Architecture diagram vs C4 diagram — what's the difference?
C4 is a specific method for architecture diagrams: four zoom levels (context, container, component, code) with strict rules about what appears at each level. A general architecture diagram is freeform. If your audience mixes engineers and non-engineers, C4's levels help; ChartCraft draws both.
Can I export the diagram?
Yes, export to SVG or PNG with no watermark on any plan.