Free online tool

Architecture Documentation Builder

Make a system architecture document with Mermaid diagrams and notes. Download one HTML guide or a bundle of diagrams.

Works on your deviceNo account neededProject JSON / HTML / Mermaid / SVG / PNG / ZIPOpen workspace ↓

How can I keep architecture diagrams and their explanations together?

Create named diagrams for different views of your system, write explanatory notes, and arrange them in a documentation project. Render Mermaid flowcharts, sequences, entity relationships and other supported diagrams. Save the editable project, or export a standalone HTML document and a ZIP containing diagrams, notes and original source.

Explain the whole system.

On your device

System overview

Awaiting render

The website sends booking requests to the API. Background work has its own processing boundary.

Render the source to preview this diagram. Plain notes are included in the exported documentation.

Take the documentation with you.

Render all diagrams to export the complete document.

Three simple steps

How to use Architecture Documentation Builder

  1. Create named diagrams or open an editable documentation project.

  2. Write notes, edit Mermaid source, arrange the document and render every diagram.

  3. Save the project or export standalone HTML, individual diagrams or a complete source-and-image ZIP.

Common questions

Good to know

Understand the result.
Keep the original.

Is this tool free, and are my files uploaded?

This tool is free with no account required. The work happens in your browser. Your input and files are not sent to a processing server.

What are the limits and details?

Projects are local downloaded files; cloud storage and live collaboration are not included. Diagram source must be local Mermaid syntax without HTML, configuration directives, embedded images or resource URLs. Plain reference URLs can be written in the notes. Mermaid renders on this device; stopping a batch takes effect after its current diagram finishes.

Limits: 12 diagrams, 250 KB per project, 16,000 source characters and 300 lines per diagram. Individual renders are limited to 500 edges. PNG exports are bounded to eight megapixels.