Obsidian Graph Panel

Display an Obsidian-style relationship graph of Markdown files in VS Code. It can visualize link relationships between Markdown files, and open the selected Markdown file directly with a single click.

✨ Features

Auto Parsing

• Recursively scans all .md files in the workspace (skips hidden directories such as .obsidian)
• Recognizes Obsidian double brackets: [[filename]], [[filename|alias]], [[filename#heading]]
• Recognizes standard Markdown links (text + path in parentheses): 3 forms — root / subdirectory / folder style
• Subdirectory files are fully supported: node IDs use relative paths (e.g. sub/file), click to open the correct file
• Link resolution strategy: exact match → folder fallback ([[foo]] → foo/index.md) → basename fuzzy match → same-directory priority
• Dangling links (pointing to non-existent files) are silently ignored
• Edges are automatically deduplicated — no duplicate links between the same pair of nodes

Visualization Layout

• Nodes start randomly scattered within a circular area (uniform distribution)
• Force-directed simulation: repulsion between nodes + spring forces along edges + weak center attraction
• After release, all nodes are pulled back to a uniform circular layout by the circular restoring force
• Zoom level is fully independent from graph shape

Interaction

• Scroll wheel zoom: centered on the cursor, with a smooth step
• Drag a node: the dragged node is pinned; its edges stretch like rubber bands and pull connected nodes along
• Click a node: opens the corresponding Markdown file's VS Code native preview via markdown.showPreview
• Drag empty background: pan the whole graph without changing zoom or shape
• Mouse hover: shows a glassmorphism filename label above the hovered node (visible at any zoom level)

UI Features

• Dark / light theme: auto-adapts to the current VS Code theme on open; can be toggled manually with the button in the top-left corner
• Glassmorphism label: semi-transparent background + double-layer stroke + text shadow
• When zoomed in past zoom > 1.5, file names stay displayed below nodes; hidden when zoomed out to reduce visual clutter

🚀 Usage

Open the Graph (4 ways)

1. Editor title bar icon — open any .md file; a graph icon appears on the right of the title bar
2. Explorer title bar icon — a graph icon appears at the top of the Explorer panel
3. Explorer context menu — right-click a .md file or folder → choose "Open Obsidian Graph Panel"
4. Command Palette — Ctrl+Shift+P (macOS: Cmd+Shift+P) → type "Open Obsidian Graph Panel"

In-graph Operations

⚙️ Configuration

Open Settings (Ctrl+,, macOS: Cmd+,) → search "Obsidian Graph Panel" to independently control the visibility of the three graph entry buttons:

Changes take effect immediately — no VS Code restart required. The Command Palette entry is always available and is not affected by these settings.

⚠️ Known Limitations

• Edges are undirected (no arrows)
• Dangling links (pointing to non-existent [[file]]) are silently ignored
• Double bracket aliases ([[name|alias]]) currently use only the name part as the node ID
• When multiple files share the same name, "same directory first" disambiguation is used; in other cases an unintended file may be picked

📮 Contact & Feedback

If you encounter any issues, find bugs, or have feature suggestions, please open an issue on GitHub:

• Issues: https://github.com/secbraingriffin/obsidian-graph-panel/issues