mirror of
https://github.com/studiogamma/tree-graph-view.git
synced 2026-07-22 08:26:41 +00:00
No description
| src | ||
| .gitignore | ||
| esbuild.config.mjs | ||
| LICENSE | ||
| main.js | ||
| manifest.json | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| styles.css | ||
| tsconfig.json | ||
| versions.json | ||
Tree
Tree is an interactive Obsidian plugin that visualizes your vault as a clean, forest-like tree graph (dendrogram). Unlike standard graph view, this plugin structures your notes hierarchically and visually replicates nodes with multiple parents to keep the layout perfectly organized and untangled.
✨ Features
- Forest Dendrogram Layout: Arrange your note hierarchy into structured, beautiful trees. Supports Top Down, Bottom Up, Left to Right, and Right to Left growing directions.
- Visual Replication (Multi-Parent Support): If a child note has multiple parent notes, it is visually replicated under each parent's branch, preventing edges from crossing or tangling.
- No Data Loss: Retains original vault connections. Cycles and self-references are handled dynamically during layout calculation without breaking or deleting links in your notes.
- Theme Styling: Includes custom Light and Dark themes.
- Overlay Settings Panel: A collapsible panel floats directly over the canvas to let you adjust layout spacing, sizing, and directions on the fly.
🌳 Multiple Relation Sources
Tree supports four distinct ways to resolve parent-child hierarchies in your vault, customizable directly inside the settings panel:
- Frontmatter Metadata: Specify parent links in your note's YAML frontmatter (e.g.
gravity_parent: Parent Note). - Tags: Turn tags (e.g.,
#ideas,#projects) into root nodes! Notes sharing the tag will render underneath them. If no notes exist for a specific tag, a virtual tag node is created. - Outlinks: Automatically model links inside a note (
[[Parent Note]]) as outbound parental paths. - Backlinks: Model backlinks from other notes as inbound child pathways.
- Replication: Multiple parent assignments are fully supported by duplicating the child subtree visually. Clicking any visual duplicate will still open the correct single Obsidian markdown note.
- Cycle Prevention: If a parent-child relationship forms a loop, the path builder detects the cycle and stops recursion to prevent infinite loops, without mutating your notes.
⚙️ Settings & Customizability
- Layout Direction: Choose between Top Down, Bottom Up, Left to Right, and Right to Left tree layouts.
- Sibling Sort Order: Choose how sibling nodes are ordered (File Size, Created Time, Modified Time, or Alphabetical).
- Custom Spacing & Sizing Sliders:
- Depth Spacing Scale: Adjust the distance between parent-child levels (
0.5\text{x} - 2.0\text{x}). - Sibling Spacing Scale: Adjust the distance between sibling nodes (
0.5\text{x} - 2.0\text{x}). - Node Size Scale: Adjust node size (
0.5\text{x} - 2.0\text{x}).
- Depth Spacing Scale: Adjust the distance between parent-child levels (
- Seamless Visual Toggles:
- Hide Lone Nodes: Toggle whether isolated nodes (with no parents or children) are hidden.
- Hide Connection Edges: Hide or show the curved connection lines between parent and child nodes.
🚀 Installation
Option 1: Via Community Plugins (Pending Store Approval)
- Open Obsidian Settings > Community Plugins.
- Turn on community plugins.
- Search for Tree and click Install.
- Enable the plugin in your settings.
Option 2: Manual Installation
- Go to the Releases page of this repository.
- Download the three files from the latest release:
main.js,manifest.json, andstyles.css. - Open your vault's plugin directory:
<your-vault>/.obsidian/plugins/(create thepluginsfolder if it doesn't exist). - Create a folder named
tree-graph-viewand paste the three files inside it. - Restart Obsidian, go to Community Plugins, and turn on Tree.
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
Crafted with love by studiogamma.
☕ Support
If you find this plugin helpful, consider supporting the developer.