- 4 minutes to read

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.

The Designer validates each connection as you draw it, preventing connections that violate the C4 model rules for the current diagram level.

How to Draw a Connector

graph LR A[" Hover over source node"] --> B[" Port handles appear on N/E/S/W edges"] B --> C[" Drag from a port handle"] C --> D{" Valid target?"} D -- Yes --> E[" Release — connector created"] D -- No --> F[" Red line + tooltip shown"] F --> G[" Release — toast notification, no connector created"] style E fill:#90EE90 style F fill:#FF6B6B style G fill:#FF6B6B

Diagram: The port-drag workflow for drawing a connector. The Designer validates the target in real time.

Step-by-step

  1. Hover the cursor over the source element — four small circular port handles appear on the North, East, South, and West edges of the element
  2. Click and drag from any port handle — a drag line extends from the port to your cursor
  3. 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
  4. Release the mouse button over a valid target — the connector is created and the Connector Inspector opens automatically so you can set the label and protocol
  5. If you release on nothing, the drag is cancelled silently

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

The C4 model defines which connections are meaningful at each diagram level. Nodinite enforces these rules automatically:

Diagram type Allowed connections
L0 Landscape Person ↔ System, System ↔ System
L1 Context Person ↔ System, System ↔ System
L2 Container Person ↔ Container, System ↔ Container, Container ↔ Container
L3 Component Container ↔ Component, Component ↔ Component
L4 Dynamic Any node pair in the diagram
Deployment Deployment Node ↔ Container, Deployment Node ↔ Deployment Node

Attempting to create a cross-level connection — for example, a Person directly to a Component in an L3 diagram — is blocked. A red toast notification appears at the bottom of the screen for 4 seconds and then dismisses automatically.

Connector Types

Three connector styles are available, matching the standard C4 relationship types:

Type Visual When to use
Synchronous Solid line, single arrowhead A caller waits for a response — HTTP calls, gRPC, database queries
Bidirectional Solid line, double arrowhead Both parties initiate interactions — two-way sync
Asynchronous Dashed line, single arrowhead Fire-and-forget, event-driven — message queues, pub/sub, SFTP drops

You choose the connector style when you draw the connection. You can change it afterwards using the Style field (Solid / Dashed) and Direction dropdown in the Connector Inspector.

Setting a Label and Protocol

Every connector should carry a label (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, the Inspector opens automatically. If you close it, click the connector line to reopen it.

Field Example values Description
Label "Sends purchase orders", "Queries inventory" Describes what the relationship does
Protocol HTTP, HTTPS, gRPC, AMQP, MQTT, SFTP, REST, SOAP The technical protocol — the field offers suggested values but accepts any text

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

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:

Direction value Meaning
Auto Nodinite chooses the best routing based on node positions
Forward Left to right
Down Top to bottom
Up Bottom to top
Left Right to left
Back Opposite of the natural direction
Neighbor Short routing for adjacent elements

Deleting a Connector

Click the connector line to open the Connector Inspector, then use the Delete button at the bottom of the inspector. A confirmation prompt appears before the connector is removed.

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 immediately

The source element type and the target element type are not compatible at this diagram level. Check the validation rules table. If you intended a cross-level relationship, consider whether this architectural detail belongs in a different diagram type (for example, a Dynamic L4 diagram allows any node pair).

Can I have multiple connectors between the same two elements?

Yes. Draw the connection again and a second connector is created. Use different labels or protocols to distinguish them — for example, separate connectors for "Read" and "Write" between the same API and database.

Next Step