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

Outlines

By default each circle is a plain fill with no stroke. Add outline-color= (and optionally outline-width=, default 2) to an item to draw a stroke around just that circle, or to the container to apply the same outline to every circle. fill-opacity= (default 0.45) is also overridable per item or on the container, independent of the outline.

::: {.venn ab="Shared"}
::: {.item outline-color="#7a3b5c" outline-width="3"}
Frontend
:::
::: item
Backend
:::
:::

Frontend

Backend

Icons

Nest an .icon div inside an .item to pin extra content (an emoji, a Font Awesome icon, an image) at a fixed spot inside that circle’s exclusive lobe. Unlike the rest of the label, the icon always stays inside the circle, even when .outside-labels pushes the text label outside the rim.

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

::: icon
🎨
:::
:::
::: item
Backend
:::
:::

Frontend

🎨

Backend

Outside labels

By default, each set’s label sits inside its circle’s exclusive lobe, which can read as “this label is a member of the set.” Add .outside-labels to the container to place each label just outside its circle’s rim instead — useful when the label names what the circle represents rather than an item within it. Unlike annotations, outside labels are plain text: no leader lines or arrows.

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

Frontend

Backend

It works the same way for three sets:

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

Design

Engineering

Product

Overlap labels are unaffected and still render inside the shaded region.

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.

Annotating overlaps

Overlap regions can be annotated too. Instead of the plain ab= container attribute, add a sibling .overlap div carrying a class for the region (.ab, .ac, .bc, or .abc). Its text becomes the overlap label — same as ab= — and a nested .annotation div attaches a leader-line callout, exactly like a set’s annotation.

This is useful when what you actually want to call out is an intersection itself, rather than each set individually — annotate ab once instead of annotating both a and b. Set, 2-way overlap, and 3-way overlap annotations can all be mixed in the same diagram.

:::::: venn

:::: item
Design

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

::::

:::: item
Engineering
::::

:::: item
Product
::::

:::: {.overlap .ab}

::: annotation
**Design & Engineering** agree on feasibility
:::

::::

:::: {.overlap .abc}

::: annotation
Every discipline signs off before shipping
:::

::::

::::::

Design

Design how it looks and feels

Engineering

Product

Design & Engineering agree on feasibility

Every discipline signs off before shipping

The overlap div’s own text (if any) still labels the region in place, just like ab= would — leave it empty, as above, to have only the annotation callout. A region can also keep using the plain ab=/bc=/ac=/abc= attribute if it just needs a label with no callout.

Reveal.js fragments

An .icon or .overlap div can carry .fragment (plus any fade-/highlight-/etc. modifier, and an explicit data-fragment-index) to reveal on click, just like a normal Reveal.js fragment. Give several the same data-fragment-index to have them appear together, and add an inline style (e.g. transition-delay: 0.5s;) to one of them to stagger the reveal visually while still triggering on one click.

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

::: {.icon .fragment}
🎨
:::
:::
::: item
Backend
:::
:::