Obsidian Stats logoObsidian Stats

Deterministic Graph View

by Jean Toledo
5
4
3
2
1
Score: 35/100
New Plugin
Install Code

Description

This plugin has not been manually reviewed by Obsidian staff. A deterministic graph view for Obsidian.

Reviews

No reviews yet.

Stats

stars
downloads
0
forks
0
days
NaN
days
NaN
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
0
commits

Latest Version

Invalid date

Changelog

See all version on GitHub

README file from

Github

Deterministic Graph View

Build and Lint

An Obsidian plugin that renders your vault's link graph with a deterministic layout. Unlike Obsidian's built-in graph view (which uses a force-directed simulation and rearranges itself every time you open it), this plugin produces the same layout on every render for the same set of notes and links.

Built on top of Cytoscape.js using a breadthfirst layout.

Why

The default graph view is great for exploring, but the positions of nodes shift every time you reopen it. That makes it hard to:

  • Build a mental map of your vault.
  • Compare the graph across sessions.
  • Use the graph as a stable visual index of your notes.

This plugin trades some of the "organic" look for predictable, reproducible node placement.

Features

  • Deterministic breadthfirst graph layout (Cytoscape).
  • Click a node to open the corresponding note in a new tab.
  • Hover highlight on nodes (darkened background + pointer cursor).
  • Auto-refreshes when files are created, deleted, or renamed.
  • Refits the graph when the view becomes active again.
  • Respects Obsidian's Files & links → Excluded files (userIgnoreFilters) and re-renders when they change.
  • Customizable node and edge colors via the settings tab.
  • Single network ribbon icon to open the graph in a new tab.

Installation

Manual

  1. Download main.js, manifest.json, and styles.css from the latest release.
  2. Copy them into your vault under: 
    <Vault>/.obsidian/plugins/deterministic-graph-view/
  3. Reload Obsidian.
  4. Enable Deterministic Graph View under Settings → Community plugins.

From source

git clone https://github.com/jeantoledo/obsidian-deterministic-graph-view.git
cd obsidian-deterministic-graph-view
npm install
npm run build

Then copy main.js, manifest.json, and styles.css into <Vault>/.obsidian/plugins/deterministic-graph-view/.

Usage

Click the network ribbon icon to open the graph in a new tab. Click any node to open the corresponding note.

The graph rebuilds automatically when notes are created, deleted, or renamed, and when you change Obsidian's excluded-files filters. When the view leaf becomes active again, the graph is refit to the container.

Settings

Settings → Deterministic Graph View exposes:

  • Node background color
  • Node text color
  • Edge color

Defaults use a "Deep Ocean Blue / Soft Light Gray / Slate Teal" palette (see src/constants.ts).

Note: settings changes apply on the next render (e.g. after creating/renaming a note, or reopening the view).

Development

Requirements: Node 18+ and npm.

npm install
npm run dev       # esbuild watch mode
npm run build     # type-check + production build
npm run lint      # eslint

For local testing, symlink or copy this folder into <Vault>/.obsidian/plugins/deterministic-graph-view/ and run npm run dev. Reload Obsidian to pick up changes.

Project layout

src/
  main.ts            # plugin lifecycle: load settings, register view + setting tab, ribbon icon
  PluginView.ts      # ItemView wrapper: lifecycle, vault/workspace events, render scheduling
  GraphRenderer.ts   # Cytoscape instance, graph build, styling, node interactions
  SettingTab.ts      # color-picker based settings UI
  constants.ts       # default settings + color palette
  utils.ts           # small helpers (e.g. darkenHexColor)
types/
  PluginSettings.ts  # PluginSettings interface (node + edge colors)

License

0BSD

Sponsors