Skip to main content
DataFlow Animator

Connections and zones

Two elements of decor structure the scene in the background, independently from the timeline: connections (permanent links between nodes) and zones (regions enclosing a group of nodes). Both are displayed right from the initialization, with no animation to trigger.

Permanent connections​

The connections root array declares links that are permanently displayed (the diagram's decor). This is distinct from the arrow action, which draws an animated arrow at a specific moment in the timeline.

connections: [
  { from: 'browser', to: 'api', style: 'dashed', arrow_head: 'both' },
  { from: 'api', to: 'db', style: 'dashed' },
],

style — line style​

Four styles, shared with the arrow action (the historical full alias is tolerated for solid):

Loading…

The animated style scrolls the dashes to suggest a continuous flow (real-time connection, WebSocket...).

path — trace shape​

Independently of the line style, path sets the shape of the path. Five values, shared with the arrow action (bezier by default):

Loading…
{ from: 'lb', to: 'api1', path: 'bezier' }     // smooth curve (default)
{ from: 'lb', to: 'api1', path: 'simplebezier' } // more discreet curve
{ from: 'lb', to: 'api1', path: 'straight' }   // direct segment
{ from: 'lb', to: 'api1', path: 'step' }       // right angles
{ from: 'lb', to: 'api1', path: 'smoothstep' } // rounded right angles

The curvature only appears when there is a transverse offset (different lanes, fan-out, bidirectional lanes): between two perfectly aligned nodes, all shapes blend into a straight line. Packets of a move action follow the bezier path by default.

arrow_head — arrowheads​

arrow_head controls the arrow tips (forward by default):

Loading…
{ from: 'a', to: 'b', arrow_head: 'forward' }  // tip at destination (default)
{ from: 'a', to: 'b', arrow_head: 'backward' } // tip at start
{ from: 'a', to: 'b', arrow_head: 'both' }     // both ways
{ from: 'a', to: 'b', arrow_head: 'none' }     // simple line, no tip

text — middle label​

An optional text is displayed in the middle of the link (e.g., a protocol, a port):

{ from: 'api', to: 'db', text: 'TCP 5432' }

color — line color​

color tints the whole path and its arrow head(s) — a predefined CSS name (steelblue, tomato…) or an exact hex. The median text label keeps the theme color so it stays legible. Left out, the connection uses the theme's neutral color. A set_color action on the connection's id recolors it at runtime.

{ from: 'api', to: 'db', color: 'steelblue' }

highlighted — permanent emphasis​

highlighted: true gives the connection the accent color, a thicker stroke and a glow — the same emphasis the highlight action applies at a moment in the timeline, but static (displayed from the start). It takes precedence over color.

{ from: 'api', to: 'db', highlighted: true }
Loading…

Zones​

The zones root array draws background rectangles encompassing a group of nodes: handy for materializing a network, a cluster, a trust boundary. A zone resizes automatically to contain all its members.

zones: [
  { contains: ['browser'], label: 'Client', color: '#3b82f6' },
  { contains: ['api', 'db'], label: 'Infrastructure', color: '#22c55e' },
],
Loading…
FieldRole
containsIDs of nodes and/or enclosed zones (required).
colorCSS color for the border and semi-transparent background.
labelText displayed at the top left of the zone.
idOptional — only required to nest the zone (see below).

Nested zones​

A zone can contain another: reference the id of the inner zone in the contains of the outer zone. The enclosing zone expands to cover it.

zones: [
  { id: 'core', contains: ['svc', 'data'], label: 'Core business', color: '#a855f7' },
  { contains: ['gw', 'core'], label: 'Cluster', color: '#64748b' }, // encloses the `core` zone
],
Loading…