C4 Designer

C4 Diagrams is part of experimental builds. To access this capability, contact your sales representative.

The C4 Designer is Nodinite's interactive canvas for creating and editing C4 architecture diagrams. It is available at /repository/c4diagrams/{id}/design and uses the same Syncfusion SfDiagramComponent engine that powers the BPM Designer — providing a familiar, production-proven design surface with swimlane, drag-and-drop, and connector support built in.

How the Designer Works

Every change you make on the canvas — placing a Service, drawing a connector, reordering lanes — is saved automatically and immediately. There is no Save button.

Because only the specific change is saved, multiple people can edit the same diagram simultaneously without overwriting each other's work — the same real-time collaboration model used by the BPM Designer.

The diagram below shows how the parts of a C4 diagram are related to each other:

Diagram: How the parts of a C4 diagram relate — Persons and Systems sit above and below the swimlane stack, Services live inside Domain swimlanes, and connectors carry a Label and Protocol between any two nodes.

Canvas Structure

The C4 designer canvas has one axis of organization: lanes (rows). This differs from the BPM designer, which has a two-axis grid (rows = Domains, columns = Phases). C4 has no Phase concept.

┌──────────────────────────────────────────────────────────────────────┐
│  ACTORS (above lane stack)                                           │
│  Persons and Internal Systems dropped here                           │
├──────────────────────────────────────────────────────────────────────┤
│  Lane: Domain 1                                                      │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐                              │
│  │Service A│  │Service B│  │Service C│    ← free X placement        │
│  └─────────┘  └─────────┘  └─────────┘                              │
├──────────────────────────────────────────────────────────────────────┤
│  Lane: Domain 2                                                      │
│  ┌─────────┐  ┌─────────┐                                           │
│  │Service D│  │Service E│                                           │
│  └─────────┘  └─────────┘                                           │
├──────────────────────────────────────────────────────────────────────┤
│  ACTORS (below lane stack)                                           │
│  External Systems dropped here                                       │
└──────────────────────────────────────────────────────────────────────┘

Services are placed at free-form X coordinates within their lane — there is no Phase column grid to lock them to positions.

Node Shapes

C4 nodes render as rectangles, per C4 standard notation. Each node displays:

• A Font Awesome icon in the top-left corner, derived automatically from the Service's C4ContainerType or the System's C4Type
• The entity name (or ArtifactRenaming if set — same rename feature as BPM)
• A technology subtitle beneath the name from the Service's C4Technology field (e.g., "ASP.NET Core", "PostgreSQL")

This is intentionally different from BPM nodes, which use rounded pill/ellipse shapes. C4 rectangles follow C4 standard notation.

Icons by Type

Toolbox Panels

Three left-panel toolboxes are available in the C4 designer, following the same panel pattern as the BPM Designer:

Actors Panel

Lists all Systems in the Repository. Drag a System onto the canvas to place it as an actor.

• Systems with C4Type = Person are placed above the lane stack
• Systems with C4Type = InternalSystem are placed above the lane stack
• Systems with C4Type = ExternalSystem are placed below the lane stack
• Systems with C4Type = None can be placed anywhere (type is set later via the Properties panel)

Actor placement hints (C4PositionHint) on the System entity can pre-configure whether the System defaults to top or bottom.

Services Panel

A searchable list of all Services in the Repository. Drag a Service into a Domain swimlane to:

1. Place the Service node inside that lane
2. Save its position automatically

If the dragged Service is already associated with another Domain in this diagram, a non-blocking warning is shown:

"Service is already placed in lane within this diagram. It will appear in both lanes."

The insert still succeeds — a Service can intentionally appear in multiple lanes across a diagram (same many-to-many model used by BPM).

Connectors Panel

Three connector styles matching C4 relationship types:

After drawing a connector, the Properties sidebar opens automatically to enter:

• Label — e.g., "Sends orders", "Reads inventory" (appears on the arrow)
• Protocol — e.g., "HTTP", "AMQP", "gRPC", "SFTP" (appears as subtitle on the arrow)

Designer Toolbar

The designer toolbar (Syncfusion SfToolbar) provides:

Properties Sidebar

Selecting any node or connector opens the Properties sidebar (Syncfusion SfSidebar) which allows editing:

For Service nodes

• C4ContainerType — dropdown to select the container type
• C4Technology — free-text technology label (e.g., "Node.js", "SQL Server")
• ArtifactRenaming — override display name on canvas without changing the Repository name

For System actors

• C4Type — Person / InternalSystem / ExternalSystem
• C4PersonRole — subtitle label (e.g., "Customer", "Administrator")

For Connectors

• Label — relationship description (e.g., "Sends purchase order")
• Protocol — technology protocol (e.g., "REST/HTTPS", "AMQP 1.0")

Changes to C4ContainerType, C4Technology, and C4Type are global Repository properties — editing them in the designer updates the entity across all diagrams and the Repository.

Right-Click Context Menu

Right-clicking any node opens the context menu (Syncfusion SfContextMenu) with:

• Set C4 Type — quickly change C4Type or C4ContainerType
• Open in Repository — navigate to the entity's detail page
• View in Mapify — open the entity in the Mapify landscape view
• View Logs — open a filtered Log View for this Service/System
• Remove from Diagram — delete the node from this diagram (Repository entity is NOT deleted)

Difference from BPM Designer

Next Steps

• Mermaid View – Read-Only Rendering
• Export and Sharing
• Creating Your First C4 Diagram
• Repository Properties for C4 Diagramming