Recipesemiotic/networksemiotic/recipesreact
transitDiagramLayout turns a network into a schematic map with octilinear tracks, parallel line bundles, interchange stations, and fitted labels. Supply complete coordinates for an authored diagram, or let the deterministic topology layout position a plain graph.
Interactive preview
The data below is one directed graph. Change its geometry and level of detail without rewriting nodes or edges.
Three source-colored lines merge into a shared trunk. Primary and compact modes use typed station glyphs; minimap mode uses segmented line-membership circles.
OrdersCustomersRules
Authored and automatic geometry
When every node has finite x and y values, the recipe fits those coordinates into the plot. Set layoutMode: "automatic" to ignore them. Automatic layout uses stable node-id tie breaks for component order, layering, and crossing-reduction sweeps, so repeated server renders produce the same SVG bytes.
Source-rooted lines
With lineMode: "source-rooted", every in-degree-zero node defines a line. Its membership propagates forward through the DAG, so shared downstream edges become parallel bundles. sourceColorAccessor reads each line color from the source datum. Without this mode, use lineAccessor for explicit edge line ids or descriptors.
Detail modes
| Mode | Rendering |
|---|
primary | Full station and interchange radii, labels, and normal track weight. |
compact | Smaller stations and thinner tracks with labels suppressed. |
minimap | Minimal tracks and one segmented line-color circle per fitted stop. |
Custom station glyphs
renderStation replaces the primary and compact station circle in the SVG station layer. The callback receives the raw station datum, fittedxand y, resolved radius, ordered lineIds, interchange state, and active mode. Minimap markers stay recipe-owned so their segments always match derived line membership.
Core configuration
| Option | Purpose |
|---|
lineWidth, lineGap | Track and bundle spacing. |
stationRadius, interchangeRadius | Marker sizing within the selected detail mode. |
lineOrder | Stable preferred order for parallel tracks. |
pointsAccessor | Authored intermediate x/y waypoints on an edge. |
rootId, direction | Orient the automatic topology layout. |
showLabels, labelAccessor | Primary-mode label visibility and text. |
Source Code
Abbreviated for readability — data arrays and steps are truncated. See the full runnable source in docs/src/examples/recipes/.
JSX
| 1 | import { NetworkCustomChart } from "semiotic/network" |
| 2 | import { transitDiagramLayout } from "semiotic/recipes" |
| 3 | |
| 4 | const nodes = [ |
| 5 | { id: "orders", label: "Orders", lineColor: "#d1495b" }, |
| 6 | { id: "customers", label: "Customers", lineColor: "#277da1" }, |
| 7 | { id: "join", label: "Join" }, |
| 8 | { id: "warehouse", label: "Warehouse" } |
| 9 | ] |
| 10 | |
| 11 | const edges = [ |
| 12 | { source: "orders", target: "join" }, |
| 13 | { source: "customers", target: "join" }, |
| 14 | { source: "join", target: "warehouse" } |
| 15 | ] |
| 16 | |
| 17 | <NetworkCustomChart |
| 18 | nodes={nodes} |
| 19 | edges={edges} |
| 20 | layout={transitDiagramLayout} |
| 21 | layoutConfig={{ |
| 22 | mode: "primary", // "compact" | "minimap" |
| 23 | lineMode: "source-rooted", |
| 24 | sourceColorAccessor: "lineColor", |
| 25 | renderStation: ({ station, x, y, radius }) => ( |
| 26 | <StationGlyph station={station} x={x} y={y} radius={radius} /> |
| 27 | ) |
| 28 | }} |
| 29 | description="Three source-rooted lines merge into one shared trunk." |
| 30 | accessibleTable |
| 31 | /> |
| 32 | |