The open-source system design canvas for engineers and architects. Drag components, draw connections, load battle-tested templates, and export beautiful diagrams — all in your browser, zero setup.
A powerful, lightweight canvas that meets you where you think — no accounts, no subscriptions, no friction.
Pick from 30+ pre-built system components across 6 categories — clients, networking, compute, storage, messaging, and infrastructure.
Switch to Connect mode and click any two nodes to draw a labeled edge. Add HTTP, gRPC, WebSocket, SQL — any protocol you need.
Bootstrap from 7 real-world patterns: Web App, Microservices, Real-Time Chat, Video Streaming, Ride Sharing, Search Engine, and more.
60-level deep undo stack keeps your work safe. Keyboard shortcuts (Ctrl+Z / Ctrl+Y) make iteration effortless.
Export your design as a crisp 2× PNG for presentations or as JSON to share, version-control, or re-import later.
Your work is saved to localStorage as you type. Refresh, close, reopen — your design is always there.
Click any node or edge to edit its label, color, shape, line style, and notes in the live properties panel.
V to select, C to connect, Del to delete, F to fit, Ctrl+S to save — every action has a shortcut for power users.
No backend, no account, no data leaves your browser. Powered by Cytoscape.js — the best open-source graph library.
Every template is pre-wired with industry-standard components and connections. Load one in a click, then customize to your needs.
Start with a blank canvas or choose a template that matches your architecture style.
Click any component from the sidebar library to add it to the canvas. Every layer covered.
Switch to Connect mode, click source then target. Label each edge with the protocol or data flow.
Export as a 2× PNG for presentations or JSON for version control. Your work, your format.
Open the canvas and start building your architecture. No signup. No install. Just design.