Quarto - Diagrams

quarto.org · 1,853 words · saved by 1 readers

Quarto has native support for embedding Mermaid and Graphviz diagrams. This enables you to create flowcharts, sequence diagrams, state diagrams, gantt charts, and more using a plain text syntax inspired by markdown. For example, here we embed a flowchart created using Mermaid: As illustrated above, diagrams are embedded using {mermaid} and {dot} executable cells (dot is underlying language of Graphviz) For print output formats like pdf or docx, diagram rendering makes use use of the Chrome or Edge web browser to create a high-quality PNG. Quarto can automatically use an existing version of Chrome or Edge on your system, or alternatively if you don’t have either installed, can use a lighter-weight library version of Chrome (see Chrome Install below for details). Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. Mermaid diagrams use %% as their comment syntax, and so mermaid optio

Diagrams – Quarto Overview Quarto has native support for embedding Mermaid and Graphviz diagrams. This enables you to create flowcharts, sequence diagrams, state diagrams, gantt charts, and more using a plain text syntax inspired by markdown. For example, here we embed a flowchart created using Mermaid: ```{mermaid} flowchart LR A[Hard edge] --> B(Round edge) B --> C{Decision} C --> D[Result one] C --> E[Result two] ``` flowchart LR A[Hard edge] --> B(Round edge) B --> C{Decision} C --> D[Result one] C --> E[Result two] As illustrated above, Mermaid diagrams are embedded using {mermaid} execut

Quarto - Diagrams

related reading