quartz/docs/features/graph view.md

title	tags
Graph View	component

Quartz features a graph-view that can show both a local graph view and a global graph view.

• The local graph view shows files that either link to the current file or are linked from the current file. In other words, it shows all notes that are at most one hop away.
• The global graph view can be toggled by clicking the graph icon on the top-right of the local graph view. It shows all the notes in your graph and how they connect to each other.

[!info] The Graph View is now a community plugin. This demonstrates how external plugins can extend Quartz functionality while serving as a reference implementation for plugin developers.

Installation

The Graph View is available as a community plugin from GitHub:

npm install github:quartz-community/graph --legacy-peer-deps

Then add it to your quartz.config.yaml:

plugins:
  - source: github:quartz-community/graph
    enabled: true
    layout:
      position: right
      priority: 10

Features

By default, the node radius is proportional to the total number of incoming and outgoing internal links from that file.

Additionally, similar to how browsers highlight visited links a different colour, the graph view will also show nodes that you have visited in a different colour.

[!info] Graph View requires the ContentIndex emitter plugin to be present in the configuration.

Customization

Most configuration can be done by passing in options to Graph().

For example, here's what the default configuration looks like:

plugins:
  - source: github:quartz-community/graph
    enabled: true
    options:
      localGraph:
        drag: true
        zoom: true
        depth: 1
        scale: 1.1
        repelForce: 0.5
        centerForce: 0.3
        linkDistance: 30
        fontSize: 0.6
        opacityScale: 1
        removeTags: []
        showTags: true
        enableRadial: false
      globalGraph:
        drag: true
        zoom: true
        depth: -1
        scale: 0.9
        repelForce: 0.5
        centerForce: 0.3
        linkDistance: 30
        fontSize: 0.6
        opacityScale: 1
        removeTags: []
        showTags: true
        focusOnHover: true
        enableRadial: true
    layout:
      position: right
      priority: 10

When passing in your own options, you can omit any or all of these fields if you'd like to keep the default value for that field.

Want to customize it even more?

• Removing graph view: remove the graph entry from quartz.config.yaml or set enabled: false
• Component source: https://github.com/quartz-community/graph