Layout

LikeC4 lays out views automatically with Graphviz. The rules on this page tune that layout: the direction and spacing, how relationships are drawn, and which elements share a level.

Auto-layout

view {
  include *
  autoLayout LeftRight 120 110
}

Parameters are:

• direction: possible values are TopBottom (default), BottomTop, LeftRight, RightLeft.
• rank distance: optional, a positive number - the space between levels (ranks) of the layout.
• node distance: optional, a positive number - the space between elements on the same level.
• edge routing: optional, possible values are spline or ortho. See Edge routing.

Note

Manual changes are supported in VSCode extension, but functionality is limited.
Your feedback is much appreciated.

Edge routing

To draw relationships with horizontal and vertical segments, set routing ortho in your view:

view {
  routing ortho
  include *
}

Use spline for curved relationships or ortho for right-angle bends. The default is spline. Routing applies to element, dynamic, and deployment views. Sequence diagrams use their own layout and ignore this setting.

You can also set routing as the last autoLayout parameter:

autoLayout LeftRight 120 110 ortho

LikeC4 uses the first routing value defined in this precedence order:

1. The view’s routing property.
2. The last autoLayout rule’s routing parameter.
3. The project default, styles.defaults.view.routing.
4. The built-in default, spline.

If you set routing in both the view property and autoLayout, the property takes precedence. The language server reports a warning on the autoLayout parameter.

In the web editor, switch routing from the layout panel; the change is written back to the view source.

Changing routing preserves saved node positions and connection control points. LikeC4 renders the saved layout with the selected routing mode. Changing routing alone doesn’t invalidate the layout or report layout drift.

Routing limitations

Graphviz can route an orthogonal relationship through an unrelated group box. It can also place parallel routes so close together that they are hard to distinguish.

To reduce crowding, show fewer relationships or edit individual connections. Increasing autoLayout spacing gives nodes more room, but doesn’t guarantee more space between routes.

Edited edges that share a straight segment move onto separate tracks where space at their endpoints permits. Unedited Graphviz routes keep their original positions.

Automatic labels avoid nodes, other labels, and relationship lines where space permits. Dense views can still contain label overlaps if no clear position is available.

Rank constraints

You can keep specific elements on the same horizontal/vertical level (or push them to the beginning/end of the layout) by adding an explicit rank block to the view. These rank constraints are forwarded to the Graphviz layout engine to achieve the desired layout effects.

view checkoutFlow {
  include *

  // keep the API nodes aligned
  rank same {
    cloud.backend.api,
    cloud.backend.billingApi,
  }

  // make customers appear at the beginning of the diagram, exclusive of the elements
  rank source {
    customer
  }

  // render reporting systems at the end, exclusive of the elements
  rank sink {
    analytics,
    dataWarehouse
  }
}

• Allowed rank values: same, min, max, source, sink. If omitted, same is assumed.
  • same puts the elements on the same level.
  • min and max put them on the first and the last level.
  • source and sink do the same, and no other elements share that level.
• Targets are element references, so you can reference nested elements just like in other rules. Non-existent or duplicate targets are ignored.
• The constraint only affects elements that actually remain in the computed view. If a predicate later removes an element, it also disappears from the rank block.
• Rank rules participate in manual tiling of compound nodes as well, so authored constraints combine with the automatic layout instead of fighting it.

Use rank constraints sparingly: they are most helpful for anchoring critical columns/rows (e.g., ingress vs. egress nodes, semantic grouping in lieu of container) to achieve better layout.

Diagram and Graph display modes

Starting with v1.60.0, element views support two display modes:

• Diagram: renders elements in the diagram layout.
• Graph: renders leaf elements as compact circles linked by straight lines, with draggable nodes arranged by an animated, physics-based simulation.

Graph mode currently flattens the view hierarchy: it only shows leaf elements (those without children). Compound/group nodes and any relationships connected directly to those nodes are omitted. Switch back to Diagram to see the full hierarchy and those relationships.

Use the Diagram / Graph toggle in the navigation panel to switch modes. This changes the presentation of an element view without changing its DSL model definition.