Flow
A lightweight node-graph / flowchart canvas that composes with light-DOM pura-flow-node children positioned by x/y attributes, and edges declared via the host edges attribute or slotted pura-flow-edge children.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | — | Canvas width (px number or CSS length) |
height | string | 400px | Canvas height (px number or CSS length) |
edges | string | — | JSON array of edge objects [{from, to}] |
readonly | boolean | — | Disables node dragging when present |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/flow.js"></script>import "./pura/lib/flow.js";