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

Arrow style

The .arrow modifier is a chevron sub-variant with deeper points and shorter, more landscape tiles, so each step reads as a distinct arrowhead rather than a block with a thin seam. It supports the same options as .chevron (.vertical, .gap, colors, annotations).

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

Plan

Build

Ship

Measure

It pairs well with a per-item color ramp:

Saturn

Jupiter

Venus

Mercury

Mars

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

Annotations

Give any item a nested .annotation div to attach an external callout that points at its step with a leader line. Callouts alternate above/below a horizontal flow (or left/right of a .vertical flow). The annotation content is free-form Markdown; any bold text or heading is tinted to match the step color (optional). Annotate all, some, or none of the steps.

Nest the fenced divs with more colons on the outer fences (::::: for the chart, :::: for each item, ::: for the annotation) and leave a blank line around the inner fences.

::::: process

:::: item
Draft

::: annotation
**Draft** write the first version of the content
:::

::::

:::: item
Review

::: annotation
**Review** gather feedback from the team
:::

::::

:::: item
Revise

::: annotation
**Revise** apply the suggested changes
:::

::::

:::: item
Publish

::: annotation
**Publish** release the finished content
:::

::::

:::::

Draft

Draft write the first version of the content

Review

Review gather feedback from the team

Revise

Revise apply the suggested changes

Publish

Publish release the finished content

A .vertical process places the callouts to the left and right instead.

Apply

Apply submit your application online

Interview

Interview meet with the hiring team

Offer

Offer receive and accept the offer

Annotations work with the .chevron subtype too — the callouts attach to the interlocking arrow tiles.

::::: {.process .chevron}

:::: item
Draft

::: annotation
**Draft** write the first version of the content
:::

::::

:::: item
Review

::: annotation
**Review** gather feedback from the team
:::

::::

:::: item
Revise

::: annotation
**Revise** apply the suggested changes
:::

::::

:::: item
Publish

::: annotation
**Publish** release the finished content
:::

::::

:::::

Draft

Draft write the first version of the content

Review

Review gather feedback from the team

Revise

Revise apply the suggested changes

Publish

Publish release the finished content

The .arrow subtype carries annotations the same way:

::::: {.process .arrow}

:::: item
Draft

::: annotation
**Draft** write the first version of the content
:::

::::

:::: item
Review

::: annotation
**Review** gather feedback from the team
:::

::::

:::: item
Revise

::: annotation
**Revise** apply the suggested changes
:::

::::

:::: item
Publish

::: annotation
**Publish** release the finished content
:::

::::

:::::

Draft

Draft write the first version of the content

Review

Review gather feedback from the team

Revise

Revise apply the suggested changes

Publish

Publish release the finished content

The leader lines can be restyled (dashed, dotted, removed) and the colors adjusted — see the Annotations concept page for the full set of ann-line, ann-line-color, and ann-title-color options, which work on every annotated layout.