A four-state arc diagram in plain SVG — nodes on one sequence-preserving baseline, half-ellipse arcs sized by weight, back-edges below the axis, hover to raise a node's arcs, and a keyboard walk over an sr-only node and arc table.
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" · 12 services sit on the baseline in first-call order, with 16 directed calls totalling 185,223 calls. Arc thickness = call volume; arc height = how many slots it spans. Two are drawn below the axis: Payments → Auth service (5 slots back) and Redis cache → API gateway (8 slots back — a span that lands exactly on the maxArcHeight=120 ceiling, one slot further and it would flatten into an ellipse). Auth service has a self-loop (token refresh retrying itself); Catalog → Audit log is only 3 calls (0.0016%), about 0.001px at true proportion, and on screen at all only because of minLinkWidth=1.2.
Point at a node or an arc — or press Tab and use the arrow keys — to read its numbers.
Edge (2)
Core (6)
Data (3)
Async (1)
Nodes sit in first-call order. An arc's thickness is its weight; its height is how far it reaches. An arc above the axis runs forward; one below points back to an earlier slot. Arrow keys walk the baseline, ↓ steps into a node's arcs, Enter follows one to its other end, Escape clears. 2 labels are shortened; the table below names every node in full. The drawing scrolls sideways rather than shrinking its labels.
Arc diagram: 12 nodes laid out in first-call order, joined by 16 directed links worth 185,223 calls in total. Busiest node API gateway, touching 4 partners and 104,800 calls (56.6% of all weight). Strongest link Edge router to API gateway: 41,000 calls · 22.1% of all weight · spans 1 slot. 2 links point back to an earlier slot and are drawn below the axis.
Every node on the baseline, in the order it is drawn, with the weight that touches it and the marker that stands for its group.
Node
Slot
Group
Marker
Partners
Weight touched
Share of all weight
Edge router
1 of 12
Edge
circle, solid
1
41,000 calls
22.1%
API gateway
2 of 12
Edge
circle, solid
4
104,800 calls
56.6%
Auth service
3 of 12
Core
square, solid
3
43,320 calls
23.4%
Cart service
4 of 12
Core
square, solid
4
49,800 calls
26.9%
Catalog service
5 of 12
Core
square, solid
4
45,903 calls
24.8%
Pricing engine
6 of 12
Core
square, solid
2
18,200 calls
9.8%
Inventory
7 of 12
Core
square, solid
1
6,200 calls
3.3%
Payments
8 of 12
Core
square, solid
4
14,600 calls
7.9%
Ledger
9 of 12
Data
diamond, solid
2
8,600 calls
4.6%
Redis cache
10 of 12
Data
diamond, solid
3
29,000 calls
15.7%
Notifier
11 of 12
Async
triangle, solid
1
4,100 calls
2.2%
Audit log
12 of 12
Data
diamond, solid
2
4,303 calls
2.3%
Every arc, with the weight it carries, how many slots it reaches across and which side of the axis it is drawn on.
From
To
Weight
Share
Span
Side
Edge router (slot 1)
API gateway (slot 2)
41,000 calls
22.1%
1 slot
above, points forward
API gateway (slot 2)
Auth service (slot 3)
40,800 calls
22%
1 slot
above, points forward
API gateway (slot 2)
Cart service (slot 4)
20,400 calls
11%
2 slots
above, points forward
Redis cache (slot 10)
API gateway (slot 2)
2,600 calls
1.4%
8 slots
below, points back
Auth service (slot 3)
itself
620 calls
0.33%
same slot
loop above
Payments (slot 8)
Auth service (slot 3)
1,900 calls
1%
5 slots
below, points back
Cart service (slot 4)
Catalog service (slot 5)
18,900 calls
10.2%
1 slot
above, points forward
Cart service (slot 4)
Inventory (slot 7)
6,200 calls
3.3%
3 slots
above, points forward
Cart service (slot 4)
Payments (slot 8)
4,300 calls
2.3%
4 slots
above, points forward
Catalog service (slot 5)
Pricing engine (slot 6)
9,400 calls
5.1%
1 slot
above, points forward
Catalog service (slot 5)
Redis cache (slot 10)
17,600 calls
9.5%
5 slots
above, points forward
Catalog service (slot 5)
Audit log (slot 12)
3 calls
0.0016%
7 slots
above, points forward
Pricing engine (slot 6)
Redis cache (slot 10)
8,800 calls
4.8%
4 slots
above, points forward
Payments (slot 8)
Ledger (slot 9)
4,300 calls
2.3%
1 slot
above, points forward
Payments (slot 8)
Notifier (slot 11)
4,100 calls
2.2%
3 slots
above, points forward
Ledger (slot 9)
Audit log (slot 12)
4,300 calls
2.3%
3 slots
above, points forward
onNodeSelect: nothing picked yet — click a node, or Tab in and press Enter
status="empty" · the contract is satisfied but not one node is on the baseline — told apart from "still loading" and "the fetch failed".
Checkout request · service call graph
Nothing on the baseline yet
Nodes and arcs appear here once the first sequence is recorded.
status="loading" · arc-shaped skeletons plus two placeholder legend rows, aria-hidden, no timer involved.
Checkout request · service call graph
Loading arc diagram
status="error" · the fetch failed; Try again only appears when onRetry is passed, and clicking it swaps to ready.
Checkout request · service call graph
Couldn't load this diagram
The data source didn't respond.
side="above" · fit="scale" · the same data folded onto one side: the two backwards calls flip above the axis and the card drops from 323px to 212px, at the cost that "backwards" is now only legible in the tooltip and the table. fit="scale" hands the viewBox to the container — the whole chart always fits on screen, but the 11px labels shrink with it.
Checkout request · service call graph
12 nodes · 16 directed links · 185,223 calls
Point at a node or an arc — or press Tab and use the arrow keys — to read its numbers.
Edge (2)
Core (6)
Data (3)
Async (1)
Nodes sit in first-call order. An arc's thickness is its weight; its height is how far it reaches. Every arc is folded above the axis, so direction is left-to-right only. Arrow keys walk the baseline, ↓ steps into a node's arcs, Enter follows one to its other end, Escape clears. 2 labels are shortened; the table below names every node in full.
Arc diagram: 12 nodes laid out in first-call order, joined by 16 directed links worth 185,223 calls in total. Busiest node API gateway, touching 4 partners and 104,800 calls (56.6% of all weight). Strongest link Edge router to API gateway: 41,000 calls · 22.1% of all weight · spans 1 slot.
Every node on the baseline, in the order it is drawn, with the weight that touches it and the marker that stands for its group.
Node
Slot
Group
Marker
Partners
Weight touched
Share of all weight
Edge router
1 of 12
Edge
circle, solid
1
41,000 calls
22.1%
API gateway
2 of 12
Edge
circle, solid
4
104,800 calls
56.6%
Auth service
3 of 12
Core
square, solid
3
43,320 calls
23.4%
Cart service
4 of 12
Core
square, solid
4
49,800 calls
26.9%
Catalog service
5 of 12
Core
square, solid
4
45,903 calls
24.8%
Pricing engine
6 of 12
Core
square, solid
2
18,200 calls
9.8%
Inventory
7 of 12
Core
square, solid
1
6,200 calls
3.3%
Payments
8 of 12
Core
square, solid
4
14,600 calls
7.9%
Ledger
9 of 12
Data
diamond, solid
2
8,600 calls
4.6%
Redis cache
10 of 12
Data
diamond, solid
3
29,000 calls
15.7%
Notifier
11 of 12
Async
triangle, solid
1
4,100 calls
2.2%
Audit log
12 of 12
Data
diamond, solid
2
4,303 calls
2.3%
Every arc, with the weight it carries, how many slots it reaches across and which side of the axis it is drawn on.
From
To
Weight
Share
Span
Side
Edge router (slot 1)
API gateway (slot 2)
41,000 calls
22.1%
1 slot
above, points forward
API gateway (slot 2)
Auth service (slot 3)
40,800 calls
22%
1 slot
above, points forward
API gateway (slot 2)
Cart service (slot 4)
20,400 calls
11%
2 slots
above, points forward
Redis cache (slot 10)
API gateway (slot 2)
2,600 calls
1.4%
8 slots
above, points back
Auth service (slot 3)
itself
620 calls
0.33%
same slot
loop above
Payments (slot 8)
Auth service (slot 3)
1,900 calls
1%
5 slots
above, points back
Cart service (slot 4)
Catalog service (slot 5)
18,900 calls
10.2%
1 slot
above, points forward
Cart service (slot 4)
Inventory (slot 7)
6,200 calls
3.3%
3 slots
above, points forward
Cart service (slot 4)
Payments (slot 8)
4,300 calls
2.3%
4 slots
above, points forward
Catalog service (slot 5)
Pricing engine (slot 6)
9,400 calls
5.1%
1 slot
above, points forward
Catalog service (slot 5)
Redis cache (slot 10)
17,600 calls
9.5%
5 slots
above, points forward
Catalog service (slot 5)
Audit log (slot 12)
3 calls
0.0016%
7 slots
above, points forward
Pricing engine (slot 6)
Redis cache (slot 10)
8,800 calls
4.8%
4 slots
above, points forward
Payments (slot 8)
Ledger (slot 9)
4,300 calls
2.3%
1 slot
above, points forward
Payments (slot 8)
Notifier (slot 11)
4,100 calls
2.2%
3 slots
above, points forward
Ledger (slot 9)
Audit log (slot 12)
4,300 calls
2.3%
3 slots
above, points forward
relation="undirected" · co-occurrence data: across the 12 rows, billing→refund (210) and refund→billing (96) are the same fact, so they fold into one arc of 306 and only 11 get drawn. Undirected means there is no such thing as backwards, so everything sits above the axis and side has no effect here.
Support tags · co-occurrence in one ticket
10 nodes · 11 relationships · 1,489 tickets
Point at a node or an arc — or press Tab and use the arrow keys — to read its numbers.
Access (4)
Money (4)
Platform (2)
Nodes sit in tag family order. An arc's thickness is its weight; its height is how far it reaches. Pairs are undirected, so every arc is drawn above the axis. Arrow keys walk the baseline, ↓ steps into a node's arcs, Enter follows one to its other end, Escape clears. 1 label is shortened; the table below names every node in full. The drawing scrolls sideways rather than shrinking its labels.
Arc diagram: 10 nodes laid out in tag family order, joined by 11 relationships worth 1,489 tickets in total. Busiest node billing, touching 2 partners and 481 tickets (32.3% of all weight). Strongest link billing with refund: 306 tickets · 20.6% of all weight · spans 1 slot.
Every node on the baseline, in the order it is drawn, with the weight that touches it and the marker that stands for its group.
Node
Slot
Group
Marker
Partners
Weight touched
Share of all weight
login
1 of 10
Access
circle, solid
3
473 tickets
31.8%
sso
2 of 10
Access
circle, solid
3
432 tickets
29%
mfa
3 of 10
Access
circle, solid
3
361 tickets
24.2%
account-recovery
4 of 10
Access
circle, solid
2
153 tickets
10.3%
billing
5 of 10
Money
square, solid
2
481 tickets
32.3%
refund
6 of 10
Money
square, solid
1
306 tickets
20.6%
invoice
7 of 10
Money
square, solid
3
317 tickets
21.3%
tax-rate
8 of 10
Money
square, solid
1
88 tickets
5.9%
data-export
9 of 10
Platform
diamond, solid
2
187 tickets
12.6%
public-api
10 of 10
Platform
diamond, solid
2
180 tickets
12.1%
Every arc, with the weight it carries, how many slots it reaches across and which side of the axis it is drawn on.
From
To
Weight
Share
Span
Side
login (slot 1)
sso (slot 2)
264 tickets
17.7%
1 slot
above, points forward
login (slot 1)
mfa (slot 3)
148 tickets
9.9%
2 slots
above, points forward
login (slot 1)
account-recovery (slot 4)
61 tickets
4.1%
3 slots
above, points forward
sso (slot 2)
mfa (slot 3)
121 tickets
8.1%
1 slot
above, points forward
sso (slot 2)
public-api (slot 10)
47 tickets
3.2%
8 slots
above, points forward
mfa (slot 3)
account-recovery (slot 4)
92 tickets
6.2%
1 slot
above, points forward
billing (slot 5)
refund (slot 6)
306 tickets
20.6%
1 slot
above, points forward
billing (slot 5)
invoice (slot 7)
175 tickets
11.8%
2 slots
above, points forward
invoice (slot 7)
tax-rate (slot 8)
88 tickets
5.9%
1 slot
above, points forward
invoice (slot 7)
data-export (slot 9)
54 tickets
3.6%
2 slots
above, points forward
data-export (slot 9)
public-api (slot 10)
133 tickets
8.9%
1 slot
above, points forward
degenerate data · one row: a single node, no relationships at all. The baseline still draws and the label still sits on it, and the summary says there are no relationships instead of naming a strongest link that does not exist.
Cold start · single step
1 node · 0 directed links
Point at a node or an arc — or press Tab and use the arrow keys — to read its numbers.
Nodes sit in boot order. An arc above the axis runs forward; one below points back to an earlier slot. Arrow keys walk the baseline, ↓ steps into a node's arcs, Enter follows one to its other end, Escape clears. The drawing scrolls sideways rather than shrinking its labels.
Arc diagram: 1 node laid out in boot order, with no relationships between them at all. 1 node keeps its slot but has no link at all: Bootstrap.
Every node on the baseline, in the order it is drawn, with the weight that touches it and the marker that stands for its group.
Node
Slot
Group
Marker
Partners
Weight touched
Share of all weight
Bootstrap
1 of 1
not grouped
circle, solid
0
0 calls
0%
Every arc, with the weight it carries, how many slots it reaches across and which side of the axis it is drawn on.
From
To
Weight
Share
Span
Side
degenerate data · one relationship at 100%: two nodes and a single arc of 1,200. It is both the thickest and the thinnest — thickness encodes nothing here, so it draws at a neutral width rather than a maxed-out 14px pretending to be as strong as strong gets.
Handshake · client to broker
2 nodes · 1 directed link · 1,200 messages
Point at a node or an arc — or press Tab and use the arrow keys — to read its numbers.
Client (1)
Server (1)
Nodes sit in handshake order. Every link weighs the same, so thickness is carrying nothing and every arc is drawn at one neutral width. An arc above the axis runs forward; one below points back to an earlier slot. Arrow keys walk the baseline, ↓ steps into a node's arcs, Enter follows one to its other end, Escape clears. 2 labels are shortened; the table below names every node in full. The drawing scrolls sideways rather than shrinking its labels.
Arc diagram: 2 nodes laid out in handshake order, joined by 1 directed link worth 1,200 messages in total. Busiest node Mobile client, touching 1 partner and 1,200 messages (100% of all weight). Every link weighs the same 1,200 messages, so thickness encodes nothing here and all 1 arc is drawn at one neutral width.
Every node on the baseline, in the order it is drawn, with the weight that touches it and the marker that stands for its group.
Node
Slot
Group
Marker
Partners
Weight touched
Share of all weight
Mobile client
1 of 2
Client
circle, solid
1
1,200 messages
100%
Message broker
2 of 2
Server
square, solid
1
1,200 messages
100%
Every arc, with the weight it carries, how many slots it reaches across and which side of the axis it is drawn on.
From
To
Weight
Share
Span
Side
Mobile client (slot 1)
Message broker (slot 2)
1,200 messages
100%
1 slot
above, points forward
degenerate data · every value identical: 6 nodes and 5 arcs of exactly 12. Nothing is thicker than anything else, so the thickness channel has nothing to say, every arc takes the neutral width, and the summary says outright that they all weigh the same.
Relay chain · equal hops
6 nodes · 5 directed links · 60 batches
Point at a node or an arc — or press Tab and use the arrow keys — to read its numbers.
Nodes sit in pipeline order. Every link weighs the same, so thickness is carrying nothing and every arc is drawn at one neutral width. An arc above the axis runs forward; one below points back to an earlier slot. Arrow keys walk the baseline, ↓ steps into a node's arcs, Enter follows one to its other end, Escape clears. The drawing scrolls sideways rather than shrinking its labels.
Arc diagram: 6 nodes laid out in pipeline order, joined by 5 directed links worth 60 batches in total. Busiest node Validate, touching 2 partners and 24 batches (40% of all weight). Every link weighs the same 12 batches, so thickness encodes nothing here and all 5 arcs are drawn at one neutral width.
Every node on the baseline, in the order it is drawn, with the weight that touches it and the marker that stands for its group.
Node
Slot
Group
Marker
Partners
Weight touched
Share of all weight
Ingest
1 of 6
not grouped
circle, solid
1
12 batches
20%
Validate
2 of 6
not grouped
circle, solid
2
24 batches
40%
Enrich
3 of 6
not grouped
circle, solid
2
24 batches
40%
Score
4 of 6
not grouped
circle, solid
2
24 batches
40%
Persist
5 of 6
not grouped
circle, solid
2
24 batches
40%
Publish
6 of 6
not grouped
circle, solid
1
12 batches
20%
Every arc, with the weight it carries, how many slots it reaches across and which side of the axis it is drawn on.
From
To
Weight
Share
Span
Side
Ingest (slot 1)
Validate (slot 2)
12 batches
20%
1 slot
above, points forward
Validate (slot 2)
Enrich (slot 3)
12 batches
20%
1 slot
above, points forward
Enrich (slot 3)
Score (slot 4)
12 batches
20%
1 slot
above, points forward
Score (slot 4)
Persist (slot 5)
12 batches
20%
1 slot
above, points forward
Persist (slot 5)
Publish (slot 6)
12 batches
20%
1 slot
above, points forward
stress data · order="degree" · 22 nodes across 11 groups: the palette holds 5 colours and 5 shapes, so the first 5 groups get one of each as redundant encodings, groups 6–10 repeat both and are told apart by a dashed stroke, and group 11 switches to dotted (still separable in greyscale print and with colour-vision deficiency). Company names run far past the 12-character label budget, so they are truncated with an ellipsis and the full name stays in the tooltip, the readout line and the table below. One node is never called at all and draws hollow and dashed while keeping its slot. One row points at an id that is not on the baseline and one carries zero weight — both are dropped and named at the top of the card. When the natural 720px exceeds the card it scrolls horizontally rather than shrinking the labels past reading.
1 link points at a node that is not on the baseline · 1 zero-weight link — ignored.
Point at a node or an arc — or press Tab and use the arrow keys — to read its numbers.
Ingress (2)
Identity (2)
Catalogue (2)
Checkout (2)
Payments (2)
Fulfilment (2)
Insight (2)
Archive (2)
Partners (2)
Growth (2)
Platform (2)
Nodes sit in deployment order. An arc's thickness is its weight; its height is how far it reaches. An arc above the axis runs forward; one below points back to an earlier slot. Arrow keys walk the baseline, ↓ steps into a node's arcs, Enter follows one to its other end, Escape clears. 16 labels are shortened; the table below names every node in full. The drawing scrolls sideways rather than shrinking its labels.
Arc diagram: 22 nodes laid out in deployment order, joined by 37 directed links worth 14,774 calls in total. Busiest node Gleason-Wiegand - Metz, touching 7 partners and 4,018 calls (27.2% of all weight). Strongest link Gottlieb Inc to Spencer, Klocko and Russel: 882 calls · 6% of all weight · spans 3 slots. 20 links point back to an earlier slot and are drawn below the axis. 1 node keeps its slot but has no link at all: Osinski, Jast and Wilderman.
Every node on the baseline, in the order it is drawn, with the weight that touches it and the marker that stands for its group.
Node
Slot
Group
Marker
Partners
Weight touched
Share of all weight
Gleason-Wiegand - Metz
1 of 22
Platform
circle, dotted
7
4,018 calls
27.2%
Larkin Group
2 of 22
Growth
hexagon, dashed
6
3,150 calls
21.3%
Becker Group
3 of 22
Ingress
circle, solid
6
2,612 calls
17.7%
Johnson - Haag
4 of 22
Partners
triangle, dashed
5
2,452 calls
16.6%
Gorczany - Blanda
5 of 22
Checkout
triangle, solid
5
2,159 calls
14.6%
Kub Group
6 of 22
Fulfilment
circle, dashed
5
1,949 calls
13.2%
Gottlieb Inc
7 of 22
Checkout
triangle, solid
5
1,864 calls
12.6%
Langosh, Halvorson and Kunze
8 of 22
Fulfilment
circle, dashed
4
1,404 calls
9.5%
Becker Inc
9 of 22
Partners
triangle, dashed
2
1,358 calls
9.2%
Spencer, Klocko and Russel
10 of 22
Archive
diamond, dashed
3
1,298 calls
8.8%
Adams, Tremblay and Ernser
11 of 22
Identity
square, solid
4
1,228 calls
8.3%
Hessel - Fadel
12 of 22
Insight
square, dashed
2
1,198 calls
8.1%
Quigley - Ullrich
13 of 22
Insight
square, dashed
3
1,026 calls
6.9%
Borer - Nitzsche
14 of 22
Archive
diamond, dashed
2
928 calls
6.3%
Goldner Inc
15 of 22
Ingress
circle, solid
1
832 calls
5.6%
White and Sons
16 of 22
Payments
hexagon, solid
2
359 calls
2.4%
Prosacco Group
17 of 22
Catalogue
diamond, solid
1
343 calls
2.3%
Grady - Jenkins
18 of 22
Payments
hexagon, solid
1
244 calls
1.7%
Sipes, Botsford and Okuneva
19 of 22
Growth
hexagon, dashed
1
210 calls
1.4%
Denesik - Kemmer
20 of 22
Identity
square, solid
1
170 calls
1.2%
McKenzie, Sipes and Langworth
21 of 22
Catalogue
diamond, solid
1
1 calls
0.0068%
Osinski, Jast and Wilderman
22 of 22
Platform
circle, dotted
0
0 calls
0%
Every arc, with the weight it carries, how many slots it reaches across and which side of the axis it is drawn on.
Zyeon UI