VueCraft NPM

Connection Styling ​

Everything that decides how a single connection looks lives on its style (ConnectionStyle). style has the same shape as the lines group of the configuration, plus a markers field for the ends. A field left out falls back to the lines group of the configuration, then to the theme, then to the built-in value.

ts
linker.setConnections([
  {
    id: 'a-b',
    from: { blockId: 'a' },
    to: { blockId: 'b' },
    style: {
      color: '#6366f1',
      width: 2,
      hover: { width: 3 },
      markers: { end: { shape: 'arrow', size: 8 } },
    },
  },
])

Styling a connection ​

ConnectionStyle

curve ​

'bezier' | 'straight' | 'smoothstep' · default: follows lines.curve ('bezier')

See Connections for what each curve type does.

color ​

string · default: follows lines.color, then the theme's line ('#2e8b57')

width ​

number · default: follows lines.width (1.5)

dashed ​

boolean · default: follows lines.dashed (false)

opacity ​

number, 0..1 · default: follows lines.opacity (1)

The opacity of the line. Markers without an opacity of their own fade with it.

highlight, hover, selected, focus ​

{ color?; width?; dashed?; opacity? } · default: follows the same bucket of lines

The fields that change while the connection is in that state, each falling back to the value below it. See Visual States for what the four states mean and how they stack. hover and highlight apply only while interaction.hover and interaction.highlight are on.

bezier ​

{ curvature?; minReach?; maxReach?; angleBlend?; angleMaxOffset? } · default: follows lines.bezier

The shape of a bezier curve — curvature (0.5), minReach (24), maxReach (160), angleBlend (0.55) and angleMaxOffset (30, in degrees). Each is described in Configuration. Only for curve: 'bezier'.

smoothstep ​

{ cornerRadius?; maxTrunkReach? } · default: follows lines.smoothstep

The shape of a smoothstep line — cornerRadius (8) rounds the bends and the branch point where connections sharing a port split off a trunk, maxTrunkReach (48) caps how far such a trunk extends. When siblings disagree on maxTrunkReach, the group uses the smallest value. Only for curve: 'smoothstep'.

routing ​

{ avoidObstacles?; padding? } · default: follows lines.routing

Routes this smoothstep connection around the other blocks; avoidObstacles: false opts it out of a setting made for every line. See Routing and Crossings.

jumps ​

boolean | { radius?: number } · default: follows lines.jumps

Makes this smoothstep connection hop over the lines it crosses; false opts it out. See Routing and Crossings.

animated ​

boolean | ConnectionFlow · default: follows lines.animated (off)

Animates a pattern of dashes or dots along the line, from from towards to. true takes the defaults, an object tunes them (speed, direction, shape, dash, gap, color, width), false turns off a setting made for every line. See Animated Flow.

markers ​

{ start?: MarkerInput; end?: MarkerInput } · default: follows markers.start and markers.end of the configuration, otherwise the built-in port dot

The markers at the two ends of the line. A MarkerInput is false, a shape name (shorthand for { shape }) or a marker config. false removes even the built-in port dot at that end, leaving a bare point — for when a Vue #marker slot, or nothing at all, should be the only thing there. A marker config set here merges field by field over the configuration's marker of the same end. 'arrow' at the end shows the connection's direction. The fields are described under Marker shapes below.

Example — every field at once:

ts
linker.setConnections([
  {
    id: 'a-b', // this connection's own id
    from: { blockId: 'a' }, // starts on block "a"'s own border
    to: { blockId: 'b' }, // ends on block "b"'s own border
    style: {
      curve: 'smoothstep', // orthogonal routing instead of the bezier default
      color: '#6366f1', // indigo line instead of the default green
      width: 2, // a bit thicker than the 1.5px default
      dashed: false, // solid line
      opacity: 0.8, // slightly faded at rest
      bezier: { curvature: 0.6, minReach: 24, maxReach: 160, angleBlend: 0.55, angleMaxOffset: 30 }, // no effect here, curve is 'smoothstep'
      smoothstep: { cornerRadius: 12, maxTrunkReach: 60 }, // rounder bends, a slightly longer shared trunk
      routing: { avoidObstacles: true, padding: 12 }, // go around other blocks
      jumps: { radius: 6 }, // hop over the lines this one crosses
      animated: { shape: 'dashes', speed: 60, direction: 'forward' }, // a pattern flowing from a to b
      highlight: { width: 2.5 }, // a hovered block lights this line a little
      hover: { color: '#312e81', width: 3, opacity: 1 }, // darker, thicker and fully opaque under the pointer
      selected: { color: '#1f6feb' }, // needs interaction.selectable
      focus: { width: 4 }, // keyboard focus
      markers: {
        start: false, // no dot, no marker at all, on this end
        end: { shape: 'arrow', size: 8, hover: { size: 11 } }, // a bigger arrowhead that grows further on hover
      },
    },
  },
])

