Announcing quarto-diagrams

I’m happy to announce quarto-diagrams, a Quarto extension for creating styled diagrams in HTML documents and RevealJS presentations.

Installation

quarto add EmilHvitfeldt/quarto-diagrams

Then add the filter to your document YAML:

filters:
  - diagrams

Writing diagrams

Every style shares the same authoring model. You write a container div for the style you want, then nest one .item div per entry. Switching from one diagram to another is mostly a matter of changing the outer class.

Code

::: {.circle-flow node-color="#41516C"}
::: item
Plan
:::
::: item
Build
:::
::: item
Ship
:::
:::

Plan

Build

Ship

Styles

There are a number of different diagram styles to choose from. Each is documented on its own page in the docs.

A pie renders items as equal-sized wedges of a circle.

Code

::: pie
::: {.item color="#41516C"}
Alice
:::
::: {.item color="#4CADAD"}
Bob
:::
::: {.item color="#E24A68"}
Carol
:::
::: {.item color="#FBCA3E"}
David
:::
::: {.item color="#EE8434"}
Eve
:::
:::

Alice

Bob

Carol

David

Eve

A process lays out a linear flow of steps connected by arrows.

Code

::: {.process node-color="#4CADAD"}
::: item
Draft
:::
::: item
Review
:::
::: item
Publish
:::
:::

Draft

Review

Publish

Adding the .chevron modifier renders each step as an interlocking arrow tile, with no separate connectors.

Code

::: {.process .chevron node-color="#4CADAD"}
::: item
Draft
:::
::: item
Review
:::
::: item
Publish
:::
:::

Draft

Review

Publish

A pyramid stacks bands that narrow toward the top.

Code

::: pyramid
::: {.item color="#41516C"}
Vision
:::
::: {.item color="#4CADAD"}
Strategy
:::
::: {.item color="#E24A68"}
Tactics
:::
::: {.item color="#FBCA3E"}
Operations
:::
:::

Vision

Strategy

Tactics

Operations

A matrix arranges items into a 2×2 grid along two labeled axes.

Code

::: {.matrix x-axis="Market Share" y-axis="Growth" x-low="Low" x-high="High" y-low="Low" y-high="High" node-color="#41516C"}
::: item
Question Marks
:::
::: item
Stars
:::
::: item
Dogs
:::
::: item
Cash Cows
:::
:::

Question Marks

Stars

Dogs

Cash Cows

A hierarchy builds an org chart or tree from nested items.

Code

::::: {.hierarchy node-color="#41516C"}
:::: item
CEO

::: item
CTO
:::

::: item
CFO
:::

::: item
COO
:::
::::
:::::

CEO

CTO

CFO

COO

A funnel shows narrowing stages, optionally sized by a value attribute.

Code

::: funnel
::: {.item value="1000" color="#41516C"}
Visitors
:::
::: {.item value="600" color="#4CADAD"}
Leads
:::
::: {.item value="250" color="#E24A68"}
Qualified
:::
::: {.item value="80" color="#FBCA3E"}
Customers
:::
:::

Visitors

Leads

Qualified

Customers

A cycle draws a repeating loop of stages as arc arrows.

Code

::: {.cycle node-color="#4CADAD"}
::: item
Plan
:::
::: item
Do
:::
::: item
Check
:::
::: item
Act
:::
:::

Plan

Check

Act

There are more styles than shown here, including Venn and Stacked Venn diagrams.

Shared concepts

Because all the styles share one authoring model, they also share a set of modifiers that work across diagrams. The colors you’ve seen throughout are set with the node-color attribute on the container or a color attribute on individual items, as covered on the colors page.

You can change the node shapes with classes like .node-box and .node-none.

Code

::: {.circle-flow .node-box node-color="#41516C"}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
::: item
Dave
:::
:::

Alice

Bob

Carol

Dave

The arrow types can be swapped with classes such as .arrow-curved, .arrow-thin, and .arrow-double.

Code

::: {.circle-flow .node-box .arrow-curved node-color="#41516C"}
::: item
Alice
:::
::: item
Bob
:::
::: item
Carol
:::
::: item
Dave
:::
:::

Alice

Bob

Carol

Dave

Docs

The full documentation lives at https://emilhvitfeldt.github.io/quarto-diagrams/, with a dedicated page for each style and shared concept showing what’s possible with the built-in classes and attributes.