Connectors

<Connector> draws a line between two shapes and converts to a native PowerPoint connector, so it stays attached when someone moves the shapes in PowerPoint afterwards. For a plain horizontal or vertical rule that isn’t attached to anything, use a <div> with border-top or border-left instead.

Endpoints

Each end of a connector is either a shape anchor or a coordinate, and the two can be mixed on the same connector. Shapes referenced by from or to need a unique integer data-id.

<div data-id="1" box="80, 200, 200, 60">Discovery</div>
<div data-id="2" box="400, 200, 200, 60">Delivery</div>

<Connector from="#1" to="#2" head="arrow" style="stroke: #333; stroke-width: 1.5pt" />

Attribute	Description
`from` / `to`	`"#id"`, or `"#id anchor"` where anchor is `top`, `left`, `bottom`, `right` or `closest`. Usually just give the id and let it resolve the best edge automatically
`x1` / `y1`, `x2` / `y2`	Endpoint coordinates in pt, when not anchoring to a shape. No units needed
`variant`	PowerPoint connector preset. Omit for a straight line
`waypoints`	Space-separated percentages shifting the bend along the connector’s axis. `50%` is the midpoint, `20%` sits closer to the start. One value per waypoint the variant supports
`head` / `tail`	Arrow type: `arrow` or `triangle`
`style`	`stroke`, `stroke-width`, and `border-style` (`solid`, `dashed`, `dotted`, `dashDot`, `longDash`)

closest connects to the nearest edge point facing the other endpoint, which is what you want for circles and hub shapes.

Variants

Variant names are PowerPoint’s own presets, and the number is the segment count. A connector with N segments has N−1 corners, so bentConnector2 is the single-elbow one.

Variant	Shape	Corners	Adjustable points
(omit)	Straight line	0	0
`bentConnector2`	L, one right-angle corner	1	0
`bentConnector3`	Z, two corners	2	1
`bentConnector4`	Three corners	3	2
`bentConnector5`	Four corners	4	3

curvedConnector2–5 follow the same pattern with smooth curves instead of right angles. Adjustable points are what waypoints shifts. bentConnector2 has none because its corner is fixed by where the two endpoints sit, so it takes no waypoints value.

Common forms

<!-- Straight arrow, anchors inferred from position -->
<Connector from="#1" to="#2" head="arrow" style="stroke: #333; stroke-width: 1.5pt" />

<!-- Elbow with explicit anchors -->
<Connector from="#3 right" to="#4 left" variant="bentConnector3" head="arrow" style="stroke: #333" />

<!-- Smooth dashed curve -->
<Connector from="#5" to="#6" variant="curvedConnector3" style="stroke: #999; border-style: dashed" />

<!-- Shape to a fixed point -->
<Connector from="#7" x2="400" y2="200" head="triangle" style="stroke: #333" />

<!-- Bend shifted toward the start -->
<Connector from="#8" to="#9" variant="bentConnector3" waypoints="30%" head="arrow" style="stroke: #333" />

Diagram patterns

Lay the shapes out with grid or flex, then add connectors. Positions resolve from the rendered layout, so you don’t need to compute coordinates.

Issue tree

<div style="display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr 1fr; align-items: center; column-gap: 40pt; row-gap: 8pt">
  <div data-id="1" style="grid-row: 1 / -1; padding: 8pt 16pt; background: var(--accent1); color: white; font-weight: bold">
    Revenue declining
  </div>

  <div data-id="2" style="padding: 8pt 16pt; border: 1pt solid #666">Pricing pressure</div>
  <div data-id="3" style="padding: 8pt 16pt; border: 1pt solid #666">Churn increase</div>
  <div data-id="4" style="padding: 8pt 16pt; border: 1pt solid #666">Volume drop</div>
</div>

<Connector from="#1" to="#2" variant="bentConnector3" style="stroke: #555" />
<Connector from="#1" to="#3" style="stroke: #555" />
<Connector from="#1" to="#4" variant="bentConnector3" style="stroke: #555" />

The root spans all three rows, so the middle child connects straight across while the outer two elbow.

Horizontal flow

<div style="display: flex; align-items: center; gap: 40pt">
  <div data-id="10" style="padding: 12pt 16pt; border: 1pt solid var(--accent1); text-align: center">Input data</div>
  <div data-id="11" style="padding: 12pt 16pt; border: 1pt solid var(--accent1); text-align: center">Process</div>
  <div data-id="12" style="padding: 12pt 16pt; border: 1pt solid var(--accent1); text-align: center">Output</div>
</div>

<Connector from="#10" to="#11" head="arrow" style="stroke: var(--accent1); stroke-width: 1.5pt" />
<Connector from="#11" to="#12" head="arrow" style="stroke: var(--accent1); stroke-width: 1.5pt" />

Hub and spoke

<div style="position: relative; width: 100%; height: 100%">
  <div data-id="20" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 16pt 24pt; background: var(--accent1); color: white; border-radius: 50%; text-align: center">
    Core<br/>platform
  </div>

  <div data-id="21" style="position: absolute; left: 10%; top: 15%; padding: 8pt 14pt; border: 1pt solid #666">Analytics</div>
  <div data-id="22" style="position: absolute; right: 10%; top: 15%; padding: 8pt 14pt; border: 1pt solid #666">API</div>
  <div data-id="23" style="position: absolute; left: 10%; bottom: 15%; padding: 8pt 14pt; border: 1pt solid #666">Storage</div>
  <div data-id="24" style="position: absolute; right: 10%; bottom: 15%; padding: 8pt 14pt; border: 1pt solid #666">Auth</div>
</div>

<Connector from="#20 closest" to="#21" style="stroke: #555" />
<Connector from="#20 closest" to="#22" style="stroke: #555" />
<Connector from="#20 closest" to="#23" style="stroke: #555" />
<Connector from="#20 closest" to="#24" style="stroke: #555" />

closest on the hub means each spoke meets the circle at the point facing it, rather than all four converging on one edge.

Getting started

MCP

Visk HTML

Help

Endpoints

Variants

Common forms

Diagram patterns

Issue tree

Horizontal flow

Hub and spoke

​Endpoints

​Variants

​Common forms

​Diagram patterns

​Issue tree

​Horizontal flow

​Hub and spoke

Endpoints

Variants

Common forms

Diagram patterns

Issue tree

Horizontal flow

Hub and spoke