No description
Find a file
2026-07-15 19:58:32 +09:00
src refactor: rename Tree Settings UI header to Options and update version history 2026-07-15 19:58:32 +09:00
.gitignore Initial commit for Tree Graph View 2026-07-14 11:43:24 +09:00
esbuild.config.mjs Initial commit for Tree Graph View 2026-07-14 11:43:24 +09:00
LICENSE Initial commit for Tree Graph View 2026-07-14 11:43:24 +09:00
main.js refactor: rename Tree Settings UI header to Options and update version history 2026-07-15 19:58:32 +09:00
manifest.json refactor: rename Tree Settings UI header to Options and update version history 2026-07-15 19:58:32 +09:00
package-lock.json feat: add colorByDepth setting and reduce default node size scale 2026-07-15 12:24:54 +09:00
package.json refactor: rename Tree Settings UI header to Options and update version history 2026-07-15 19:58:32 +09:00
README.md Initial commit for Tree Graph View 2026-07-14 11:43:24 +09:00
styles.css Initial commit for Tree Graph View 2026-07-14 11:43:24 +09:00
tsconfig.json Initial commit for Tree Graph View 2026-07-14 11:43:24 +09:00
versions.json refactor: rename Tree Settings UI header to Options and update version history 2026-07-15 19:58:32 +09:00

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:

  1. Frontmatter Metadata: Specify parent links in your note's YAML frontmatter (e.g. gravity_parent: Parent Note).
  2. 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.
  3. Outlinks: Automatically model links inside a note ([[Parent Note]]) as outbound parental paths.
  4. 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}).
  • 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)

  1. Open Obsidian Settings > Community Plugins.
  2. Turn on community plugins.
  3. Search for Tree and click Install.
  4. Enable the plugin in your settings.

Option 2: Manual Installation

  1. Go to the Releases page of this repository.
  2. Download the three files from the latest release: main.js, manifest.json, and styles.css.
  3. Open your vault's plugin directory: <your-vault>/.obsidian/plugins/ (create the plugins folder if it doesn't exist).
  4. Create a folder named tree-graph-view and paste the three files inside it.
  5. 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.