Venn

The .venn style renders overlapping circles for 2 or 3 sets, with the intersections shaded by blending the circle fills. It is well suited to showing shared traits, responsibilities, or skill overlaps. Like all styles in this extension, it is activated via filters: [diagrams].

The container expects two or three .item divs — one per set. Each item’s text becomes a set label placed in that circle’s exclusive lobe. Labels for the overlapping regions are optional and set with attributes on the container (see below).

Two sets

::: {.venn ab="Shared"}
::: item
Frontend
:::
::: item
Backend
:::
:::

Frontend

Backend

The ab= attribute labels the intersection of the two circles. It is optional — omit it to leave the overlap unlabeled.

Three sets

For three items, the circles are arranged in the classic trefoil. Label any region with the attributes ab=, bc=, ac=, and abc= (the triple overlap), where a, b, c are the first, second, and third items in order.

::: {.venn ab="A∩B" bc="B∩C" ac="A∩C" abc="All three"}
::: item
Design
:::
::: item
Engineering
:::
::: item
Product
:::
:::

Design

Engineering

Product

All overlap attributes are optional — supply only the ones you want to label.

Intersection label color

The intersection labels render in a dark color by default, which can be hard to read against darker overlaps. Use overlap-color= on the container to recolor every intersection label at once.

::: {.venn ab="A∩B" bc="B∩C" ac="A∩C" abc="All three" overlap-color="#ffffff"}
::: item
Design
:::
::: item
Engineering
:::
::: item
Product
:::
:::

Design

Engineering

Product

Colors

Each set 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.

::: {.venn}
::: {.item color="#7a3b5c"}
Tea
:::
::: {.item color="#3b7a5c"}
Coffee
:::
:::

Tea

Coffee

Annotations

Give any item a nested .annotation div to attach an external callout that points at its set with a leader line. The callouts fan out to the side matching each set’s position. The annotation content is free-form Markdown; any bold text or heading is tinted to match the set color (optional). Annotate all, some, or none of the sets.

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.

::::: venn

:::: item
Design

::: annotation
**Design** how it looks and feels
:::

::::

:::: item
Engineering

::: annotation
**Engineering** how it is built
:::

::::

:::: item
Product

::: annotation
**Product** what gets built and why
:::

::::

:::::

Design

Design how it looks and feels

Engineering

Engineering how it is built

Product

Product what gets built and why

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.