Interactive Architecture Canvas

The canvas is the heart of Codelit. It's where architecture diagrams go from static pictures to something you can actually interact with. Drag nodes, trace data flows, audit components, and understand how a system fits together.

Built on React Flow, heavily customized.

Every component in a Codelit diagram uses one of seven custom node types. Each has its own visual style, icon, and behavior:

1. Service: backend services, APIs, microservices. The default building block.
2. Database: PostgreSQL, MongoDB, DynamoDB, any data store. Cylinder shape because that's what architects expect.
3. Queue: Kafka, SQS, RabbitMQ. Shows pending message count when available.
4. Cache: Redis, Memcached, CDN edge caches. Styled distinctly from databases so you can tell a cache from a store at a glance.
5. Gateway: API gateways, load balancers, reverse proxies. Sits at the boundary between external and internal.
6. CDN: Content delivery networks. Edge nodes with geographic distribution implied.
7. External: third-party services, SaaS integrations, anything outside your system boundary.

Each node type has specific connection rules. A database node accepts incoming connections (reads/writes) but rarely initiates them. A gateway node typically fans out to multiple services. These rules aren't enforced (you can connect anything to anything) but they inform the auto-layout algorithm and the AI generation.

Edges aren't just lines. They animate.

The animation shows the direction of data flow: small dots moving along the edge from source to target. It's a subtle effect, but it transforms a static diagram into something that communicates how the system actually works.

Different edge types use different animations:

• Synchronous (HTTP, gRPC): steady flow of dots
• Asynchronous (message queues, events): grouped pulses
• Bidirectional (WebSocket): dots moving in both directions

You can toggle animations off if they're distracting. But most users keep them on. They make it immediately obvious which direction data flows through a pipeline.

Click any node on the canvas and the audit panel opens. It shows:

• What this component does: plain English description
• Why it's here: the architectural decision that justifies this component
• What connects to it: incoming and outgoing edges with labels
• What would break if you removed it: failure impact analysis
• Technology options: concrete suggestions (e.g., "PostgreSQL, MySQL, or CockroachDB" for a relational database node)

The audit data comes from the AI generation. When the diagram is first created, each node gets metadata that explains its role in the system. This means clicking a node gives you context that no static diagram tool provides.

Every action on the canvas is recorded. Move a node, delete a connection, add a component: all of it undoes and redoes.

Beyond basic undo/redo (Ctrl+Z / Ctrl+Shift+Z), Codelit keeps a version timeline. Every significant action creates a snapshot. You can scrub through the timeline to see how your diagram evolved, which is surprisingly useful when you're iterating on an architecture and want to compare approaches.

The compare mode lets you put two versions side by side. Made a big change and not sure it's better? Compare it with the previous version. The diff highlights added nodes (green), removed nodes (red), and moved nodes (blue).

Creating connections is intuitive: drag from one node's handle to another. The connection gets a default label based on the node types (e.g., dragging from a service to a database defaults to "query"). You can change the label, protocol, and style after creating it.

The canvas supports multi-select (Ctrl+click or drag-select), grouping (Ctrl+G), and alignment tools. These are the basics, but getting them right in a React Flow canvas required more custom work than you'd expect.

The canvas isn't blank by default. You can start from any of the 90+ templates in the template library, including 55 real-world architectures from companies like Uber, Netflix, and Stripe.

Load a template, modify it to fit your needs, and save it as your own. Or start from scratch. The canvas adapts to both workflows.

Head to codelit.io and start building. The canvas is where architecture diagrams become useful: not just pictures to look at, but interactive models you can explore, audit, and iterate on.

Browse the templates if you want a starting point.