A line diagram from route data: colour, labels, and closures already applied.
const spine = await getLineSpine("victoria")
<LineStrip lineId="victoria" spine={spine} fit />pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/line-strip.jsonBranch line strip · Station name labels · Schematic & network · Week ahead Block
Simple (non-branch) corridors only: Waterloo & City, Jubilee, Piccadilly, Victoria, Liberty (Overground), and London Cable Car. Overground paints as parallel rails; cable car is three red rails with white gaps. Branched lines live under Branch strip. Desktop scale matches the reference baseline (10px line).
Victoria line · sample sequence
Victoria · no service between Seven Sisters and Green Park. The track between is muted. Boundary stops with an open side stay coloured; stops with every adjacent segment closed (interiors, and a far terminal if applicable) grey out. Pass segments and optionally stationOutOfUseIds.
Names above the route (default), below, or alternating — TfL-style denser strips. labelPlacement
Curated Victoria southbound with Tube interchange flags. Scroll sideways on narrow viewports. Pass fit to fill the container without scrolling.
import { DIAGRAM_SCALE_CLASS } from "@/lib/tfl/brand";
import { LineStrip } from "@/components/tfl/diagram/line-strip";
<div className={DIAGRAM_SCALE_CLASS}>
<LineStrip
lineId="victoria"
lineName="Victoria line"
lineColor="#039BE5"
labelPlacement="alternate"
stations={[{ id, name, interchange?, connections?, nationalRail? }, …]}
/>
</div>Victoria line · Finsbury Park → Victoria. Collapse/expand the stops in between.
Victoria line
import { JourneyDiagram } from "@/components/tfl/diagram/journey-diagram";
<JourneyDiagram
lineName="Victoria line"
lineColor="#039BE5"
from={{ id: "finsbury", name: "Finsbury Park", interchange: true, nationalRail: true }}
to={{ id: "victoria", name: "Victoria", interchange: true }}
intermediates={[/* … */]}
/>Every stop on the spine — offline Victoria sample (no live Central duplicate). Right-side ticks for ordinary stops, full crossbars at terminals, rings for interchanges.
Explore live sequences in Browse lines. Branched schematics live under Branch strip.
Fetch a route sequence in your app, or use the site helper, prepare stations, then pass a spine:
import { getLineSpine } from "@/lib/tfl/line-spine"
const spine = await getLineSpine("victoria")getLineSpine uses tfl.line.getRouteSequence under the hood. Fetching stays outside LineStrip. You can also pass explicit stations prepared with toDiagramStation.
import { LineStrip } from "@/components/tfl/diagram/line-strip"
export default function Page({ spine }) {
return <LineStrip lineId="victoria" spine={spine} fit />
}Branched schematic:
<LineStrip
lineId="northern"
schematic={NORTHERN_LINE_SCHEMATIC_HORIZONTAL}
lineColor={getLineColor("northern").hex}
/>StraightStrip and BranchStrip stay available when you already have a prepared visual model. Prefer LineStrip when you have TfL line data.
| Need | Use |
|---|---|
| TfL line data, label recipes, closures, colour | LineStrip |
| Linear corridor with already-prepared stations | StraightStrip via the line-strip package |
| Branched schematic with prepared nodes | Branch strip |
| Station label fitting only | Station name labels |
For "no service between A and B", mute the track with segments. LineStrip greys stations when every adjacent segment is closed. Closed stretches render as a full-thickness muted solid.
Official line colours are fine. Do not redistribute Johnston without a licence. Demos use Hammersmith One. Prepare spine or schematic in the app or a Block. See Week ahead.
Simple (non-branch) corridors only: Waterloo & City, Jubilee, Piccadilly, Victoria, Liberty (Overground), and London Cable Car. Overground paints as parallel rails; cable car is three red rails with white gaps. Branched lines live under Branch strip. Desktop scale matches the reference baseline (10px line).
Victoria line · sample sequence
Victoria · no service between Seven Sisters and Green Park. The track between is muted. Boundary stops with an open side stay coloured; stops with every adjacent segment closed (interiors, and a far terminal if applicable) grey out. Pass segments and optionally stationOutOfUseIds.
Names above the route (default), below, or alternating — TfL-style denser strips. labelPlacement
Curated Victoria southbound with Tube interchange flags. Scroll sideways on narrow viewports. Pass fit to fill the container without scrolling.
import { DIAGRAM_SCALE_CLASS } from "@/lib/tfl/brand";
import { LineStrip } from "@/components/tfl/diagram/line-strip";
<div className={DIAGRAM_SCALE_CLASS}>
<LineStrip
lineId="victoria"
lineName="Victoria line"
lineColor="#039BE5"
labelPlacement="alternate"
stations={[{ id, name, interchange?, connections?, nationalRail? }, …]}
/>
</div>Victoria line · Finsbury Park → Victoria. Collapse/expand the stops in between.
Victoria line
import { JourneyDiagram } from "@/components/tfl/diagram/journey-diagram";
<JourneyDiagram
lineName="Victoria line"
lineColor="#039BE5"
from={{ id: "finsbury", name: "Finsbury Park", interchange: true, nationalRail: true }}
to={{ id: "victoria", name: "Victoria", interchange: true }}
intermediates={[/* … */]}
/>Every stop on the spine — offline Victoria sample (no live Central duplicate). Right-side ticks for ordinary stops, full crossbars at terminals, rings for interchanges.
Explore live sequences in Browse lines. Branched schematics live under Branch strip.
Fetch a route sequence in your app, or use the site helper, prepare stations, then pass a spine:
import { getLineSpine } from "@/lib/tfl/line-spine"
const spine = await getLineSpine("victoria")getLineSpine uses tfl.line.getRouteSequence under the hood. Fetching stays outside LineStrip. You can also pass explicit stations prepared with toDiagramStation.
import { LineStrip } from "@/components/tfl/diagram/line-strip"
export default function Page({ spine }) {
return <LineStrip lineId="victoria" spine={spine} fit />
}Branched schematic:
<LineStrip
lineId="northern"
schematic={NORTHERN_LINE_SCHEMATIC_HORIZONTAL}
lineColor={getLineColor("northern").hex}
/>StraightStrip and BranchStrip stay available when you already have a prepared visual model. Prefer LineStrip when you have TfL line data.
| Need | Use |
|---|---|
| TfL line data, label recipes, closures, colour | LineStrip |
| Linear corridor with already-prepared stations | StraightStrip via the line-strip package |
| Branched schematic with prepared nodes | Branch strip |
| Station label fitting only | Station name labels |
For "no service between A and B", mute the track with segments. LineStrip greys stations when every adjacent segment is closed. Closed stretches render as a full-thickness muted solid.
Official line colours are fine. Do not redistribute Johnston without a licence. Demos use Hammersmith One. Prepare spine or schematic in the app or a Block. See Week ahead.
16 stops · live sequence
16 stops · live sequence