Runtime fingerprintToken readout from the active provider chain.
Live DS
Runtime
Platform
Rottay
Rottay / ModernPlatform Flagship
Primary
#0A0A0ASecondary #6B6B6B
Radius
14pxxl 18px
Density
normalBorder-light cards
Accent
Badge
Compact runtime evidence across 3+ token signals.
Published DS package · Pattern Library · Rottay / modernShared route metadata for the active runtime, kept inline so the shell reads like a thin header band.
Force-directed node-link diagram for relationships
Node and edge sets with enough meaning to justify a relationship view.
How to read this pageUse the sidebar showroom controls to change engine and tenant, then judge whether the chart still reads clearly without extra editorial staging around it.
TierChartA specialized visualization pattern.
FamilyRelationalStart with node legibility.
Best forshowing dependenciesCompare against flow charts.
Live preview
Validate the chart in the active showroom runtime
Sidebar engine and tenant drive this
Relational
This preview should stand on the chart itself: legibility, token use, spacing, and interaction rhythm all need to hold without extra local storytelling chrome.
Loading chart preview...The interactive chart canvas mounts client-side so the docs page stays stable while the preview runtime boots.
ImportPublished package entrypoint, ready to copy.
tsx
1 line
Consumption
Runtime-aware snippet
ImportTSX
Quick copy
import { NetworkGraph } from '@rottay/design-system';
UsagePaste-ready example that shows the base contract first.
tsx
14 lines
Consumption
Runtime-aware snippet
UsageTSX
Quick copy
API surface
Props
6 rows
NetworkGraph propsProp contracts stay readable across dark-first and light-first tenants.
6 props
3 required
3 optional
Fast readStart with required props, then scan defaults before dropping to per-row details.
Contract postureThis reference stays intentionally concise so the primitive contract remains scannable.