11.05 · Diagrams / cn-pipeline

<cn-pipeline>

Horizontal flow of stages connected by arrows. The flattened cousin of cn-platform; used in solution pages and how-it-works sections to show data moving left-to-right through a series of apps.

Canonical · prisms with dotted arrows

Source DATA

Connector CONNECT

Workspace PROCESS

Sink DELIVER

Data · connect · process · deliver

<cn-pipeline>
  <cn-hex-prism family="coral">Source</cn-hex-prism>
  <cn-hex-prism family="lavender">Connector</cn-hex-prism>
  <cn-hex-prism family="cobalt">Workspace</cn-hex-prism>
  <cn-hex-prism family="mint">Sink</cn-hex-prism>
</cn-pipeline>

Solid arrows · for production diagrams

Catalogi

Connector

With flat hexes · simpler stages

Lead

Qualify

Won

A simple sales funnel

API · slots

Slot	Purpose
`(default)`	Pipeline stages, in left-to-right order. Pass any number; the component inserts arrow connectors between consecutive pairs.
`caption`	Optional uppercase line under the row. Used for a one-sentence summary like "Data · process · users".

API · attributes

Attribute	Values	Default	Purpose
`tone`	`dotted` · `solid` · `dim`	`dotted`	Arrow style. Dotted for soft / conceptual flows; solid for production diagrams; dim for subtle background flows.
`align`	`start` · `center` · `end`	`center`	Vertical alignment of stages along the baseline. Use `end` when stages have very different heights.

Why we built it this way

Flow · a row of stages

Arrows are part of the layout, not the content

cn-pipeline reads its own children, slot-assigns each, and inserts an arrow connector between consecutive pairs in the shadow DOM. The user writes plain stages; the arrows appear automatically.

Slot-assignment via JS, not user markup. The user writes <cn-hex-prism> children; the component sets their slot attribute to step-N. No <cn-step> wrapper required.
MutationObserver on children. Adding or removing stages re-renders the row with the right arrow count. Animation later, declarative now.
Three arrow tones, no per-arrow customisation. One pipeline gets one tone. Different sections use different cn-pipeline elements with different tones if needed.
Wraps to vertical on small screens. Below 700px, rows wrap and arrows rotate 90° to keep the flow readable on phones.
Children stay free. Use any element, hex or prism, sized however. The pipeline owns spacing; the children own appearance.