Stacked Venn

The .stacked-venn style renders nested concentric circles that share a common bottom edge, modeled on PowerPoint’s “Stacked Venn” SmartArt. The first item is the largest outer circle and each subsequent item nests inside the previous one, making it well suited to containment / subset relationships — successively narrower segments of a population, tiers of membership, or scopes that fit inside one another. Like all styles in this extension, it is activated via filters: [diagrams].

The container takes two or more .item divs, ordered from outermost (largest) to innermost (smallest). Each item’s text becomes a label placed in that circle’s exclusive band.

Basic usage

::: stacked-venn
::: item
Total Population
:::
::: item
Vitamin D Deficiency
:::
::: item
Deficiency
:::
::: item
Insufficiency
:::
:::

Total Population

Vitamin D Deficiency

Deficiency

Insufficiency

Add or remove .item divs to change the number of circles — the radii adjust automatically to fit.

Orientation

By default the circles nest toward the bottom. Use direction= to anchor them to a different edge — down (default), up, left, or right. The circles rotate but the labels always stay upright and horizontal.

::: {.stacked-venn direction="right"}
::: item
Everyone
:::
::: item
Customers
:::
::: item
Subscribers
:::
:::

Everyone

Customers

Subscribers

For finer control, angle= adds a clockwise rotation (in degrees) on top of direction. For example angle="45" tucks the nesting toward the bottom-left corner.

::: {.stacked-venn angle="45"}
::: item
Everyone
:::
::: item
Customers
:::
::: item
Subscribers
:::
:::

Everyone

Customers

Subscribers

Colors

Each circle defaults to a distinct color. Use color= on an individual item to override one circle, or node-color= on the container to set a single shared base color for every circle.

::: stacked-venn
::: {.item color="#1b3a5b"}
Everyone
:::
::: {.item color="#2e6b8a"}
Customers
:::
::: {.item color="#5aa0c4"}
Subscribers
:::
:::

Everyone

Customers

Subscribers

Annotations

Give any item a nested .annotation div to attach an external callout that points at its circle with a leader line. Because the nested circles label along a single axis, the callouts form one stacked column on the right. The annotation content is free-form Markdown; any bold text or heading is tinted to match the circle color (optional). Annotate all, some, or none of the circles.

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.

::::: stacked-venn

:::: item
Universe

::: annotation
**Universe** everything that exists, the broadest scope
:::

::::

:::: item
Galaxy

::: annotation
**Galaxy** a gravitationally bound system of stars
:::

::::

:::: item
Solar System

::: annotation
**Solar System** the Sun and the bodies orbiting it
:::

::::

:::: item
Earth

::: annotation
**Earth** our home planet
:::

::::

:::::

Universe

Universe everything that exists, the broadest scope

Galaxy

Galaxy a gravitationally bound system of stars

Solar System

Solar System the Sun and the bodies orbiting it

Earth

Earth our home planet

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.