Drawing Connectors

Connectors represent the relationships between elements in your architecture — API calls, event streams, database reads, user interactions. In the C4 Designer, you draw them by dragging from a port handle on one element to another element.

On static diagrams, one visible connector can carry several flows. This keeps the canvas readable when the same two elements exchange multiple business messages or protocols.

The Designer validates each connection as you draw it, and the server checks the same rules again, so connections that violate the C4 model rules for the current diagram level are never saved (see Connection Validation Rules).

Animated walkthrough: the port handles on Customer, a valid connector to Webshop with its Display Name and Protocol, and a second connector Webshop → Customer that the Designer refuses with a red message. It ends on that message.

Why Connections Are Validated

A C4 diagram is only useful when each level stays at its own abstraction. A Person wired straight to a Component on a Context diagram, or two copies of the same relationship, makes the picture lie about the architecture. Nodinite therefore treats the connection rules as part of the data model, not as a hint.

How to Draw a Connector

Diagram: The port-drag workflow for drawing a connector. The Designer validates the target in real time; green marks a created connector, red marks a rejected connection.

Step-by-step

1. Optionally, select a connector type in the toolbox's Connectors section first (Select a type, then drag between node ports to connect). The new connector gets that line style; with no type selected, it is Synchronous
2. Hover the cursor over the source element — four small circular port handles appear on the North, East, South, and West edges of the element
3. Click and drag from any port handle — a drag line extends from the port to your cursor
4. Hover over a target element — the Designer validates the connection live:
   • Valid target: the drag line stays its default colour
   • Invalid target: the drag line turns red and a tooltip explains why the connection is not allowed
5. Release the mouse button over a valid target — the connector is saved at once, a Connector created. toast shows, and the canvas reloads. The connector properties do not open by themselves
6. Click the connector line to open Connector Properties and set the Display Name and Protocol (see Setting a Label and Protocol)

If you release on nothing, or back on the source node, the drag is cancelled silently.

Info

Port handles disappear when the cursor leaves the source element during a drag. If the handles vanish before you reach the target, start the drag again from the source.

Connection Validation Rules

This section is the one home for the connection rules; other C4 pages link here.

The C4 model defines which connections are meaningful at each diagram level. Nodinite enforces these rules: both ends of a connector must be one of the element types allowed for the diagram type.

On top of the type rules, duplicate connectors between the same two nodes, in either direction, are blocked on every diagram type except Dynamic, where each repeated interaction is its own numbered step. The Designer then shows A connector already exists between these nodes. Edit its Direction property instead. A connector from a node to itself (a self-link) is rejected by the server; in the Designer, a drop back on the source node is simply ignored, with no message.

Where the Rules Are Enforced

Tip

If a cross-level relationship is what you need, such as a Person calling a Component, the detail usually belongs on another diagram. Dynamic diagrams allow every element type from Person to Component.

Same-Pair Relationships on Static Diagrams

Every diagram type except Dynamic keeps the canvas compact by allowing one visible connector per node pair. If those two elements exchange several named messages, they are managed as flows behind that visible line.

When you need another flow between the same two elements:

1. Click the existing connector to open Connector Properties
2. Under FLOWS, click Add flow instead of drawing a second overlapping line
3. Give the new flow its own Display Name, Protocol, Direction, and optional Message Type link (Link a Message Type…)

A count badge in Connector Properties reads 1 flow or N flows. When more than one flow exists, the visible connector label changes from the individual flow name to a count such as 3 flows.

The Designer still prevents overlapping duplicate lines on the canvas. If what you need is a true two-way interaction rather than several distinct messages, use the Bidirectional connector type instead.

Connector Types

The connector types available in the toolbox depend on the diagram level. Standard diagrams use three relationship types; Dynamic (L4) diagrams use a different set built for sequence modelling.

Standard Connectors (L0–L3 and Deployment)

You choose the connector type when you draw the connection, by selecting its tile in the toolbox's Connectors section first; with none selected, a new connector is Synchronous. You can change it afterwards with the Type switch (Synchronous / Asynchronous / Bidirectional) in Connector Properties (see Editing Elements); the switch applies to all the connector's flows. Each flow keeps its own Direction.

Dynamic Connectors (L4 Dynamic Diagrams)

Dynamic diagrams model a runtime interaction sequence. Every connector carries a step number that defines its position in the flow, and the toolbox offers three types suited to sequencing:

When you draw a Numbered Step or Numbered Step (Async) connector, the step number is assigned automatically as the next integer after the highest existing step in the diagram. You can change it using the Step number field in the connector's properties (see Editing Elements) — all other steps renumber automatically to keep the sequence gapless.

Info

Dynamic diagrams do not collapse repeated interactions into flows on one connector. Each step stays as its own explicit connector in the runtime sequence.

Setting a Label and Protocol

Every connector should carry a label — the flow's Display Name (what the relationship does) — and a protocol (how it is implemented). These display directly on the connector line in the diagram.

After drawing a connector, click its line to open Connector Properties. On Context, Container, and Component diagrams, a new connector starts with one flow. If you later add more flows between the same two elements, you edit the display name and protocol per flow rather than on the connector as a whole.

The Connector Properties panel holds:

