mirror of
https://gitlab.com/MisterBiggs/brain-quartz.git
synced 2025-07-22 14:21:24 +00:00
.github
docs
advanced
features
Citations.md
Docker Support.md
Latex.md
Mermaid diagrams.md
Obsidian compatibility.md
OxHugo compatibility.md
RSS Feed.md
Roam Research compatibility.md
SPA Routing.md
backlinks.md
breadcrumbs.md
callouts.md
comments.md
darkmode.md
explorer.md
folder and tag listings.md
full-text search.md
graph view.md
i18n.md
index.md
popover previews.md
private pages.md
reader mode.md
recent notes.md
social images.md
syntax highlighting.md
table of contents.md
upcoming features.md
wikilinks.md
images
plugins
tags
authoring content.md
build.md
configuration.md
hosting.md
index.md
layout-components.md
layout.md
migrating from Quartz 3.md
philosophy.md
setting up your GitHub repository.md
showcase.md
upgrading.md
quartz
.gitattributes
.gitignore
.gitlab-ci.yml
.node-version
.npmrc
.prettierignore
.prettierrc
CODE_OF_CONDUCT.md
Dockerfile
LICENSE.txt
README.md
bun.lock
globals.d.ts
index.d.ts
package-lock.json
package.json
quartz.config.ts
quartz.layout.ts
tsconfig.json
66 lines
2.6 KiB
Markdown
66 lines
2.6 KiB
Markdown
---
|
|
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.
|
|
|
|
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 `Component.Graph()`.
|
|
|
|
For example, here's what the default configuration looks like:
|
|
|
|
```typescript title="quartz.layout.ts"
|
|
Component.Graph({
|
|
localGraph: {
|
|
drag: true, // whether to allow panning the view around
|
|
zoom: true, // whether to allow zooming in and out
|
|
depth: 1, // how many hops of notes to display
|
|
scale: 1.1, // default view scale
|
|
repelForce: 0.5, // how much nodes should repel each other
|
|
centerForce: 0.3, // how much force to use when trying to center the nodes
|
|
linkDistance: 30, // how long should the links be by default?
|
|
fontSize: 0.6, // what size should the node labels be?
|
|
opacityScale: 1, // how quickly do we fade out the labels when zooming out?
|
|
removeTags: [], // what tags to remove from the graph
|
|
showTags: true, // whether to show tags in the graph
|
|
enableRadial: false, // whether to constrain the graph, similar to Obsidian
|
|
},
|
|
globalGraph: {
|
|
drag: true,
|
|
zoom: true,
|
|
depth: -1,
|
|
scale: 0.9,
|
|
repelForce: 0.5,
|
|
centerForce: 0.3,
|
|
linkDistance: 30,
|
|
fontSize: 0.6,
|
|
opacityScale: 1,
|
|
removeTags: [], // what tags to remove from the graph
|
|
showTags: true, // whether to show tags in the graph
|
|
enableRadial: true, // whether to constrain the graph, similar to Obsidian
|
|
},
|
|
})
|
|
```
|
|
|
|
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: delete all usages of `Component.Graph()` from `quartz.layout.ts`.
|
|
- Component: `quartz/components/Graph.tsx`
|
|
- Style: `quartz/components/styles/graph.scss`
|
|
- Script: `quartz/components/scripts/graph.inline.ts`
|