Edges

An edge is a directional connection between two nodes. It describes how requests, data, ownership, or events flow through your system.

WebAPIDB

Line styles

An edge is directional and can be drawn in one of four line styles. Pick what reads best for the layout:

Select an edge and switch its line in the Connection panel, or set a map-wide default from Canvas settings. The choice is saved per edge in canopy.json as "line": "step", "smoothstep", "bezier", or "straight".

Arrows and direction

By default an edge is undirected (just a line). Select it and open the Connection panel to add arrowheads:

• None - no arrowhead (an association, not a flow).
• Single - one arrow at the target end, a directed flow (A → B).
• Both - arrows at both ends, a bidirectional link (A ↔ B).

Saved per edge as "arrow": "none", "end", or "both". Omitting arrow (or setting "none") keeps the classic undirected look.

Labels

Give an edge a short label to name what flows across it (e.g. webhook, gRPC, read replica). Type it in the Connection panel; it is drawn at the midpoint of the line and saved as "label": "webhook". Clear the field to remove it. Labels hold up to 120 characters.

Explaining business and AI workflows

Edge labels shine on workflow maps - business processes and AI agent pipelines - where the interesting part is what happens between the steps. Label each connection with the handoff, trigger, or condition so the map reads as a runbook:

• Business workflow - Intake form → Review agent labelled on submit, Review agent → Human approval labelled if confidence < 0.8, → CRM labelled on approve.
• AI workflow - Router → Vision model labelled image input, Retriever → LLM labelled top-k context, LLM → Guardrail labelled before send.

For a longer description of a step itself, use the node's purpose field (up to 160 chars); keep the edge label to the short handoff or condition so it stays readable on the canvas. Both flow straight into your CLAUDE.md / AGENTS.md exports, so an agent reads the sequence, not just the boxes.

Styling a label

Once a label is set, the Connection panel exposes its styling:

• Font - sketch (Excalifont, the hand-drawn default), sans, or mono. All three are open-source (SIL OFL) and bundled with the app.
• Size - 6-48 px ("labelSize": 14).
• Text color - a swatch or any hex ("labelColor": "#ef4444"); Default uses a muted foreground.

Saved per edge as "labelFont", "labelSize", and "labelColor".

Color

An edge uses the animated gradient by default. Pick a swatch in the Connection panel to override the stroke (handy for grouping flows by concern - data vs events vs auth). Saved as "color": "#10b981" (any hex, rgb, or named CSS color). Choose Default to drop the override and return to the gradient.

Moving dots

Each edge shows a dot travelling along it to convey flow. Toggle Moving dots in the Connection panel to turn the motion on or off per edge (saved as "animated": false when off). While dots are on, set a Dot color - it defaults to Match line (the dot follows the edge color) but you can give it its own swatch, saved as "dotColor": "#3b82f6".

Working with edges

• Draw - drag between node handles to connect them.
• Style - swap an edge's line type, add arrows, a label, or a color.
• Direction - set arrowheads to none / single / both.
• Delete - select an edge and remove it without affecting the nodes.

Edges do not count toward your node limit, and they make dependencies explicit so you can trace what depends on what across your system.