Hub Route Diagram
A source-to-hub routing diagram that fans out to categorized left and right target groups.
Preview
Import
import { HubRouteDiagram } from "@sigil-ui/components";Usage
<HubRouteDiagram source={{ label: "Application" }} hub={{ label: "Gateway", layers: [{ label: "Authenticate" }, { label: "Route" }, { label: "Observe" }] }} leftTargets={[{ label: "Database" }, { label: "Storage" }]} rightTargets={[{ label: "Search" }, { label: "Events" }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
source | { label, icon? } | — | Source node (required) |
hub | { label, layers: HubRouteLayer[] } | — | Central hub with internal layers (required) |
leftTargets | HubRouteNode[] | — | Array of { label, icon? } for left group (required) |
rightTargets | HubRouteNode[] | — | Array of { label, icon? } for right group (required) |
leftLabel | string | — | Category label above left targets |
rightLabel | string | — | Category label above right targets |
className | string | — | Additional CSS classes |
Plus all standard <div> HTML attributes.