Initial import

2026-07-11 17:08:37 +00:00
commit 03e5f3452b
303 changed files with 43365 additions and 0 deletions
@@ -0,0 +1,91 @@
+---
+title: "Graph View"
+tags:
+  - 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:
+
+```bash
+npm install github:quartz-community/graph --legacy-peer-deps
+```
+
+Then add it to your `quartz.config.yaml`:
+
+```yaml title="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:
+
+```yaml title="quartz.config.yaml"
+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