Marker shapes ​

MarkerConfig

The full form of a marker: used for markers.start and markers.end here, and in the markers group of the configuration. A bare shape name (e.g. 'arrow') is shorthand for { shape: 'arrow' }.

shape ​

'circle' | 'square' | 'diamond' | 'arrow' · default: 'circle'

Ignored when svg is set.

size ​

number · default: the size for the shape in markers.sizes (6)

Marker size, as a multiple of the connection's current stroke width — so it scales with a thicker or hovered line.

color ​

string · default: follows the connection's line color of the moment

Fill color for a built-in shape. Ignored by 'arrow' (no fill — see strokeColor).

strokeColor ​

string · default: — (no outline)

Outline color for a built-in 'circle'/'square'/'diamond' shape. Has no effect on 'arrow', which already uses color as its one stroke.

strokeWidth ​

number · default: 1

Outline width, in the marker's own viewBox units. Ignored when strokeColor is unset.

opacity ​

number, 0..1 · default: follows the connection's opacity

className ​

string · default: — (unset)

CSS class added to the marker's root SVG element, for full custom styling via external CSS.

svg ​

string · default: — (unset)

Raw inner SVG markup for a fully custom marker (overrides shape), drawn in a 0 0 20 20 viewBox centered on the connection endpoint.

Inserted as-is — only pass markup you trust, never unsanitized user input.

orient ​

'auto' | 'fixed' · default: follows shape ('auto' for the built-in 'arrow', 'fixed' otherwise)

'auto' rotates the marker to follow the line's direction; 'fixed' keeps it upright. Always 'auto' when arrow is set.

arrow ​

boolean | MarkerArrowConfig · default: — (no arrow)

Also draws an arrowhead on the line right before the shape, its tip stopping exactly on the shape's outer edge (outline included) — a port dot and a direction arrow in one marker, instead of the two overlapping. true uses the defaults below. Ignored when shape is 'arrow' itself.

MarkerArrowConfig

color ​

string · default: follows the connection's line color (not the shape's fill)

gap ​

number · default: 0

Extra space between the arrow's tip and the shape's edge, in the marker's 20-unit viewBox. For a custom svg marker, whose edge can't be measured, this is the distance from the endpoint itself.

highlight, hover, selected, focus ​

Partial<MarkerConfig> · default: — (unset, the marker looks the same in every state)

The fields that change while the marker's connection is in that state. A marker can swap its shape, its size, its colors or a whole custom svg. See Visual States.

Example — a shape that changes on hover and selection:

ts
markers: {
  end: {
    shape: 'circle',
    size: 6,
    hover: { shape: 'diamond', size: 10, strokeColor: '#ffffff', strokeWidth: 1 }, // a diamond with an outline under the pointer
    selected: { svg: '<path d="M4,4 L16,10 L4,16 L8,10 Z" fill="#1f6feb" />' }, // a custom shape once selected
  },
}

Example — a shape carrying an arrow:

ts
markers: {
  end: {
    shape: 'circle', // the dot stays on the endpoint
    color: '#ffffff', // white fill
    strokeColor: '#6366f1', // indigo outline — the arrow's tip stops on its outer edge
    strokeWidth: 2,
    arrow: { color: '#e0526c', gap: 1 }, // own color, 1 viewBox unit of air before the outline
  },
}

Example — every field at once:

ts
markers: {
  end: {
    shape: 'diamond', // one of 'circle' | 'square' | 'diamond' | 'arrow' — ignored if svg is set
    size: 8, // bigger than the default 6× stroke width
    color: '#f59e0b', // amber fill, instead of following the line's color
    strokeColor: '#78350f', // a dark amber outline around the shape
    strokeWidth: 1.5, // outline thickness, in the marker's own viewBox units
    opacity: 0.9, // a touch transparent
    className: 'vl-marker--priority', // hook for extra CSS you control externally
    orient: 'fixed', // stays upright instead of rotating to follow the line's direction
  },
}

Setting svg: '<path d="..." />' instead of shape draws that markup directly and overrides shape/the built-in shapes entirely — useful for a marker no built-in shape covers (a custom icon, a company logo).