Editing
Building a diagram
A node is a component. An edge is a directed dependency. Everything else follows from those two ideas.
The basics
- Drag a component from the left palette onto the canvas to create a node.
- Drag from the bottom handle of one node to the top handle of another to connect them.
- Double-click a node to open its properties in the right panel.
- Click an edge, then the ✕ button on it, to remove a connection.
Colour convention
Colour is not decoration — it is the fastest way to read an unfamiliar diagram. Every built-in template follows this mapping, and so should any template you contribute.
| Colour | Role |
|---|---|
| Blue | Clients — web, mobile, third-party callers |
| Green | Compute — services, APIs, workers |
| Red | Storage — databases, object stores, caches |
| Yellow | Messaging — queues, streams, event buses |
| Purple / Orange | Anything that needs to stand out on its own terms |
| Slate | Infrastructure and everything unclassified |
Write the descriptions
A node's description is what turns a picture into documentation, and it is also what the AI assistant reads when you ask it to review the design. Empty descriptions make both weaker.