11.09 · Diagrams / cn-arch-flow

<cn-arch-flow>

A single row of an architecture or request-flow diagram. White rounded nodes, one solid cobalt "system" node, optionally one orange pointy-top hex. Stack multiple rows for a multi-layer system view.

Canonical · the OpenRegister request flow

Client API layer Validator

Schema registry Storage adapter Audit log

Nextcloud DB MySQL PostgreSQL MongoDB …

<cn-arch-flow>
  <span>Client</span>
  <span accent>API layer</span>
  <span hex>Validator</span>
</cn-arch-flow>
<cn-arch-flow arrow="down">
  <span>Schema registry</span>
  <span accent>Storage adapter</span>
  <span>Audit log</span>
</cn-arch-flow>
<cn-arch-flow arrow="none">
  <span>Nextcloud DB</span>
  <span>MySQL</span>
  <span>PostgreSQL</span>
  <span>MongoDB</span>
  <span muted>…</span>
</cn-arch-flow>

Minimal · two nodes, one accent

Source Sink

All accent · for parity diagrams

OpenRegister OpenConnector OpenCatalogi

API · slots

Slot	Purpose
`(default)`	Row members, in order. Plain elements (typically `<span>`) styled by the component according to their attributes. The component auto-inserts arrows between consecutive members.

API · attributes (on cn-arch-flow)

Attribute	Values	Default	Purpose
`arrow`	`right` · `down` · `none`	`right`	Arrow direction. Use `down` for the second-and-later rows of a vertical stack so the reader sees flow continuing. `none` for adjacency rows (storage adapters, app catalogs).

API · child attributes (on the slotted elements)

Attribute	Purpose
`(none)`	Default: white rounded box with cobalt-200 border. The "external" or "neighbour" node.
`accent`	Solid cobalt fill, white text. The "system" node — usually the one Conduction owns in this layer.
`hex`	Orange pointy-top hex. The one-orange-per-scene knob; use once per row stack, on the node the reader should land on.
`muted`	Opacity 0.5. For "and more" / out-of-scope placeholders.

Why we built it this way

Layered · the architecture diagram

One row, four child attributes, no class wars

cn-arch-flow encodes a pattern that lived as inline CSS in every product-page mockup. Child elements style themselves by the attribute they carry; the parent owns the panel chrome and the arrow placement.

Attributes, not class names. <span accent> beats <span class="node accent">. The shadow CSS uses ::slotted([accent]) selectors so any tag (span, div, anchor) becomes a styled node.
Auto-inserted arrows. Same MutationObserver pattern as cn-pipeline. Add or remove children; arrows reflow.
One hex per stack. The orange hex slot replaces the rectangle entirely — different shape, different role. Use it once per multi-row diagram on the node the reader's eye should land on; the brand rule is one orange accent per scene, not per row.
No row component. A row IS a cn-arch-flow. Stacking happens with adjacent cn-arch-flow elements at the page level. The component does not own the multi-row layout because the spacing between rows is page-decision territory.
Arrows are not children. Authors never write <span class="arrow">→</span> by hand. The original product-page mockup did, and that's exactly the duplication we're extracting away.