Vault Graph 3D

An interactive 3D force-directed knowledge graph for Obsidian. Visualise your entire vault as a live 3D network — every note, tag, attachment, and wikilink rendered as a navigable graph.

Features

• 3D force-directed graph — every note and tag is a sphere; wikilinks and tag relationships are edges
• Colour-coded by top-level folder — colours are assigned automatically to whatever folders exist in your vault (no configuration needed)
• Tag nodes — each unique #tag becomes its own hub node, matching Obsidian's built-in graph topology
• Attachment nodes — non-markdown files (images, PDFs, etc.) appear as grey nodes
• Unresolved link nodes — phantom nodes for wikilinks that point to notes that don't yet exist
• Click to open — clicking any note node opens it in Obsidian
• Sidebar filters — toggle tags, attachments, orphan nodes, and unresolved nodes; filter by folder; filter by tag
• Search — type to filter nodes by name, folder, or tag
• Settings panel — adjust link distance, repel strength, centre force, node size, link opacity, label mode, particles, and background colour
• Auto-rotate — one-click orbit animation
• Fit to view — zoom camera to show all visible nodes
• Canvas label overlay — crisp text labels rendered on a 2D canvas overlay (no WebGL text jank)
• Fully offline after build — the 3d-force-graph library is bundled inline; no CDN calls at runtime

Installation

Option A — Community plugins (recommended)

1. Open Obsidian Settings > Community plugins
2. Disable Safe Mode if prompted
3. Click Browse, search for Vault Graph 3D
4. Click Install, then Enable

Option B — Manual install

1. Download the latest release from the Releases page
2. Copy main.js, manifest.json, and styles.css into your vault's plugin folder:

   <your vault>/.obsidian/plugins/vault-graph-3d/
   

3. Reload Obsidian (Ctrl/Cmd+R or restart)
4. Go to Settings > Community plugins and enable Vault Graph 3D

Usage

Opening the graph

• Click the git-fork icon in the left ribbon, or
• Run the command Vault Graph 3D: Open 3D Knowledge Graph from the Command Palette (Ctrl/Cmd+P)

The graph opens in a new tab. It may take a few seconds to load on large vaults.

Navigating

Action	Result
Left-drag	Orbit / rotate the graph
Scroll	Zoom in/out
Right-drag	Pan
Hover a node	Highlight connected nodes and links; show note name in HUD
Click a note node	Open the note in Obsidian
Click a tag node	(No action — tag nodes are visual only)

Sidebar filters

The left sidebar lets you control what is shown:

• Tags toggle — show/hide tag hub nodes and their edges
• Attachments toggle — show/hide non-markdown file nodes
• Existing files only toggle — hide unresolved (phantom) link targets
• Orphans toggle — show/hide nodes with no connections
• Folders section — click a folder row to hide/show all nodes in that folder
• Tags section — click a tag chip to show only notes with that tag; click again to deselect
• Search box — type to filter nodes by note name, folder name, or tag

Click the ☰ button at the top-left of the graph to collapse/expand the sidebar.

Settings panel

Click the ⚙ Settings button (top-right) to open the settings panel:

Setting	Description
Link distance	Target spring length between connected nodes
Repel strength	How strongly nodes push each other apart
Center force	How strongly nodes are pulled toward the centre
Node size	Global multiplier for node sphere sizes
Show wikilinks	Toggle wikilink edges
Show tag links	Toggle tag relationship edges
Link opacity	Transparency of all edges
Labels	Show labels on All nodes, Hover only, or None
Particles on hover	Animated particles along highlighted edges
Background	Change the background colour

Controls

Button	Action
⊙ Fit	Zoom camera to fit all visible nodes
↻ Rotate	Toggle automatic orbit rotation
⚙ Settings	Open/close the settings panel

Building from source

If you want to modify the plugin or build main.js yourself:

# 1. Clone the repository
git clone https://github.com/bloksphere/obsidian-vault-graph-3d.git
cd obsidian-vault-graph-3d

# 2. Install dependencies (downloads 3d-force-graph into node_modules/)
npm install

# 3. Build main.js (inlines the HTML + vendor library)
npm run build

The build step (build.js) does three things:

1. Reads node_modules/3d-force-graph/dist/3d-force-graph.min.js and inlines it into src/graph-view.html
2. JSON-stringifies the resulting HTML and injects it as the GRAPH_HTML constant in src/main.js
3. Writes the final main.js to the repo root

After building, copy main.js, manifest.json, and styles.css to your vault's plugin folder to test locally.

Note: src/main.js and src/graph-view.html are the source files. Edit those, not main.js.

Internet connection

src/graph-view.html contains a CDN script tag for the 3d-force-graph library (used during development). After running npm run build, the library is bundled inline — no internet connection is required at runtime for users installing from a release.

License

MIT — see LICENSE.