Architecture Diagram Editor

There are 20 built-in generic icons such as server, database, user and cloud. Brand logos are not bundled because they come with usage terms. Instead, you can import your own PNG / JPEG / GIF / WebP / SVG image (up to 512 KB) for any node. Images are handled only inside your browser and are never uploaded.

Press "Connect" and click the start node, then the end node. Or select a node and Shift+click another one. Lines connect automatically using right angles only, and route around other nodes and group names. You can set the sides a line leaves and enters (top / right / bottom / left) in the "Selected item" panel below when you want to decide the route yourself.

Yes. Nodes whose center is inside the frame, and other groups that fit entirely within it, move together. Drag the blue square at the bottom-right corner to resize. You can also nest groups, such as a Workers frame inside a Cloudflare frame.

Your edits are saved automatically in this browser's local storage (nothing is sent to a server). Clearing the cache erases them, so use "Save as JSON" for diagrams you care about. Exports are PNG, SVG and JSON. Mermaid cannot express free positioning or icons, so it is not offered; for Mermaid, use the Infrastructure Diagram Builder.

Put the whole service (users, edge, servers, databases, external services) on one picture and export it as SVG to paste into a README or wiki.

Color-code where things run with group frames and add labels like /api or HTTPS to lines, giving you a diagram you can use directly in an article or slides.

Sketch the big picture by placing nodes and drawing lines, as you would on a whiteboard. Save as JSON to share with your team.

Turn a system that mixes front ends, APIs, databases and external services into something non-engineers can follow.

Built-in icons are generic line drawings. If you use a logo, follow the owner's brand guidelines and import the image yourself. Each image can be up to 512 KB.

Your edits stay in this browser's local storage only. They do not carry over after clearing the cache or on another device, so save as JSON.

Lines route around other nodes and group names, but they can still overlap other lines. When nodes are packed tightly, a line may take a long detour or fall back to the plain route if it cannot get through. If it does not go where you want, set the start and end sides, or turn off "Route lines around other nodes".