- 3 minutes to read
Technical Reference
This page provides the low-level defaults and capabilities reference for the C4 Designer. Use it when you need to understand specific sizing behaviour, timing, or want to compare what is available on the View page versus the Designer page.
Canvas and Layout Constants
Client-side defaults (c4InteractiveView.js)
These are the values used by the interactive canvas when placing and rendering elements in the browser.
| Constant | Value | Description |
|---|---|---|
NODE_W |
180 px | Default node width when first placed on the canvas |
NODE_H |
120 px | Default node height when first placed on the canvas |
MIN_NODE_W |
80 px | Minimum node width — resize cannot go below this |
MIN_NODE_H |
60 px | Minimum node height — resize cannot go below this |
MIN_BOUNDARY_W |
260 px | Minimum boundary width |
MIN_BOUNDARY_H |
180 px | Minimum boundary height |
BPAD |
20 px | Inner padding between a boundary edge and its child elements |
BHEADER |
32 px | Height of the boundary header strip |
CPAD |
40 px | Outer canvas padding around all content |
AUTO_COLS |
4 | Column count used by the client-side auto-layout grid |
AUTO_GAP_X |
30 px | Horizontal gap between elements in auto-layout |
AUTO_GAP_Y |
30 px | Vertical gap between elements in auto-layout |
Server-side auto-layout defaults (C4ImportApplyService.cs)
These values are used by the server-side layout algorithm (triggered by the Auto-arrange button).
| Constant | Value | Description |
|---|---|---|
NodeWidth |
200 px | Node width used in server auto-layout |
NodeHeight |
120 px | Node height used in server auto-layout |
LayoutCellWidth |
300 px | Grid cell width |
LayoutCellHeight |
220 px | Grid cell height |
LayoutStartX |
80 px | Left offset for the first node |
LayoutStartY |
80 px | Top offset for the first node |
DefaultCols |
4 | Default column count for the server layout grid |
Zoom and Interaction Limits
| Parameter | Value | Description |
|---|---|---|
| Zoom minimum | 10 % | Lower bound — canvas cannot zoom out further |
| Zoom maximum | 400 % | Upper bound — canvas cannot zoom in further |
| Zoom step | ×1.1 (in) / ×0.9 (out) | Per mouse wheel tick or button click |
| Border-click threshold | 8 px | Distance from node edge that counts as a border click (selects only, no inspector) |
Timings and Intervals
| Parameter | Value | Description |
|---|---|---|
MONITORING_POLL_INTERVAL |
10 000 ms | How often monitoring states are refreshed on bound nodes |
| Keyboard move debounce | 400 ms | Delay after the last arrow key press before position is persisted |
| Connector property debounce | 600 ms | Delay after typing in Label/Protocol before the change is saved |
Feature Matrix — View Page vs Designer Page
This table shows which capabilities are available on each of the two C4 canvas pages. Features marked Draft only require the diagram to be in Draft state.
| Feature | View page | Designer page |
|---|---|---|
| Render interactive canvas | ||
| Pan (click-drag) | ||
| Mouse wheel zoom | ||
| Viewport controls (–/+/fit) | ||
| Node Inspector popup | ||
| Connector Inspector popup | ||
| Boundary Inspector popup | ||
| Hamburger menu on nodes | ||
| Collapse/expand boundaries | ||
| Focus / Isolate boundary | ||
| Monitoring live polling | ||
| Drill-through link navigation | ||
| Article badge | ||
| Mermaid modal | ||
| Export (PNG/SVG/JSON/etc.) | ||
| Dynamic Diagram generation | ||
| Edit Properties (diagram metadata) | (modal) | (modal) |
| Sync related diagrams | ||
| Toolbox (drag new elements) | Draft only | |
| Drag-move nodes / boundaries | Draft only | |
| Resize nodes / boundaries | Draft only | |
| Port handles (draw new connector) | Draft only | |
| Edit node properties (panel) | Draft only | |
| Edit connector properties | Draft only | |
| Edit boundary properties | Draft only | |
| Keyboard move (Arrow keys) | Draft only | |
| Delete elements | Draft only | |
| Reparent node to different boundary | Draft only | |
| Custom metadata filters bar | ||
| Auto-arrange | (Mapify flag required) | |
| Create Draft / Promote | ||
| Clone diagram | ||
| Read-only banner (Active state) | N/A | Shown |