Components
HubRouteDiagram
A source-to-hub routing diagram that fans out to categorized left and right target groups.
Import
import { HubRouteDiagram } from "@sigil-ui/components";Preview
Usage
<HubRouteDiagram
source={{ label: "Request" }}
hub={{
label: "Router",
layers: [
{ label: "Auth" },
{ label: "Rate Limit" },
{ label: "Transform" },
{ label: "Cache" },
],
}}
leftTargets={[{ label: "Service A" }, { label: "Service B" }]}
rightTargets={[{ label: "DB" }, { label: "Queue" }]}
leftLabel="Services"
rightLabel="Infrastructure"
/>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.