Architecture Builder

The Architecture Builder draws how your system fits together: which devices, gateways, functions, queues, storage and databases a request touches, and where they live (cloud, region, VPC, subnet).

Features

1,100+ components: official AWS, Azure and Google Cloud icons, Kubernetes and tech logos, and generic building blocks (users, devices, queues, databases)
Containers for clouds, accounts, regions, availability zones, VPCs, public and private subnets, security groups and clusters, with drag-in nesting
Drawing toolbar: 12 shapes, free-standing arrows and lines with five arrowhead styles, dashed/dotted strokes and widths, freehand pen, text, sticky notes, frames and comments
Connectors with labels, protocols, arrows, dashed lines and animated data flow
Align, distribute, group, lock, layers, undo/redo, copy/paste and keyboard shortcuts
Request-flow playback: trace or record the path a request takes and play it hop by hop with timings
Diagrams from Terraform, CloudFormation, Kubernetes YAML, docker-compose and Mermaid, laid out automatically
Architecture checks, version history with compare, and share links
Templates, hand-drawn style, find on canvas and a full-screen presentation mode (one slide per frame)
Export to PNG, SVG (vector, dark or light), PDF and JSON; import draw.io and Excalidraw files; multiple diagrams saved in your browser

How to use it

Drag components from the library onto the canvas (or click to add).
Drop them into containers such as a VPC or subnet, and drag between the dots to connect them.
Label the connections, turn on data flow, and export to PNG or SVG.

FAQ

Is it free and private?

Yes. Diagrams are stored only in your browser; nothing is uploaded. Export a JSON file to back up or share a diagram.

Which cloud providers are supported?

AWS, Microsoft Azure and Google Cloud with their official architecture icons, plus Kubernetes, databases, message brokers and other technology logos, and generic shapes for anything else.

Can I export my diagram?

Yes: PNG, SVG and PDF in a dark or light theme (SVG is real vector output, not a screenshot), and JSON that you can import again later. You can also export just the selection or a single frame.

Can it draw my infrastructure from code?

Yes. Paste Terraform, a CloudFormation or SAM template, Kubernetes manifests, a docker-compose file or a Mermaid flowchart: components get their official icons, VPCs, subnets and namespaces become containers, and connections are drawn and laid out for you, all in your browser.

Can I open my draw.io or Excalidraw diagrams?

Yes. Import .drawio files (compressed or not; AWS, Azure and Google Cloud shapes become the matching official icons) and .excalidraw files (shapes, text, arrows, freehand and frames).

More developer tools

API Studio

Build, test and automate HTTP requests right in your browser.

API Studio: Build, test and automate HTTP requests: collections, environments, tests and a runner.

Diagrams

Draw cloud architectures and watch the data flow.

Architecture Builder: Draw cloud architectures and data flows with AWS, Azure, GCP and 1,000+ components.

CI/CD

See, edit and check your CI/CD pipelines.

Pipeline Studio: See and edit your Bitbucket pipelines as a metro map, with checks for mistakes Bitbucket would reject.

Data

Query, browse and edit data files and SQLite databases.

Database Studio: Query, browse and edit CSV, Excel, Parquet and SQLite files with SQL, right in your browser. Nothing is uploaded.

System Design

Simulate traffic through a system design and find its limits.

System Design Simulator: Design a system, send it traffic and watch where it melts: latency, errors and the bottleneck.

Team Knowledge

Every error your team has hit, and how it was fixed.

Error Memory: Search every error your team has hit and how it was fixed; log new ones with their fix.

Formatters & Beautifiers

Make messy payloads, queries and markup readable.

JSON & Log Formatter: Repair, beautify and deep-decode JSON, Python dicts and log lines.
SQL Formatter: Pretty-print queries for 12 SQL dialects.
XML / HTML Beautifier: Beautify or minify HTML and XML, with validation.
JSON Diff: Compare two payloads side by side or as a change list.
SQL Diff: Compare queries, scripts or schemas as SQL, with schema changes and the migration.
JQ / JSONPath: Filter JSON with jq or JSONPath expressions.

Encoders & Decoders

Look inside tokens, encodings and escaped text.

JWT Debugger: Decode tokens, check expiry and verify HMAC signatures.
Base64 / Hex / Binary: Convert text and files between Base64, hex and binary.
URL / Query Parser: Split, edit and rebuild URLs and query strings.
HTML & Unicode Entities: Encode and decode HTML entities and Unicode escapes.

Generators

IDs, hashes, keys, placeholder text and typed code.

UUID / ULID / Hash: Generate UUIDs and ULIDs; hash text or files.
Lorem Ipsum: Placeholder paragraphs, sentences or words.
RSA / EC Key Pair: RSA and EC key pairs as PEM or JWK, via WebCrypto.
Schema & Code Generator: Turn sample JSON into TypeScript, Zod, Go, Rust, SQL and more.

Converters

Move data between formats, times and color spaces.

Unix Timestamp ↔ Date: Convert Unix timestamps to dates and back.
Color Converter: HEX, RGB, HSL and OKLCH with WCAG contrast checks.
Cron Parser: Explain cron expressions and list upcoming runs.
Format Converter: Convert between JSON, YAML, TOML, XML and CSV.

API & Debugging

Reproduce requests, read errors and sanitise logs.

Log → cURL: Rebuild a runnable cURL from logs, HAR or fetch calls.
HTTP Status Codes: Status codes with causes and fixes.
Payload Redactor: Strip secrets and personal data before you share.
Regex Tester: Test patterns live and explain them token by token.