• the Type switch (Synchronous / Asynchronous / Bidirectional), which applies to all the connector's flows;
• the FLOWS list with Add flow and a 1 flow / N flows count badge;
• per flow: Display Name, Protocol, Direction, and Message Type (Link a Message Type…);
• Delete Connector.

Both fields save automatically as you type (with a short debounce delay). There is no Save button.

When a static connector shows N flows, each flow keeps its own Display Name, Protocol, Direction, and optional Message Type link.

Connector Direction

The Direction dropdown controls the visual routing of the connector arrow on the canvas. This is a layout hint, not a data-model change:

When UseContracts is enabled and the edited flow is bound to a Contract (see Repository Bindings), direction handling follows contract semantics. The UI avoids the full service-oriented direction list for that path and applies the agreed outbound-initiating behavior.

Steps Panel (Dynamic Diagrams)

When editing a Dynamic (L4) diagram, the Steps panel on the right edge of the canvas gives you a scrollable list of every numbered connector in step order. It is the quickest way to review the full interaction sequence, check step labels, or reorder steps — without hunting for individual connector lines on the canvas.

Opening, pinning, and detaching the panel

• Hover over the STEPS tab on the right edge of the canvas to expand the panel temporarily.
• Click the pin icon () to keep the panel open while you work. The pinned state is remembered the next time you open the diagram.

The panel can also be detached from its docked position so it floats freely over the full page:

Detaching is useful when editing a complex Dynamic diagram with many steps: you can keep the step list visible on one side of your screen while freely moving around the canvas on the other.

What the panel shows

Each entry in the list displays:

• The step number
• The connector label
• The source → target relationship names

Editing steps inline

You can edit a step's number or label directly in the Steps panel without clicking the connector on the canvas:

1. Click the step number or label field for the step you want to change
2. Type the new value
3. Click Save to apply — sibling steps renumber automatically if needed to keep the sequence gapless
4. Click Cancel or press Escape to discard the change

Info

Changing a step number does not delete or reorder the connector on the canvas — only the numeric label changes, and the surrounding steps adjust accordingly.

Connector Label and Protocol Visibility

Two toggle buttons in the canvas toolbar control what text appears on connector lines across the whole diagram:

Clicking a toggle immediately refreshes all connectors — no page reload needed. The toggles are available in both the Designer and the View page (in View mode, they appear only when the Interactive view is active, not in Mermaid view).

Info

Regardless of toggle state, hovering over any connector line always shows a tooltip with the label and protocol together — so the information is never completely hidden from view.

Inspecting Connectors (View Mode)

You do not need to open the Designer to inspect a connector. In the View page with Interactive mode active, clicking any connector line opens a read-only Connector Inspector popover showing:

Linked flows expose Open Message Type and, when the user has permission, Edit Message Type actions. Unlinked flows remain read-only in View mode and guide the user back to the Designer for linking work.

The popover also includes a Highlight button. Clicking it draws a red highlight on that connector — useful when presenting the diagram to an audience and you want to draw attention to a specific call or flow.

Click anywhere else on the canvas to dismiss the popover.

Info

The View mode Inspector is read-only. To edit a connector's display name, protocol, direction, or step number, switch to the Designer page.

Deleting a Connector

Click the connector line to open Connector Properties.

• To remove the whole connector, with all its flows, click Delete Connector.
• For a static connector with several flows, remove the specific flow you no longer need. When the last flow is removed, the visible connector disappears from the canvas.

Frequently Asked Questions

I cannot see the port handles when hovering

Port handles only appear in edit mode (Draft state). If the diagram is Active, switch to Draft first by clicking Create Draft in the toolbar.

My drag line turns red while hovering over a target

Two reasons cause the drag line to turn red:

1. Incompatible element types — the source or target type is not allowed at this diagram level. Check the validation rules table. If you intended a cross-level relationship, consider whether the detail belongs in a different diagram type (for example, a Dynamic diagram allows Person, System, Container, and Component).
2. Existing visible connector — on every diagram type except Dynamic there is already a connector between these two nodes. The Designer shows A connector already exists between these nodes. Edit its Direction property instead. Open the existing connector and click Add flow instead of drawing a second overlapping line. If the relationship is really two-way, use the Bidirectional connector type or change the Direction property on the existing connector.

Can I have multiple connectors between the same two elements?

Yes, but on static diagrams they are managed as several flows behind one visible connector, not as overlapping lines on the canvas. Open the existing connector and click Add flow for each additional flow you want to document. In Dynamic diagrams, repeated interactions are modelled as separate numbered steps because the sequence itself matters.

Why does my connector say 3 flows instead of the message name?

That label means the visible connector contains several flows between the same two elements. Nodinite collapses them into one canvas line to reduce clutter. Open the connector to review each flow individually and see which ones are linked to a Message Type.

How do I reorder steps in a Dynamic diagram?

Change the Step number on the connector you want to move — either by clicking the connector line to open its properties (see Editing Elements), or inline in the Steps panel on the right edge of the canvas. All other connectors in the diagram renumber automatically to keep the sequence gapless.

Next Steps

• Editing Elements – Node, Connector, and Boundary Properties
• Repository Bindings

Related Topics

• C4 Designer Overview
• Building a Diagram
• Shapes and Toolbox Reference
• Mermaid View – How Connectors Appear in Markup
• Message Types in the Repository
• Keyboard Shortcuts Reference