obsidian-vault-dashboard

Vault Dashboard - Interactive Obsidian Knowledge Graph Plugin

Website · Getting started · Features · Documentation

Live Demo: https://outblade.github.io/obsidian-vault-dashboard/demo.html

Website Screenshot

An Obsidian plugin that turns every new tab into a live analytics dashboard. Visualize your entire knowledge base as an interactive force-directed graph, track writing progress with real-time stats, explore your most-used tags, and navigate recently modified notes — all without leaving Obsidian.

Features

Live Demo

Try the browser simulation now: Vault Dashboard Live Demo

What you can do:

Technology Stack

Installation

Prerequisites

Quick Start

# Clone the repository
git clone https://github.com/OutBlade/obsidian-vault-dashboard.git
cd obsidian-vault-dashboard

# Install dependencies
npm install

# Build the plugin
npm run build

Copy the three output files into your vault’s plugin folder:

cp main.js manifest.json styles.css "<YourVault>/.obsidian/plugins/vault-dashboard/"

Then in Obsidian: Settings → Community plugins → enable Vault Dashboard

A grid icon appears in the ribbon. You can also open it via the command palette: Open Vault Dashboard.

Development Mode

# Watch for changes and rebuild automatically
npm run dev

Usage

Opening the Dashboard

// The plugin registers a ribbon icon and a command
// Ribbon: click the grid icon in the left sidebar
// Command palette: "Open Vault Dashboard"

// The view opens as a new tab and stays in sync with your vault

Interacting with the Graph

// Drag a node to reposition it — physics resumes on release
// Scroll wheel to zoom in/out
// Click and drag the background to pan
// Double-click a node to open that note in Obsidian
// Hover a node for a metadata tooltip
// Click a legend color to dim/hide that topic cluster

Plugin Settings

// Settings → Community plugins → Vault Dashboard → Options

const settings = {
  maxNodes: 150,      // Top-N notes by link count shown in graph
  showLabels: true,   // Toggle note name labels on the graph
};

Advanced Graph Configuration

// The force simulation uses three forces:
// 1. Repulsion — all node pairs push apart (prevents overlap)
// 2. Spring edges — linked notes attract each other
// 3. Clustering — same-topic notes softly attract each other

// Hub notes (MOCs, high-degree nodes) are automatically detected:
// radius = 9 + min(degree, 12) * 0.5
// Regular notes: radius = 4 + min(degree, 12) * 0.55

Project Structure

obsidian-vault-dashboard/
├── src/
│   └── main.ts           # Full plugin source (view, simulation, settings)
├── demo.html             # Standalone browser demo — no build required
├── styles.css            # Plugin stylesheet (uses Obsidian CSS variables)
├── manifest.json         # Obsidian plugin manifest
├── package.json          # npm dependencies and build scripts
├── tsconfig.json         # TypeScript configuration
├── esbuild.config.mjs    # esbuild bundler configuration
├── screenshot.png        # Dashboard preview
└── README.md             # This file

Roadmap

Contributing

Contributions are welcome! Here’s how to get started:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/your-improvement)
  3. Commit your changes (git commit -m 'Add your improvement')
  4. Push to the branch (git push origin feature/your-improvement)
  5. Open a Pull Request

Development Setup

# Clone and set up
git clone https://github.com/OutBlade/obsidian-vault-dashboard.git
cd obsidian-vault-dashboard
npm install

# Start watch mode
npm run dev

# Copy output to your test vault
cp main.js manifest.json styles.css "<TestVault>/.obsidian/plugins/vault-dashboard/"

Code Style

Acknowledgments

License

This project is licensed under the MIT License — see the LICENSE file for details.

Made with passion by OutBlade

Tags: Obsidian plugin, knowledge graph, vault dashboard, PKM, note-taking, force-directed graph, second brain, Obsidian analytics