### Pie Diagram Example Source: https://emilhvitfeldt.github.io/quarto-diagrams This example demonstrates a Pie diagram. Items are rendered as equal-sized wedges of a circle. ```html
Alice Bob Carol David Eve
``` -------------------------------- ### Pyramid Diagram Example Source: https://emilhvitfeldt.github.io/quarto-diagrams This example illustrates a Pyramid diagram. It features stacked bands that narrow towards the top. ```html
Vision Strategy Tactics Operations
``` -------------------------------- ### Install quarto-diagrams Extension Source: https://emilhvitfeldt.github.io/quarto-diagrams Use the Quarto CLI to add the quarto-diagrams extension to your project. This command fetches and installs the extension. ```bash quarto add EmilHvitfeldt/quarto-diagrams ``` -------------------------------- ### Matrix Diagram Example Source: https://emilhvitfeldt.github.io/quarto-diagrams This example demonstrates a Matrix diagram, which is a 2x2 grid of quadrants along two axes. It includes labels for axes and quadrants. ```html
Question Marks Stars Dogs Cash Cows Low High Low High Market Share Growth
``` -------------------------------- ### Cycle Diagram Example Source: https://emilhvitfeldt.github.io/quarto-diagrams This example demonstrates a Cycle diagram, representing a repeating loop of stages using arc arrows. ```html
Plan Do Check Act
``` -------------------------------- ### Donut Diagram Example Source: https://emilhvitfeldt.github.io/quarto-diagrams This is a Donut diagram example, which is a pie with a hollow center. It can optionally display a label in the middle. ```html
Alice Bob Carol David 100%
``` -------------------------------- ### Venn Diagram Example Source: https://emilhvitfeldt.github.io/quarto-diagrams This example demonstrates a Venn diagram with two overlapping sets. It can be extended to three sets. ```html
Frontend Backend Shared
``` -------------------------------- ### Hierarchy Diagram Example Source: https://emilhvitfeldt.github.io/quarto-diagrams This example shows a Hierarchy diagram, similar to an org chart or tree, constructed from nested items. ```html
CEO CTO CFO CPO
``` -------------------------------- ### Funnel Diagram Example Source: https://emilhvitfeldt.github.io/quarto-diagrams This example shows a Funnel diagram with narrowing stages. The size of the stages can optionally be adjusted by value. ```html
Visitors Leads Qualified Customers
``` -------------------------------- ### Cycle Diagram with Multiple Stages Source: https://emilhvitfeldt.github.io/quarto-diagrams/cycle.html Shows how to create a cycle diagram with an arbitrary number of stages, dividing the ring evenly. This example includes seven items. ```markdown ::: cycle ::: item Strategy ::: ::: item Design ::: ::: item Build ::: ::: item Test ::: ::: item Launch ::: ::: item Review ::: ::: ``` -------------------------------- ### Stacked Venn Diagram Example Source: https://emilhvitfeldt.github.io/quarto-diagrams This example illustrates a Stacked Venn diagram, used to represent subset relationships with nested circles. ```html
Everyone Customers Subscribers
``` -------------------------------- ### Circle Flow Diagram Example Source: https://emilhvitfeldt.github.io/quarto-diagrams This is a basic example of a Circle Flow diagram. Nodes are arranged on a ring and connected by arrows. ```html
Alice Bob Carol
``` -------------------------------- ### Circle Flow with Four Items Source: https://emilhvitfeldt.github.io/quarto-diagrams/circle-flow.html Example of a circle flow diagram containing four items. ```markdown Alice Bob Carol Dave ``` -------------------------------- ### Stacked Venn Diagram with Custom Item Colors Source: https://emilhvitfeldt.github.io/quarto-diagrams/stacked-venn.html This example shows how to override the default colors of individual circles using the 'color' attribute on each .item div. ```html ::: stacked-venn ::: {.item color="#1b3a5b"} Everyone ::: ::: {.item color="#2e6b8a"} Customers ::: ::: {.item color="#5aa0c4"} Subscribers ::: ::: ::: ``` -------------------------------- ### Stacked Venn Diagram with Right Orientation Source: https://emilhvitfeldt.github.io/quarto-diagrams/stacked-venn.html This example shows how to change the nesting direction of the circles to the right using the 'direction' attribute. Labels remain upright. ```html ::: {.stacked-venn direction="right"} ::: item Everyone ::: ::: item Customers ::: ::: item Subscribers ::: ::: ::: ``` -------------------------------- ### Basic Process Flow Source: https://emilhvitfeldt.github.io/quarto-diagrams/process.html Renders a simple left-to-right process flow with three items. ```markdown ::: ::: Alice ::: ::: Bob ::: ::: Carol ::: ::: ::: ``` -------------------------------- ### Circle Flow with Five Items Source: https://emilhvitfeldt.github.io/quarto-diagrams/circle-flow.html Demonstrates a circle flow diagram with five items. ```markdown Alice Bob Carol Dave Ethan ``` -------------------------------- ### Basic Cycle Diagram Source: https://emilhvitfeldt.github.io/quarto-diagrams/cycle.html Demonstrates the basic usage of the cycle style with four items: Plan, Do, Check, and Act. This is suitable for simple repeating processes. ```markdown ::: cycle ::: item Plan ::: ::: item Do ::: ::: item Check ::: ::: item Act ::: ::: ``` -------------------------------- ### Basic Pie Chart Source: https://emilhvitfeldt.github.io/quarto-diagrams/pie.html Renders a basic pie chart with equal-sized wedges. Activate with `filters: [diagrams]`. ```markdown ::: pie ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: item David ::: ::: item Eve ::: ::: ``` -------------------------------- ### Basic Matrix Usage Source: https://emilhvitfeldt.github.io/quarto-diagrams/matrix.html Demonstrates the fundamental structure of a .matrix. Requires four .item divs for the quadrants. Axis labels and titles are set using attributes on the container. ```markdown ::: {.matrix x-axis="Market Share" y-axis="Growth" x-low="Low" x-high="High" y-low="Low" y-high="High"} ::: item Question Marks ::: ::: item Stars ::: ::: item Dogs ::: ::: item Cash Cows ::: ::: ``` -------------------------------- ### Basic Circle Flow Source: https://emilhvitfeldt.github.io/quarto-diagrams/circle-flow.html Demonstrates the fundamental structure for creating a circle flow diagram with three items. Each item is defined within an 'item' block. ```markdown ::: circle-flow ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: ::: ``` -------------------------------- ### Activate quarto-diagrams Extension Source: https://emilhvitfeldt.github.io/quarto-diagrams Include the 'diagrams' filter in your document's YAML header to enable the extension's functionality. ```yaml filters: - diagrams ``` -------------------------------- ### Hierarchy with Outline Style Source: https://emilhvitfeldt.github.io/quarto-diagrams/hierarchy.html Apply the `.outline` class for transparent nodes with a colored border and dark text. ```markdown ::::: {.hierarchy .outline} :::: item Root ::: item Child A ::: ::: item Child B ::: :::: ::::: ``` -------------------------------- ### Circle Flow with Six Items Source: https://emilhvitfeldt.github.io/quarto-diagrams/circle-flow.html Illustrates a circle flow diagram containing six items. ```markdown Alice Bob Carol Dave Ethan Fiona ``` -------------------------------- ### Donut Chart Source: https://emilhvitfeldt.github.io/quarto-diagrams/pie.html Creates a donut chart by adding the `.donut` modifier for a hollow center. Other pie features remain compatible. ```markdown ::: {.pie .donut} ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: item David ::: ::: ``` -------------------------------- ### Basic Hierarchy Diagram Source: https://emilhvitfeldt.github.io/quarto-diagrams/hierarchy.html Create a simple hierarchy by nesting `.item` divs. The number of colons on the outer fences determines the wrapping level. ```markdown ::::: {.hierarchy} :::: item CEO ::: item CTO ::: ::: item CFO ::: ::: item CPO ::: :::: ::::: ``` -------------------------------- ### Basic Pyramid Diagram Source: https://emilhvitfeldt.github.io/quarto-diagrams/pyramid.html Renders items as horizontal bands of a triangle, with the first item at the narrow top and the last at the wide base. Suitable for showing hierarchy or foundational layers. ```markdown ::: pyramid ::: item Vision ::: ::: item Strategy ::: ::: item Tactics ::: ::: item Operations ::: ::: ``` -------------------------------- ### Basic Funnel Chart Source: https://emilhvitfeldt.github.io/quarto-diagrams/funnel.html Renders a basic funnel chart with evenly distributed bands. No specific values or colors are applied. ```markdown ::: funnel ::: item Awareness ::: ::: item Interest ::: ::: item Evaluation ::: ::: item Purchase ::: ::: ``` -------------------------------- ### Node None (Text-Only) Source: https://emilhvitfeldt.github.io/quarto-diagrams/node-shapes.html Renders text-only nodes with a transparent background. Labels are capped at 80px width. ```html ::: {.circle-flow .node-none} ::: Alice ::: ::: Bob ::: ::: Carol ::: ::: ``` -------------------------------- ### Circle Flow with One Item Source: https://emilhvitfeldt.github.io/quarto-diagrams/circle-flow.html Illustrates a circle flow with a single item. In this case, no arrow is displayed. ```markdown Alice ``` -------------------------------- ### Circle Flow Sizing Behavior Formula Source: https://emilhvitfeldt.github.io/quarto-diagrams/customization.html Explains how node size and layout radius are computed for Circle Flow diagrams based on the number of items (n). ```plaintext nodeRadius = (2/3) · layoutR · sin(π/n) layoutR + nodeRadius ≤ 240 ``` -------------------------------- ### Basic Stacked Venn Diagram Source: https://emilhvitfeldt.github.io/quarto-diagrams/stacked-venn.html This snippet demonstrates the basic structure for a stacked venn diagram with multiple nested items. Add or remove .item divs to adjust the number of circles. ```html ::: stacked-venn ::: item Total Population ::: ::: item Vitamin D Deficiency ::: ::: item Deficiency ::: ::: item Insufficiency ::: ::: ::: ``` -------------------------------- ### Set Node and Arrow Color Together (Circle Flow) Source: https://emilhvitfeldt.github.io/quarto-diagrams/colors.html Combine `node-color` and `arrow-color` attributes on the container to style both nodes and arrows simultaneously in a Circle Flow diagram. ```html ::: {.circle-flow .node-box node-color="#e67e22" arrow-color="#c0392b"} ::: Alice ::: ::: Bob ::: ::: Carol ::: ::: ``` -------------------------------- ### Vertical Process Flow Source: https://emilhvitfeldt.github.io/quarto-diagrams/process.html Renders a top-to-bottom process flow using the .vertical modifier. ```markdown ::: {.process .vertical} ::: Input ::: ::: Process ::: ::: Output ::: ::: ::: ``` -------------------------------- ### Pyramid Diagram with Custom Colors Source: https://emilhvitfeldt.github.io/quarto-diagrams/pyramid.html Sets a base color for all bands using `node-color=` on the container, or overrides a single band's color with `color=` on an individual item. ```markdown ::: {.pyramid node-color="#7a3b5c"} ::: item Top ::: ::: {.item color="#3b7a5c"} Middle ::: ::: item Base ::: ::: ``` -------------------------------- ### Circle Node Process Flow Source: https://emilhvitfeldt.github.io/quarto-diagrams/process.html Uses the .node-circle modifier to render process items as circles. ```markdown ::: {.process .node-circle} ::: Start ::: ::: Middle ::: ::: End ::: ::: ::: ``` -------------------------------- ### Colored Process Flow Source: https://emilhvitfeldt.github.io/quarto-diagrams/process.html Applies custom colors to nodes and arrows using node-color, arrow-color, and item color attributes. ```markdown ::: {.process node-color="#7a3b5c" arrow-color="#444"} ::: Plan ::: ::: {.item color="#3b7a5c"} Build ::: ::: Ship ::: ::: ::: ``` -------------------------------- ### Circle Flow with Two Items Source: https://emilhvitfeldt.github.io/quarto-diagrams/circle-flow.html Shows a circle flow with two items. Arrows are offset to prevent overlap. ```markdown Alice Bob ``` -------------------------------- ### Set All Nodes the Same Color (Circle Flow) Source: https://emilhvitfeldt.github.io/quarto-diagrams/colors.html Use `node-color` on the container to set a uniform color for all nodes in a Circle Flow diagram. This attribute is applied directly in the Quarto source without a `data-` prefix. ```html ::: {.circle-flow .node-box node-color="#27ae60"} ::: Alice ::: ::: Bob ::: ::: Carol ::: ::: ``` -------------------------------- ### Hierarchy with Custom Colors Source: https://emilhvitfeldt.github.io/quarto-diagrams/hierarchy.html Set node colors using `node-color=` on the container for all nodes, or `color=` on individual items for overrides. Connector lines can be colored with `arrow-color=`. ```markdown ::::: {.hierarchy node-color="#7a3b5c" arrow-color="#7a3b5c"} :::: item Root ::: {.item color="#3b7a5c"} Child A ::: ::: item Child B ::: :::: ::::: ``` -------------------------------- ### Chevron Style Process Flow Source: https://emilhvitfeldt.github.io/quarto-diagrams/process.html Applies the .chevron modifier to render steps as interlocking arrow tiles without separate connectors. ```markdown ::: {.process .chevron} ::: Plan ::: ::: Build ::: ::: Ship ::: ::: Measure ::: ::: ::: ``` -------------------------------- ### Circle Flow with Three Items Source: https://emilhvitfeldt.github.io/quarto-diagrams/circle-flow.html Depicts a circle flow with three items, arranged evenly around the circle. ```markdown Alice Bob Carol ``` -------------------------------- ### Set Arrow Color Only (Circle Flow) Source: https://emilhvitfeldt.github.io/quarto-diagrams/colors.html Apply `arrow-color` to the container to set the color for all arrows in a Circle Flow diagram. Per-arrow coloring is not supported. ```html ::: {.circle-flow .node-box arrow-color="#e74c3c"} ::: Alice ::: ::: Bob ::: ::: Carol ::: ::: ``` -------------------------------- ### Process Flow with Extra Spacing Source: https://emilhvitfeldt.github.io/quarto-diagrams/process.html Adds extra spacing before a specific item using the .gap modifier on an item. ```markdown ::: process ::: A ::: ::: B ::: ::: {.item .gap} C ::: ::: D ::: ::: ::: ``` -------------------------------- ### Hierarchy with Circle Nodes Source: https://emilhvitfeldt.github.io/quarto-diagrams/hierarchy.html Use `.node-circle` to change the default box node shape to circles. `.node-none` can be used for invisible nodes. ```markdown ::::: {.hierarchy .node-none} :::: item Root ::: item Child A ::: ::: item Child B ::: :::: ::::: ``` -------------------------------- ### Multi-level Hierarchy Diagram Source: https://emilhvitfeldt.github.io/quarto-diagrams/hierarchy.html Nesting can extend to multiple levels, with the layout automatically centering parents over their children and scaling the tree to fit. ```markdown :::::: {.hierarchy} ::::: item CEO :::: item CTO ::: item Eng Lead ::: :::: :::: item COO ::: item Ops Mgr ::: :::: ::::: :::::: ``` -------------------------------- ### Matrix with Custom Colors Source: https://emilhvitfeldt.github.io/quarto-diagrams/matrix.html Allows for custom coloring of matrix cells. Use `node-color` on the container for a base fill or `color` on individual items to override. `arrow-color` styles the axis and divider lines. ```markdown ::: {.matrix node-color="#7a3b5c" arrow-color="#444"} ::: item A ::: ::: {.item color="#3b7a5c"} B ::: ::: item C ::: ::: item D ::: ::: ``` -------------------------------- ### Funnel Chart Sized by Value Source: https://emilhvitfeldt.github.io/quarto-diagrams/funnel.html Creates a funnel chart where band widths are proportional to the specified 'value'. Each stage's top edge matches its value, and the bottom edge matches the next stage's value, visually representing drop-offs. ```markdown ::: funnel ::: {.item value="1000"} Visitors ::: ::: {.item value="600"} Leads ::: ::: {.item value="250"} Qualified ::: ::: {.item value="80"} Customers ::: ::: ``` -------------------------------- ### Cycle Diagram with Custom Colors Source: https://emilhvitfeldt.github.io/quarto-diagrams/cycle.html Illustrates how to apply colors to a cycle diagram. The `node-color` attribute sets a base color for all segments, while `color` on an individual item overrides it for that specific segment. ```markdown ::: {.cycle node-color="#7a3b5c"} ::: item Build ::: ::: {.item color="#3b7a5c"} Measure ::: ::: item Learn ::: ::: ``` -------------------------------- ### Horizontal Hierarchy Diagram Source: https://emilhvitfeldt.github.io/quarto-diagrams/hierarchy.html Add the `.horizontal` class to render the hierarchy from left to right instead of top to bottom. ```markdown ::::: {.hierarchy .horizontal} :::: item Root ::: item Branch A ::: ::: item Branch B ::: :::: ::::: ``` -------------------------------- ### Colors in Pie Charts Source: https://emilhvitfeldt.github.io/quarto-diagrams/colors.html The `node-color` and `color` attributes function similarly for `.pie` containers and their items, allowing for base and per-item color customization in pie charts. ```html ::: pie ::: {.item color="#e74c3c"} Alice ::: ::: {.item color="#e67e22"} Bob ::: ::: {.item color="#27ae60"} Carol ::: ::: {.item color="#2980b9"} David ::: ::: ``` -------------------------------- ### Thin Arrow Style Source: https://emilhvitfeldt.github.io/quarto-diagrams/arrow-types.html Renders arrows as SVG thin straight lines with arrowheads. Use the .arrow-thin class for this style. ```html ::: {.circle-flow .node-box .arrow-thin} ::: ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: ``` -------------------------------- ### Pie Chart with Highlighted Slices Source: https://emilhvitfeldt.github.io/quarto-diagrams/pie.html Offsets specific slices outward by applying the `.gap` modifier to individual items. ```markdown ::: pie ::: {.item .gap} Alice ::: ::: item Bob ::: ::: {.item .gap} Carol ::: ::: item David ::: ::: item Eve ::: ::: ``` -------------------------------- ### Pie Chart with Slice Gaps Source: https://emilhvitfeldt.github.io/quarto-diagrams/pie.html Creates visible separation between slices by adding the `.gap` modifier to the pie container. ```markdown ::: {.pie .gap} ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: item David ::: ::: item Eve ::: ::: ``` -------------------------------- ### Mixed Node Colors (Base and Overrides) Source: https://emilhvitfeldt.github.io/quarto-diagrams/colors.html Apply a base `node-color` to the container and then use the `color` attribute on specific `item` divs to override the color for individual nodes in a Circle Flow diagram. ```html ::: {.circle-flow .node-box node-color="#2980b9"} ::: item Alice ::: ::: {.item color="#e74c3c"} Bob ::: ::: item Carol ::: ::: ``` -------------------------------- ### Three Set Venn Diagram Source: https://emilhvitfeldt.github.io/quarto-diagrams/venn.html Creates a Venn diagram with three circles arranged in a trefoil. Use 'ab=', 'bc=', 'ac=', and 'abc=' attributes to label specific intersections and the triple overlap. All overlap attributes are optional. ```html ::: {.venn ab="A∩B" bc="B∩C" ac="A∩C" abc="All three"} ::: item Design ::: ::: item Engineering ::: ::: item Product ::: ::: ``` -------------------------------- ### Default Node Circle Shape Source: https://emilhvitfeldt.github.io/quarto-diagrams/node-shapes.html Uses the default filled circle node shape. No additional class is required. ```html ::: circle-flow ::: Alice ::: ::: Bob ::: ::: Carol ::: ::: ``` -------------------------------- ### Donut Chart with Custom Hole Size Source: https://emilhvitfeldt.github.io/quarto-diagrams/pie.html Controls the ring thickness of a donut chart using the `hole=` attribute, specified as a fraction of the radius. ```markdown ::: {.pie .donut hole="0.7"} ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: ``` -------------------------------- ### Pyramid Diagram with Separated Bands Source: https://emilhvitfeldt.github.io/quarto-diagrams/pyramid.html Separates bands using the `.gap` modifier on the container for overall separation, or on individual items to detach specific bands. ```markdown ::: {.pyramid .gap} ::: item Top ::: ::: item Middle ::: ::: item Base ::: ::: ``` -------------------------------- ### Funnel Chart with Separated Bands Source: https://emilhvitfeldt.github.io/quarto-diagrams/funnel.html Adds visual separation between funnel bands. Apply `.gap` to the container to separate all bands, or to an individual item to detach only that specific band. ```markdown ::: {.funnel .gap} ::: item Top ::: ::: item Middle ::: ::: item Base ::: ::: ``` -------------------------------- ### Thin Arrow Process Flow Source: https://emilhvitfeldt.github.io/quarto-diagrams/process.html Uses the .arrow-thin modifier for a line-based arrow style in a process flow. ```markdown ::: {.process .arrow-thin} ::: Plan ::: ::: Build ::: ::: Ship ::: ::: ::: ``` -------------------------------- ### Pie Chart with Shared Node Color Source: https://emilhvitfeldt.github.io/quarto-diagrams/pie.html Sets a uniform color for all slices using the `node-color=` attribute on the container. ```markdown ::: {.pie node-color="#e67e22"} ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: item David ::: ::: item Eve ::: ::: ``` -------------------------------- ### Funnel Chart with Custom Colors Source: https://emilhvitfeldt.github.io/quarto-diagrams/funnel.html Allows customization of funnel band colors. Use 'node-color' on the container for a base color for all bands, or 'color' on an individual item to override a single band's color. ```markdown ::: {.funnel node-color="#7a3b5c"} ::: item Top ::: ::: {.item color="#3b7a5c"} Middle ::: ::: item Base ::: ::: ``` -------------------------------- ### Ring Arrow Style Source: https://emilhvitfeldt.github.io/quarto-diagrams/arrow-types.html Uses a single SVG circle behind all nodes, with a mask to hide the ring within each node. Apply the .arrow-ring class. ```html ::: {.circle-flow .node-box .arrow-ring} ::: ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: ``` -------------------------------- ### Matrix with Outlined Cells Source: https://emilhvitfeldt.github.io/quarto-diagrams/matrix.html Uses the .outline modifier to display transparent cells with borders and divider lines instead of filled quadrants. This provides a less visually dense representation. ```markdown ::: {.matrix .outline x-axis="Urgency" y-axis="Importance"} ::: item Do ::: ::: item Schedule ::: ::: item Delete ::: ::: item Delegate ::: ::: ``` -------------------------------- ### Two Set Venn Diagram Source: https://emilhvitfeldt.github.io/quarto-diagrams/venn.html Generates a Venn diagram with two overlapping circles. The 'ab=' attribute labels the shared intersection. Omit 'ab=' to leave the overlap unlabeled. ```html ::: {.venn ab="Shared"} ::: item Frontend ::: ::: item Backend ::: ::: ``` -------------------------------- ### Stacked Venn Diagram with Angle Rotation Source: https://emilhvitfeldt.github.io/quarto-diagrams/stacked-venn.html This snippet demonstrates how to add a clockwise rotation to the stacked venn diagram using the 'angle' attribute, tucking the nesting towards a specific corner. ```html ::: {.stacked-venn angle="45"} ::: item Everyone ::: ::: item Customers ::: ::: item Subscribers ::: ::: ::: ``` -------------------------------- ### Matrix with Separated Cells Source: https://emilhvitfeldt.github.io/quarto-diagrams/matrix.html Applies the .gap modifier to the container to introduce spacing between the four cells, effectively removing the center divider lines for a more distinct separation. ```markdown ::: {.matrix .gap} ::: item A ::: ::: item B ::: ::: item C ::: ::: item D ::: ::: ``` -------------------------------- ### Inverted Pyramid Diagram Source: https://emilhvitfeldt.github.io/quarto-diagrams/pyramid.html Flips the pyramid so the first item is the wide top, useful for funnel-like representations. Add the `.inverted` modifier to the container. ```markdown ::: {.pyramid .inverted} ::: item Awareness ::: ::: item Interest ::: ::: item Decision ::: ::: ``` -------------------------------- ### Set Per-Node Color (Circle Flow) Source: https://emilhvitfeldt.github.io/quarto-diagrams/colors.html Use the `color` attribute on individual `item` divs to override the default node color for specific elements within a Circle Flow diagram. ```html ::: {.circle-flow .node-box} ::: {.item color="#e74c3c"} Alice ::: ::: {.item color="#e67e22"} Bob ::: ::: {.item color="#27ae60"} Carol ::: ::: ``` -------------------------------- ### Custom Set Colors Source: https://emilhvitfeldt.github.io/quarto-diagrams/venn.html Overrides the default color of individual circles in a Venn diagram using the 'color=' attribute on an item. Alternatively, use 'node-color=' on the container to set a single base color for all circles. ```html ::: {.venn} ::: {.item color="#7a3b5c"} Tea ::: ::: {.item color="#3b7a5c"} Coffee ::: ::: ``` -------------------------------- ### Pie Chart with Individual Slice Colors Source: https://emilhvitfeldt.github.io/quarto-diagrams/pie.html Overrides the default slice color for specific items using the `color=` attribute on individual items. ```markdown ::: pie ::: {.item color="#e74c3c"} Alice ::: ::: {.item color="#e67e22"} Bob ::: ::: {.item color="#27ae60"} Carol ::: ::: {.item color="#2980b9"} David ::: ::: {.item color="#8e44ad"} Eve ::: ::: ``` -------------------------------- ### Double Arrow Style Source: https://emilhvitfeldt.github.io/quarto-diagrams/arrow-types.html Displays arrows as SVG thin lines with arrowheads on both ends. Apply the .arrow-double class for this style. ```html ::: {.circle-flow .node-box .arrow-double} ::: ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: ``` -------------------------------- ### Donut Chart with Center Text Source: https://emilhvitfeldt.github.io/quarto-diagrams/pie.html Adds a label or figure to the center of a donut chart using the `center=` attribute. ```markdown ::: {.pie .donut center="100%"} ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: item David ::: ::: ``` -------------------------------- ### Node Box Shape Source: https://emilhvitfeldt.github.io/quarto-diagrams/node-shapes.html Applies rounded rectangle nodes. The width is nodeRadius × 1.8 and height is nodeRadius × 1.2. ```html ::: {.circle-flow .node-box} ::: Alice ::: ::: Bob ::: ::: Carol ::: ::: ``` -------------------------------- ### Matrix with Arrowed Axes Source: https://emilhvitfeldt.github.io/quarto-diagrams/matrix.html Adds axis lines with arrowheads pointing towards the 'high' direction by applying the .arrows modifier. This is useful for indicating directionality in frameworks. ```markdown ::: {.matrix .arrows x-axis="Effort" y-axis="Impact" x-high="High" y-high="High"} ::: item Quick Wins ::: ::: item Major Projects ::: ::: item Thankless Tasks ::: ::: item Fill-Ins ::: ::: ``` -------------------------------- ### Default Arrow Chevron Style Source: https://emilhvitfeldt.github.io/quarto-diagrams/arrow-types.html Uses div-based filled chevron shapes for arrows. This is the default style for Circle Flow diagrams. ```html ::: {.circle-flow .node-box} ::: ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: ``` -------------------------------- ### Curved Arrow Style Source: https://emilhvitfeldt.github.io/quarto-diagrams/arrow-types.html Employs filled SVG shapes for arrows, featuring an outer arc, inner arc, and a pointed tip between nodes. Apply the .arrow-curved class. ```html ::: {.circle-flow .node-box .arrow-curved} ::: ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: ``` -------------------------------- ### Custom Intersection Label Color Source: https://emilhvitfeldt.github.io/quarto-diagrams/venn.html Recolors all intersection labels in a three-set Venn diagram using the 'overlap-color=' attribute. This is useful when default dark labels are hard to read against darker overlaps. ```html ::: {.venn ab="A∩B" bc="B∩C" ac="A∩C" abc="All three" overlap-color="#ffffff"} ::: item Design ::: ::: item Engineering ::: ::: item Product ::: ::: ``` -------------------------------- ### Arc Arrow Style Source: https://emilhvitfeldt.github.io/quarto-diagrams/arrow-types.html Draws a single filled SVG arrow shape that follows a clockwise path around all nodes. Use the .arrow-arc class. ```html ::: {.circle-flow .node-box .arrow-arc} ::: ::: item Alice ::: ::: item Bob ::: ::: item Carol ::: ::: ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.