A four-state node-link hierarchy on a Reingold–Tilford tidy layout — contour-packed coordinates from a pure function, foldable branches, curved, elbow or straight links, either orientation, and a flat ARIA tree over the drawing.
Preview in your theme
Loading preview…
This component is part of Pro
The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.
status="ready" · orientation="vertical" · linkShape="curved" — 15 nodes over 4 levels, laid out at 1281×324. Engineering is two levels deep and Design is one, so the deep branch tucks against its neighbours instead of reserving a box as wide as its subtree. Click a branch to fold it, arrows to walk a level or change level. Last activated: nothing yet. Last fold or unfold: none.
Product org · reporting linesSnapshot taken at the end of the quarter · headcount booked on each node
15 of 15 nodes · 4 levels · widest level 7
Tidy tree of Zyeon: 15 of 15 nodes drawn across 4 levels, root at the top and levels running downward. The widest level holds 7 nodes. Largest branch Engineering, with 6 nodes below it. Every node is listed in the table that follows.
Every parent sits centred over its children, and two neighbouring subtrees are pushed apart only as far as their facing outlines actually touch — the narrowest drawing of this tree that has no overlap. Click a branch to fold it, arrow keys to walk, Backspace to fold the branch you are in; the stage scrolls when the tree is wider than the card.
Every node currently drawn under Zyeon, with what it reports to, how deep it sits, how many nodes hang off it, and the figures booked on it and on its subtree.
Node
Reports to
Level
Position
Directly below
Below in total
Booked here
Subtree
State
Zyeon (Whole company)
—
1 of 4
1 of 1
3
14
2 people
95 people
open
Engineering (VP Engineering)
Zyeon
2 of 4
1 of 3
2
6
1 people
46 people
open
Platform (Runtime, fleet)
Engineering
3 of 4
1 of 2
2
2
1 people
25 people
open
Infrastructure (Build, deploy)
Platform
4 of 4
1 of 2
0
0
11 people
11 people
leaf
Data platform (Warehouse)
Platform
4 of 4
2 of 2
0
0
13 people
13 people
leaf
Product engineering (Surfaces)
Engineering
3 of 4
2 of 2
2
2
3 people
20 people
open
Web (App, marketing site)
Product engineering
4 of 4
1 of 2
0
0
7 people
7 people
leaf
Mobile (iOS, Android)
Product engineering
4 of 4
2 of 2
0
0
10 people
10 people
leaf
Design (Head of Design)
Zyeon
2 of 4
2 of 3
2
2
2 people
21 people
open
Product design (Surfaces)
Design
3 of 4
1 of 2
0
0
12 people
12 people
leaf
Brand (Identity, site)
Design
3 of 4
2 of 2
0
0
7 people
7 people
leaf
Revenue (CRO)
Zyeon
2 of 4
3 of 3
3
3
2 people
26 people
open
Sales (Mid-market)
Revenue
3 of 4
1 of 3
0
0
9 people
9 people
leaf
Marketing (Demand)
Revenue
3 of 4
2 of 3
0
0
11 people
11 people
leaf
Partnerships (Channel)
Revenue
3 of 4
3 of 3
0
0
4 people
4 people
leaf
orientation="horizontal" · linkShape="elbow" · nodeWidth={150} — the same reporting lines turned a quarter. Depth now costs one box width per level instead of one box width per leaf, which is the trade that makes long names and deep trees readable; the shared segment of each elbow IS the sibling group.
Product org · reporting linesRoot at the left · 732×567, so the stage scrolls inside the card
15 of 15 nodes · 4 levels · widest level 7
Tidy tree of Zyeon: 15 of 15 nodes drawn across 4 levels, root at the left and levels running to the right. The widest level holds 7 nodes. Largest branch Engineering, with 6 nodes below it. Every node is listed in the table that follows.
Every parent sits centred over its children, and two neighbouring subtrees are pushed apart only as far as their facing outlines actually touch — the narrowest drawing of this tree that has no overlap. Click a branch to fold it, arrow keys to walk, Backspace to fold the branch you are in; the stage scrolls when the tree is wider than the card.
Every node currently drawn under Zyeon, with what it reports to, how deep it sits, how many nodes hang off it, and the figures booked on it and on its subtree.
Node
Reports to
Level
Position
Directly below
Below in total
Booked here
Subtree
State
Zyeon (Whole company)
—
1 of 4
1 of 1
3
14
2 people
95 people
open
Engineering (VP Engineering)
Zyeon
2 of 4
1 of 3
2
6
1 people
46 people
open
Platform (Runtime, fleet)
Engineering
3 of 4
1 of 2
2
2
1 people
25 people
open
Infrastructure (Build, deploy)
Platform
4 of 4
1 of 2
0
0
11 people
11 people
leaf
Data platform (Warehouse)
Platform
4 of 4
2 of 2
0
0
13 people
13 people
leaf
Product engineering (Surfaces)
Engineering
3 of 4
2 of 2
2
2
3 people
20 people
open
Web (App, marketing site)
Product engineering
4 of 4
1 of 2
0
0
7 people
7 people
leaf
Mobile (iOS, Android)
Product engineering
4 of 4
2 of 2
0
0
10 people
10 people
leaf
Design (Head of Design)
Zyeon
2 of 4
2 of 3
2
2
2 people
21 people
open
Product design (Surfaces)
Design
3 of 4
1 of 2
0
0
12 people
12 people
leaf
Brand (Identity, site)
Design
3 of 4
2 of 2
0
0
7 people
7 people
leaf
Revenue (CRO)
Zyeon
2 of 4
3 of 3
3
3
2 people
26 people
open
Sales (Mid-market)
Revenue
3 of 4
1 of 3
0
0
9 people
9 people
leaf
Marketing (Demand)
Revenue
3 of 4
2 of 3
0
0
11 people
11 people
leaf
Partnerships (Channel)
Revenue
3 of 4
3 of 3
0
0
4 people
4 people
leaf
linkShape="straight" · expandDepth={2} — the top two levels stay open and every branch at level 3 or deeper starts folded, so 11 of 15 nodes are drawn and 4 sit behind a dashed bottom edge with a +n count. A rendering budget, not a filter: press the down arrow on a folded box to open it, and the hidden nodes are in the table either way.
Product org · reporting linesTwo levels open · fold state is yours to change from here
11 of 15 nodes · 3 levels · widest level 7
2 folded · 4 hidden
Tidy tree of Zyeon: 11 of 15 nodes drawn across 3 levels, root at the top and levels running downward. The widest level holds 7 nodes. Largest branch Engineering, with 6 nodes below it. 2 branches are folded, hiding 4 nodes. Every node is listed in the table that follows.
Every parent sits centred over its children, and two neighbouring subtrees are pushed apart only as far as their facing outlines actually touch — the narrowest drawing of this tree that has no overlap. Click a branch to fold it, arrow keys to walk, Backspace to fold the branch you are in; the stage scrolls when the tree is wider than the card. 4 nodes sit behind 2 folded branches, and stays in the table below.
Every node currently drawn under Zyeon, with what it reports to, how deep it sits, how many nodes hang off it, and the figures booked on it and on its subtree.
Node
Reports to
Level
Position
Directly below
Below in total
Booked here
Subtree
State
Zyeon (Whole company)
—
1 of 3
1 of 1
3
14
2 people
95 people
open
Engineering (VP Engineering)
Zyeon
2 of 3
1 of 3
2
6
1 people
46 people
open
Platform (Runtime, fleet)
Engineering
3 of 3
1 of 2
2
2
1 people
25 people
folded, hiding 2
Product engineering (Surfaces)
Engineering
3 of 3
2 of 2
2
2
3 people
20 people
folded, hiding 2
Design (Head of Design)
Zyeon
2 of 3
2 of 3
2
2
2 people
21 people
open
Product design (Surfaces)
Design
3 of 3
1 of 2
0
0
12 people
12 people
leaf
Brand (Identity, site)
Design
3 of 3
2 of 2
0
0
7 people
7 people
leaf
Revenue (CRO)
Zyeon
2 of 3
3 of 3
3
3
2 people
26 people
open
Sales (Mid-market)
Revenue
3 of 3
1 of 3
0
0
9 people
9 people
leaf
Marketing (Demand)
Revenue
3 of 3
2 of 3
0
0
11 people
11 people
leaf
Partnerships (Channel)
Revenue
3 of 3
3 of 3
0
0
4 people
4 people
leaf
Awkward data, none of it silently repaired: a 57-character label truncated by CSS with the full name in the tooltip and the accessible name, an eleven-way fan-out that makes the widest level 14 boxes across, a five-deep chain, and two figures — one NaN, one negative — dropped and counted in the footnote rather than coerced.
Content taxonomy · awkward dataLong names, an eleven-way fan-out, a deep chain and two unusable figures
21 of 21 nodes · 6 levels · widest level 14
Tidy tree of Content taxonomy: 21 of 21 nodes drawn across 6 levels, root at the top and levels running downward. The widest level holds 14 nodes. Largest branch Tags, with 11 nodes below it. 2 figures were left out for being negative or not a number. Every node is listed in the table that follows.
Every parent sits centred over its children, and two neighbouring subtrees are pushed apart only as far as their facing outlines actually touch — the narrowest drawing of this tree that has no overlap. Click a branch to fold it, arrow keys to walk, Backspace to fold the branch you are in; the stage scrolls when the tree is wider than the card.
2 figures were left out for being negative or not a number. The shape is unaffected: a tidy tree encodes structure, never size.
Every node currently drawn under Content taxonomy, with what it reports to, how deep it sits, how many nodes hang off it, and the figures booked on it and on its subtree.
Node
Reports to
Level
Position
Directly below
Below in total
Booked here
Subtree
State
Content taxonomy (Everything published)
—
1 of 6
1 of 1
3
20
—
331 editors
open
Editorial standards and long-form investigative reporting (The label is far wider than the box it has to fit in)
Content taxonomy
2 of 6
1 of 3
2
2
—
10 editors
open
Standards
Editorial standards and long-form investigative reporting
3 of 6
1 of 2
0
0
6 editors
6 editors
leaf
Investigations
Editorial standards and long-form investigative reporting
3 of 6
2 of 2
0
0
4 editors
4 editors
leaf
Tags (Eleven siblings on one level)
Content taxonomy
2 of 6
2 of 3
11
11
—
316 editors
open
long-form
Tags
3 of 6
1 of 11
0
0
31 editors
31 editors
leaf
editorial
Tags
3 of 6
2 of 11
0
0
37 editors
37 editors
leaf
syndicated
Tags
3 of 6
3 of 11
0
0
34 editors
34 editors
leaf
sponsored
Tags
3 of 6
4 of 11
0
0
29 editors
29 editors
leaf
evergreen
Tags
3 of 6
5 of 11
0
0
32 editors
32 editors
leaf
seasonal
Tags
3 of 6
6 of 11
0
0
20 editors
20 editors
leaf
localised
Tags
3 of 6
7 of 11
0
0
40 editors
40 editors
leaf
video-first
Tags
3 of 6
8 of 11
0
0
15 editors
15 editors
leaf
podcast
Tags
3 of 6
9 of 11
0
0
40 editors
40 editors
leaf
newsletter
Tags
3 of 6
10 of 11
0
0
3 editors
3 editors
leaf
user-generated
Tags
3 of 6
11 of 11
0
0
35 editors
35 editors
leaf
Archive (A chain, not a fan)
Content taxonomy
2 of 6
3 of 3
1
4
—
5 editors
open
2019 and earlier
Archive
3 of 6
1 of 1
1
3
2 editors
5 editors
open
Print originals
2019 and earlier
4 of 6
1 of 1
1
2
1 editors
3 editors
open
Scanned pages
Print originals
5 of 6
1 of 1
1
1
1 editors
2 editors
open
OCR corrections
Scanned pages
6 of 6
1 of 1
0
0
1 editors
1 editors
leaf
rootId="acme" — the same two-tenant export that is refused below, now told which tree to draw. Everything outside that subtree is left out of the layout, the summary and the table.
Account hierarchy · all tenantsOne tenant picked out of a forest
4 of 4 nodes · 3 levels · widest level 2
Tidy tree of Acme Rail: 4 of 4 nodes drawn across 3 levels, root at the top and levels running downward. The widest level holds 2 nodes. Largest branch Operations, with 1 node below it. Every node is listed in the table that follows.
Every parent sits centred over its children, and two neighbouring subtrees are pushed apart only as far as their facing outlines actually touch — the narrowest drawing of this tree that has no overlap. Click a branch to fold it, arrow keys to walk, Backspace to fold the branch you are in; the stage scrolls when the tree is wider than the card.
Every node currently drawn under Acme Rail, with what it reports to, how deep it sits, how many nodes hang off it, and the figures booked on it and on its subtree.
Node
Reports to
Level
Position
Directly below
Below in total
Booked here
Subtree
State
Acme Rail (Tenant)
—
1 of 3
1 of 1
2
3
—
51 people
open
Operations
Acme Rail
2 of 3
1 of 2
1
1
12 people
46 people
open
Depot crews
Operations
3 of 3
1 of 1
0
0
34 people
34 people
leaf
Finance
Acme Rail
2 of 3
2 of 2
0
0
5 people
5 people
leaf
status="loading" — the skeleton is the real layout run over a placeholder tree, so the card is already the shape of the chart that replaces it. aria-hidden, one sr-only status line, no timers.
Product org · reporting linesFetching the directory
Loading hierarchy
status="empty" — the export ran and came back with no nodes at all. A different sentence from “still loading”.
Product org · reporting linesNo reporting lines recorded
Nothing to lay out yet
A tidy tree needs at least one node; branches appear as soon as something reports into one.
status="error" with onRetry — press Try again to swap to ready. Omit onRetry and the button never renders.
Product org · reporting linesDirectory export timed out
Couldn’t load this hierarchy
The data source didn’t respond.
Degenerate: a single node. There is no breadth to lay out, so the stage is exactly one box wide and the picture is still complete.
Single-node hierarchyOne node, no reports — the smallest tree that is still a tree
1 of 1 nodes · 1 level · widest level 1
Tidy tree of Sole practitioner: 1 of 1 node drawn across 1 level, root at the top and levels running downward. The widest level holds 1 node. Every node is listed in the table that follows.
Every parent sits centred over its children, and two neighbouring subtrees are pushed apart only as far as their facing outlines actually touch — the narrowest drawing of this tree that has no overlap. Click a branch to fold it, arrow keys to walk, Backspace to fold the branch you are in; the stage scrolls when the tree is wider than the card.
Every node currently drawn under Sole practitioner, with what it reports to, how deep it sits, how many nodes hang off it, and the figures booked on it and on its subtree.
Node
Reports to
Level
Position
Directly below
Below in total
Booked here
Subtree
State
Sole practitioner (Reports to nobody, nobody reports in)
—
1 of 1
1 of 1
0
0
3 people
3 people
leaf
Refusal: two tenants in one export means two nodes with no parent. The message names them and says how to resolve it, instead of drawing one and dropping the other.
Account hierarchy · all tenantsTwo tenants in one export — a forest, not a tree
This hierarchy can’t be drawn
2 nodes have no parent ("Acme Rail", "Contoso Foods"). A tidy tree draws one tree — pass rootId to say which.
Refusal: Intake → Review → Legal → Intake is a real approval workflow and an illegal hierarchy. The loop is found and named before any traversal runs; unchecked, every walk in the layout would run forever.
Approval chain · with a rework loopAn approval workflow imported as if it were a hierarchy
This hierarchy can’t be drawn
Parent links loop through Intake → Legal → Review. A tree needs a top.
Zyeon UI