11 · Diagrams

Diagram component set.

Brand-strict diagram primitives as web components. Drop the module into any HTML page; works in plain HTML, Vue, React, Docusaurus, Nextcloud apps. Package readme.

Brand rules · the non-negotiables

Pointy-top only

Hexes never rotate. The point is at the top, always. Flat-top hexes belong to other brands.

Solid colours only

No gradients on the shape itself. No rgba alpha. Backgrounds can be hex polygons; the shape stays one colour.

One orange per scene

KNVB orange is the highlight. Use it once per diagram, on the node you want the eye to land on. Never as a primary fill.

Fixed palette

cobalt, orange, mint, lavender, terracotta, forest, nextcloud, commonground, red. No off-brand colours. The component rejects anything else.

Hexes indicate, rectangles do

Hex prisms are "the system". Rectangles (side-boxes) are what feeds it or consumes it. The shape carries hierarchy.

Composition over configuration

Diagrams are composed from <cn-*> elements. Each element renders one shape. The diagram is the layout of those shapes.

Walk-through · build a domain map in four steps

A worked example. We will build the same diagram that lives on identity / websites: a brand apex with two externally-linked product surfaces. Every step shows the visual on the left and the code on the right. You will write only HTML, no JavaScript.

Step 01

Place the apex hex

Start with the brand. conduction.nl is the root of everything; render it as a large cobalt hex. Cobalt is the default colour, so no color attribute is needed. The label is plain text in the default slot.

<!-- the apex -->
<cn-hex size="xl">conduction.nl</cn-hex>

conduction.nl

Step 02

Add the product surfaces

Two products link out from the apex: connext.conduction.nl (the platform proposition) and apps.conduction.nl (the app store). Render them as medium hexes flanking the apex. Still using the default cobalt; the diagram reads as one family.

<!-- flanking products -->
<cn-hex size="md">connext</cn-hex>
<cn-hex size="xl">conduction.nl</cn-hex>
<cn-hex size="md">apps</cn-hex>

connext

conduction.nl

apps

Step 03

Land the orange accent

One node should be the eye-catcher. The app store is what we want visitors to click, so we promote it with color="orange". This is the one-orange-per-scene rule, in practice. Notice that we never write a hex code; the colour name is the API.

<!-- one orange accent -->
<cn-hex size="md">connext</cn-hex>
<cn-hex size="xl">conduction.nl</cn-hex>
<cn-hex size="md" color="orange">apps</cn-hex>

connext

conduction.nl

apps

Step 04

Icons for clarity, interactive for clickability

Add an icon SVG to the icon slot to make each surface scannable at a glance. Add interactive on nodes that link out, you get hover scale, focus ring, and Enter/Space activation. The icon and label co-exist; default layout stacks them vertically.

<!-- icons + interactive on the linking nodes -->
<cn-hex size="md" interactive>
  <svg slot="icon" ...>...</svg>
  connext
</cn-hex>

connext

conduction.nl

apps

That is the whole technique. Lay out shapes, pick colours by name, add slots for icons, mark the clickable ones interactive. Brand is flat-hex only; the 3D <cn-hex-prism> primitive was removed in v3.0.0. For connections between hexes use <cn-platform>, <cn-pipeline>, and <cn-domain-tree>.

The set · eight components, all built

Hex

cn-hex `<cn-hex>`

Built

The pointy-top hex primitive. Label + icon, nine colours, four sizes, solid or outline, optional interactive state. The atomic unit for every ConNext diagram.