Getting Started

Installation

Install the quarto extension:

quarto add wvictor14/quarto-graph

Then install the Python package, which resolves the graph data:

uv add quarto-graph

Add to _quarto.yml

Wire up the pre-render/post-render steps and add quarto-graph to filters:

project:
  type: website
  pre-render: quarto-graph prerender
  post-render: quarto-graph postrender

filters:
  - quarto-graph

Using wikilinks

Type [[Home]] to link to a page named “Home”, without knowing its file path. quarto-graph will replace the wikilink a link with the actual path and display text “Home”.

Here’s an example,

Say you this somewhere in the contet of a page:

blog/a-very-interesting-blog-post.qmd:

Go back to [[Home]] using this wikilink

And if somewhere else, you have another page with this as the following yaml

somewhere/deep/in/your/project/index.qmd:

---
title: Home
---

Then, in the rendered webpage, [[Home]] will be replaced with a link

[Home](somewhere/deep/in/your/project/index.html)

In a nutshell, wikilinks link pages without needing to know the actual path of each page.

You can move pages without updating any links.

quarto-graph also tracks these connections between pages, which powers the graph and backlinks features covered in the next sections.

Graphs in your website

quarto-graph makes connections available at runtime. These connections can be visualized as a graph. This extension provides a graph widget that can be inserted as a shortcode:

{{< quarto-graph-full >}} will reproduce a graph of your entire website:

Click on the nodes in the graph, and they will take you to those pages.

In the graph, nodes (the circles) represent pages; they are labelled with their title. Edges, the lines that connect each node, are explicit connections defined with Wikilinks and regular markdown links.

This graph-based perspective of pages, comes from the world of wikis and note-taking apps¹, builds visual intuition of connected ideas. quarto-graph brings this concept to quarto websites.

See The Graph Widget for more about the graph widget, how to embed it in pages, and how to customize it.

Backlinks

quarto-graph uses these connections to tell readers which pages link to the one they’re viewing, using Backlinks.

Example: Page A and Page B both have links to Page C. With backlinks enabled, page C, will have a Backlinks sections appended to the end of it’s page, with links to pages A and B.

For an example, see the bottom of this page for its own backlinks.

See [Backlinks] for more details.

Frontmatter reference

Key	Purpose
title:	Page title, and the link text shown when a wikilink has no \|display override
type:	Colors the node in the graph widget: concept, person, reference, project, experiment, moc; anything else (or omitted) falls back to gray
also-known-as:	Extra names this page’s wikilinks can be reached by, on top of its filename. A separate key from Quarto’s own aliases:; see Wikilinks and Aliases for why
quarto-graph:	Per-page override of the sidebar mini-panel (sidebar: true/false, or sidebar: {enabled, depth}); see The Graph Widget

Display text and anchors

Add | to show custom link text instead of the target’s title:

[[Home|back home]]

Link to a heading with #:

[[Home#Installation]]

Combine both:

[[Home#Installation|see install steps]]

Backlinks

• Wikilinks and Aliases
• quarto-graph

Footnotes

1. For other implementations of wikilinks, see Foam and Quartz.