Draw a system diagram - architecture, workflow, sequence, data flow or lifecycle - and get back an interactive page you can pan, search, replay step by step and hand to someone as a single HTML file, an SVG or a PNG. The whole engine runs in this browser tab: the JSON you write, the description you type and even the project folder you pick are processed locally and never uploaded.
There are four ways in, and they all end in the same editable JSON. Start from a built-in example and edit it; type one line per box in the quick builder; describe the system in plain English and let a small language model running in this tab write the JSON (WebGPU needed, checked against the real schema and retried with the errors); or point the tool at a project folder - a deterministic detector reads package.json, requirements.txt and docker-compose and drafts the architecture immediately, no model required.
Prefer a chart from data instead of a system map? Use the chart maker. Want a private AI conversation with the same local-model idea? Try the private AI chat.
What you get back
The output is not a static picture. The rendered page has search, a route tracer that highlights everything upstream or downstream of a box, guided views that walk a reader through the story, a light and a dark theme, and a finite animation of the flow. The HTML download is self-contained - open it from disk with no network and everything still works - which makes it a good artifact to attach to a design review or a pull request. The SVG and PNG exports are for slides and documents.
The five diagram types
Architecture is boxes and connections on a grid - services, stores, external systems. Workflow is lanes and steps with branches, the shape for approval flows and pipelines. Sequence is participants and ordered messages, the shape for request/response protocols. Data flow follows data through transforms. Lifecycle is states and transitions. Pick the type first; the example button loads a real, working diagram of that type so you always edit from something that renders.
Honest limits
The two AI-assisted modes need WebGPU (a recent Chrome or Edge on a computer, roughly a 700 MB one-time model download) and draft architecture diagrams only - the model's JSON is schema-checked and retried up to three times, and when it still fails you are told so and the deterministic modes remain. The project analyser reads marker files, not your whole codebase: it sees frameworks, databases, queues and named services, and it drafts from that evidence - it cannot see the connections your code actually makes, so treat the draft as a starting point to edit, not an audit.
Architecture Diagram Maker
Describe a system - in JSON, in typed lines, in plain English or by pointing at the project folder itself - and get an interactive diagram rendered entirely in this browser tab. Architecture, workflow, sequence, data-flow and lifecycle shapes; pan, search, trace routes and replay the flow; export as a self-contained HTML file, SVG or PNG. Nothing you type or pick is uploaded.
Four ways to author, one pipeline
Every mode ends as JSON in the same editor, validated as you type by the engine's own schema so errors name the exact field. Example and editor is the deterministic path that works in every browser. Quick builder turns lines like API | backend | -> Database into a diagram without you writing JSON. Describe it hands your sentence to a small language model running locally on WebGPU; its JSON is schema-checked and the errors are fed back to it for up to three attempts. Analyse my project reads a folder's marker files - package.json, requirements.txt, docker-compose.yml, go.mod and friends - locally, drafts the architecture deterministically from that evidence, and optionally lets the same local model refine the draft.
The engine, and credit
Rendering is done by the diagram engine of archify (MIT), an open-source project built for coding agents, compiled here to run in the browser at a pinned version. The interactive output - guided views, route tracing, themes, animation - is archify's viewer, produced as one self-contained HTML file you can keep, mail or attach to a design document. Upstream runs as a command-line tool; this page is that engine with the file edges replaced by your browser tab, so nothing needs installing.
Privacy
The JSON, the description and the files you pick stay in this tab. The engine and the optional language model are downloaded to your browser and run there; with the models cached, the deterministic modes work offline. Recording where your diagrams end up is your business, not ours - there is no account and no server-side copy.
Frequently Asked Questions
What does the Architecture Diagram Maker do?
It turns a description of a system into an interactive diagram - architecture, workflow, sequence, data flow or lifecycle - rendered entirely in your browser. You can author the description as JSON, as one typed line per box, as a plain-English sentence handed to a local language model, or by picking a project folder whose marker files are read locally. The result exports as a self-contained interactive HTML file, an SVG or a PNG.
Is anything I type or upload sent to a server?
No. The diagram engine is downloaded to your browser and runs in this tab; the optional language model also runs in this tab on WebGPU. The project analyser reads your files with the browser's own file picker and they never leave your device. There is no account and no server-side copy of your diagrams.
How is this different from Mermaid or draw.io?
Mermaid produces static pictures from a text syntax; draw.io is a hand-drawn canvas. This page produces an interactive document - search, upstream/downstream route tracing, guided step-by-step views, themes and a replayable animation - from validated JSON, and the whole thing lands in one HTML file that works offline. It also has two ways in that neither of those offers: a local AI that writes the diagram from a description, and a project-folder analyser that drafts the architecture from your actual dependency files.
Does the AI mode need anything special?
WebGPU - in practice a recent Chrome or Edge on a computer - and a one-time model download of roughly 700 MB that the browser keeps. The model's output is checked against the diagram schema and the exact errors are fed back to it for up to three attempts; when it still fails, the tool says so plainly and the three deterministic modes remain. Machines without WebGPU simply see the AI buttons disabled with an explanation.
What exactly does the project analyser read?
Marker files: package.json, requirements.txt, pyproject.toml, go.mod, Cargo.toml, pom.xml, docker-compose files, Dockerfile, schema.prisma and similar, plus the folder names. From those it detects frameworks, databases, caches, queues and external services and drafts the architecture deterministically - no model involved unless you press refine. It cannot see the calls your code actually makes, so the draft is a starting point to edit, not an audit of your system.
What engine renders the diagrams?
The open-source archify engine (MIT licence), compiled to run in the browser at a pinned version. Upstream it is a command-line tool used by coding agents; this page replaces its file input and output with your browser tab, so the rendering behaviour and the interactive viewer are the upstream ones, unmodified.
Why JSON instead of a drawing canvas?
Because JSON diffs. A diagram that lives as validated text can sit next to the code it describes, change in the same pull request, and be regenerated identically forever. The quick builder and the AI modes exist so you rarely have to write that JSON from scratch - but every mode ends in the editor, where the schema validator names the exact field of any mistake as you type.