Block diagrams

Two parts: BlockDiagram is the canvas and Block is a node on it. A block holds blocks, so the diagram nests as deep as the thing it describes without a second component per level. Layout is CSS grid, the page ships no script, and containment is the default relationship. Use flow="sequence" for a short ordered process; its connectors turn downward when the stages stack on mobile. Branches and loops belong in Diagrams.

A flat row

Five peers on one line. flow="row" is the default, and a row stacks to one column below 42rem, which is where five labels stop fitting on a phone.

Capture pathFive stages, each one a peer of the others.

• Probe
• Sampler
• Decoder
• Aligner
• Report

<BlockDiagram
  title="Capture path"
  caption="Five stages, each one a peer of the others."
>
  <Block label="Probe" />
  <Block label="Sampler" />
  <Block label="Decoder" />
  <Block label="Aligner" />
  <Block label="Report" />
</BlockDiagram>

Nesting

A Block with children draws them in a set of its own. The children are more Blocks, so the whole diagram is one <figure> holding nested lists and a screen reader walks the hierarchy the page draws. The ground steps at each level, and the step is read off the markup rather than declared, so a subtree moved a level in or out takes the ground of where it lands.

Pipeline with substepsTwo levels. Each stage names what it is made of.

• IngestTwo sources
  • Reader
  • Validator
• TransformPure functions
  • Normalize
  • Resample
  • Window
• PublishOne writer
  • Encoder
  • Store

<BlockDiagram title="Pipeline with substeps" flow="row">
  <Block label="Ingest" sublabel="Two sources">
    <Block label="Reader" emphasis="filled" />
    <Block label="Validator" emphasis="filled" />
  </Block>
</BlockDiagram>

Plain ladder

Three levels with no tone and no emphasis. The ground steps with depth and the second line keeps its contrast at the bottom of the ladder.

A plain ladderLevel one holds level two holds level three.

• SystemLevel one
  • SubsystemLevel two
    • ComponentLevel three
    • ComponentLevel three
  • SubsystemLevel two
• SystemLevel one

A filled parent

A filled block can hold blocks. The children start the ladder again with their own edge, so the filled ground is the parent’s alone.

Filled parent

• Runtime
  • Scheduler
  • Allocatorarena
• Host

Three levels, with links

The same part three deep. The labels here are this package, so every link goes to the page that documents the block it names. tone="accent" takes the product color of whatever subtree it sits in, which is the data-helia-accent attribute a product site already sets.

helia-uiSystem, subsystems, and what each one is made of.

• Style layersThree sheets
  • Tokens
  • Semantic
  • Recipes
• Astro partsShip no script
  • Primitives
    • Surface
    • Chip
  • Composites
    • Cards
    • Layout
• React islandsHydrated on request
  • Inputs
  • Overlays
  • Proposed

The variants

Each block below is labeled with the prop that draws it.

Tone

• Neutraltone default
• Mutedtone="muted"
• Accenttone="accent"

Emphasis

• Outlineemphasis default
• Filledemphasis="filled"
• Dashedemphasis="dashed"

Span and icons

• Widespan={2}
• Plain
• Plain

Density and grounddensity="compact" on a tone="muted" canvas.

• One
  • Inner
• Two
  • Inner
• Three
  • Inner

What belongs in a label

One to three words. The box was drawn to be taken in at a glance, and a block carrying a sentence is a card that has lost its frame. A qualifier that will not fit in the name goes in sublabel, on its own line and in the muted ink, where it stays out of the way of the shape.

Ordered stages

flow="sequence" uses an ordered list and connects only its top-level stages. Keep labels short; nested blocks still describe what each stage contains.

Build workflow

1. InputModel and configuration
2. CompilePlan and generate
3. OutputIntegrate generated code

Diagrams within a section

Build stages

1. Input
2. Compile
3. Output

Choose an integration format.

• CMake
• CMSIS-Pack

A plain landing section keeps the same prose spacing.

• Source files
• Build files