> ## Documentation Index
> Fetch the complete documentation index at: https://docs.visk.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Connectors

> Lines and arrows between shapes, for diagrams and flowcharts

`<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`.

```html theme={null}
<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

```html theme={null}
<!-- 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

```html theme={null}
<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

```html theme={null}
<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

```html theme={null}
<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.