Funnel
The .funnel style renders items as stacked, narrowing bands — wide at the top, flat at the bottom. It is built for conversion and drop-off stories where each stage carries fewer items than the one above it. Band widths can be driven by real numbers via value=. Like all styles in this extension, it is activated via filters: [diagrams].
For a pointed, triangular shape instead of a flat-bottomed funnel, use .pyramid with the .inverted modifier.
Basic usage
Without values, the funnel narrows smoothly from full width down to a neck.
::: funnel
::: item
Awareness
:::
::: item
Interest
:::
::: item
Evaluation
:::
::: item
Purchase
:::
:::Awareness
Interest
Evaluation
Purchase
Sized by value
Add value= to each item and the band widths become proportional to those numbers — each stage’s top edge matches its own value and its bottom edge matches the next stage, so the slope shows the real drop-off. The largest value spans the full width.
::: funnel
::: {.item value="1000"}
Visitors
:::
::: {.item value="600"}
Leads
:::
::: {.item value="250"}
Qualified
:::
::: {.item value="80"}
Customers
:::
:::Visitors
Leads
Qualified
Customers
Separated bands with .gap
Add .gap to the container to separate every band, or to an individual item to detach just that band.
::: {.funnel .gap}
::: item
Top
:::
::: item
Middle
:::
::: item
Base
:::
:::Top
Middle
Base
Colors
Use node-color= on the container to set the base color for all bands, or color= on an individual item to override a single band.
::: {.funnel node-color="#7a3b5c"}
::: item
Top
:::
::: {.item color="#3b7a5c"}
Middle
:::
::: item
Base
:::
:::Top
Middle
Base
Annotations
Give any item a nested .annotation div to attach an external callout that points at its stage with a leader line. Callouts alternate sides down the funnel. The annotation content is free-form Markdown; any bold text or heading is tinted to match the stage color (optional). Annotate all, some, or none of the stages.
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.
::::: funnel
:::: item
Visitors
::: annotation
**Visitors** everyone who lands on the site
:::
::::
:::: item
Leads
::: annotation
**Leads** visitors who sign up for more info
:::
::::
:::: item
Trials
::: annotation
**Trials** leads who start a free trial
:::
::::
:::: item
Customers
::: annotation
**Customers** trials that convert to paid plans
:::
::::
:::::Visitors
Visitors everyone who lands on the site
Leads
Leads visitors who sign up for more info
Trials
Trials leads who start a free trial
Customers
Customers trials that convert to paid plans
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.