Process

The .process style renders items as a linear flow of nodes connected by arrows — left to right by default, or top to bottom with the .vertical modifier. Like all styles in this extension, it is activated via filters: [diagrams].

Basic usage

::: process
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
:::

Alice

Bob

Carol

Vertical orientation

Add the .vertical modifier to flow top-to-bottom.

::: {.process .vertical}
::: item
Input
:::
::: item
Process
:::
::: item
Output
:::
:::

Input

Process

Output

Arrow types

The default is arrow-chevron. Use arrow-thin or arrow-double for line-based arrows.

::: {.process .arrow-thin}
::: item
Plan
:::
::: item
Build
:::
::: item
Ship
:::
:::

Plan

Build

Ship

Chevron style

Add the .chevron modifier to render each step as an interlocking arrow tile, with no separate connectors. It works with .vertical, .gap, and the color system.

::: {.process .chevron}
::: item
Plan
:::
::: item
Build
:::
::: item
Ship
:::
::: item
Measure
:::
:::

Plan

Build

Ship

Measure

It also flows top-to-bottom with .vertical:

Plan

Build

Ship

Node shapes

The default is node-box. Use node-circle or node-none for alternatives.

::: {.process .node-circle}
::: item
Start
:::
::: item
Middle
:::
::: item
End
:::
:::

Start

Middle

End

Extra spacing with .gap

Add .gap to an item to enlarge the gap before it — useful for visually separating stages.

::: process
::: item
A
:::
::: item
B
:::
::: {.item .gap}
C
:::
::: item
D
:::
:::

A

B

C

D

Colors

Use node-color= / arrow-color= on the container, or color= on individual items.

::: {.process node-color="#7a3b5c" arrow-color="#444"}
::: item
Plan
:::
::: {.item color="#3b7a5c"}
Build
:::
::: item
Ship
:::
:::

Plan

Build

Ship