Components / Data display / Flow diagram
D7 · Data display New
Flow diagram
Signed bands from sources to uses. Colour follows the use: out or held.
<svg class="c-flow" viewBox="0 0 320 80" role="img" aria-label="Example flow">
<path d="M80,10 C140,10 180,40 240,40 L240,60 C180,60 140,30 80,30 Z" fill="var(--accent)" opacity="0.55"></path>
</svg>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- An amount splits from sources into uses.
- The sign of each use matters.
When not to use
- There is no conservation to show.
- A table of two columns is enough.
Usage
<svg class="c-flow" viewBox="0 0 320 80" role="img" aria-label="Example flow">
<path d="M80,10 C140,10 180,40 240,40 L240,60 C180,60 140,30 80,30 Z" fill="var(--accent)" opacity="0.55"></path>
</svg>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| source | name and amount | — | Left nodes. Payroll and Refund in this example. |
| use | name, amount, kind | — | Right nodes. Kind is out or hold. |
| link | amount | — | Band thickness on each side. |
Keyboard
| Key | Action |
|---|---|
| Tab | Reaches Values. |
| Enter | Opens Values. |
Accessibility
- The svg names the flow.
- A legend pairs colour with Out and Held.
- Values lists each amount in USD.
Motion
- No motion.
Pattern origin
Pattern type: a signed flow diagram.