Get AI summaries of any video or article — Sign up free
TheBrain-like graph-based navigation in Obsidian with Excalidraw, Dataview, and Hover Editor (V2) thumbnail

TheBrain-like graph-based navigation in Obsidian with Excalidraw, Dataview, and Hover Editor (V2)

5 min read

Based on Zsolt's Visual Personal Knowledge Management's video on YouTube. If you like this content, support the original creators by watching, liking and subscribing to their content.

TL;DR

Node styling is controlled by tag-based settings, including prefix-based tag matching for consistent visual grouping.

Briefing

A new “brain navigation” workflow for Obsidian turns Excalidraw diagrams into a graph-style vault navigator—complete with color-coded nodes, parent/child link semantics, and support for aliases—while removing reliance on the Breadcrumbs plugin. The core shift in this version is replacing breadcrumbs with Dataview, specifically to avoid a common failure mode: breadcrumbs assumes file names are unique across the vault, but real vaults often contain identical names in different folders.

Node appearance is driven by tags. Daily notes and Excalidraw-linked pages can render with distinct prefixes, emoji, border colors, background colors, and font colors, all mapped through tag-based settings. In the settings, the user defines how each tag should look; tags can also be matched by prefix, so a single configuration can style a whole family of tags (e.g., “books” matching “books/books fiction/books self-help,” etc.). This makes the navigation graph visually encode meaning—rather than treating every node as the same generic link.

The graph also distinguishes between real files and “virtual nodes.” Red nodes indicate links that haven’t been created in Obsidian yet and appear dimmed in the vault until the target file exists. The script uses tag relationships to infer structure: a “child” tag produces child nodes, while a “parent” tag produces parent nodes. In the demonstration, “tomorrow” behaves as a child tag and “this week” as a parent tag, which changes how those not-yet-created targets appear in the graph.

Another practical improvement is display naming. When “display alias if available” is enabled, the node label uses the page alias rather than the raw file name—using the first alias if multiple exist. This helps the navigation graph stay readable even when underlying file names are technical or inconsistent.

On the navigation mechanics side, the script supports multiple nodes that share the same file name but live in different folders by treating them as separate nodes—something the earlier breadcrumbs approach struggled with. To make this work, the settings include a simplified breadcrumb-like direction model (up/down/lateral, described as “jump”) plus a list of data fields used from documents.

Installation and use are designed to be lightweight. The script is installed from the Excalidraw “script engine” store, then started from the Excalidraw menu. Users can also bind a hotkey in Obsidian settings to start/stop the navigation view, which enables editing the graph layout—dragging nodes, adding items, and saving custom views. The workflow extends to the Hover Editor plugin: the navigation can run inside a pinned hover window, switch between compact and full-screen modes, and keep tracking where the user is in the vault.

Finally, creating a navigation canvas is straightforward: start a new Excalidraw drawing, run the script to convert it into a brain navigation file, rename it, and pin it to favorites as the starting point for future vault navigation. Performance isn’t yet “instant,” but the author considers it fit for purpose and hints at a future conversion into a full Obsidian plugin based on additional ideas and feedback from GitHub or the comments.

Cornell Notes

This Obsidian navigation setup turns an Excalidraw canvas into a graph-based “brain” view that helps users move through their vault. Node styling is controlled by tag rules, including prefix-based tag matching for consistent color and label schemes. Links to files that don’t exist yet appear as red, dimmed “virtual nodes,” and parent/child relationships are inferred from tag configuration. Breadcrumbs are replaced with Dataview to handle the real-world case where identical file names exist in different folders. With alias support enabled, node labels can show human-friendly page aliases instead of raw file names, and the view can run in a hotkey-driven window or inside Hover Editor.

Why does this version abandon the Breadcrumbs plugin, and what replaces it?

Breadcrumbs is dropped because it assumes file names are unique across the vault. In practice, vaults often contain the same file name in multiple folders, which breaks correct node mapping. The replacement is Dataview: the navigation script now only requires Dataview, and users configure a simplified direction model (up/down/lateral, called “jump”) plus which document data fields to use in settings.

How does the script decide what a node should look like?

Node appearance is driven by tags. In settings, users define a look-and-feel descriptor per tag—such as note color, gate color, border color, background color, and a prefix. Tags can match by prefix, so one rule can style multiple related tags (e.g., a “books” tag rule applying to “books fiction,” “books self help,” “books nonfiction,” and so on).

What do red nodes mean, and how does parent/child structure show up?

Red nodes represent virtual nodes: links that point to files not yet created in Obsidian. They also appear as dimmed links in Obsidian. Parent/child behavior comes from tag configuration: in the example, “tomorrow” is set as a child tag and “this week” as a parent tag, which changes how those not-yet-created targets are categorized in the graph.

How are node labels chosen when aliases exist?

With “display alias if available” turned on, the node label uses the page alias instead of the file name. If multiple aliases exist, the script uses the first one. This keeps the graph readable even when file names are less user-friendly.

How does the script handle identical file names in different folders?

It treats same-named pages in different folders as separate nodes. The demonstration points to two “latch” nodes tied to the same underlying file name: one exists in “book notes for information anxiety,” while the other is a referenced-but-not-created link. The graph distinguishes them by their parent/child status and their location in the vault structure.

What are the main ways to run and use the navigation view?

Users install the script from Excalidraw’s script engine store, then start it from the Excalidraw menu. A hotkey can be configured in Obsidian settings to start/stop the script. After stopping, users can customize the view by dragging nodes and adding items. The workflow also integrates with Hover Editor: the navigation can run in a pinned hover window, switch between compact and full-screen modes, and follow navigation so the graph stays at the last location when reopened.

Review Questions

  1. What specific limitation of the Breadcrumbs plugin makes Dataview necessary in this workflow?
  2. How do tag rules influence both node styling and the parent/child classification of links?
  3. When alias display is enabled, what determines the text shown on a node label?

Key Points

  1. 1

    Node styling is controlled by tag-based settings, including prefix-based tag matching for consistent visual grouping.

  2. 2

    Red, dimmed nodes indicate virtual links to files that don’t exist yet in Obsidian.

  3. 3

    Parent/child relationships in the graph are inferred from tag configuration (e.g., a “child” tag vs a “parent” tag).

  4. 4

    Breadcrumbs is replaced by Dataview to correctly handle identical file names across different folders.

  5. 5

    Optional alias display lets node labels use human-friendly page aliases instead of raw file names.

  6. 6

    The navigation can be started via Excalidraw’s script engine menu or bound to an Obsidian hotkey for quick toggling.

  7. 7

    Hover Editor integration supports pinned, resizable navigation windows that can follow where the user navigates in the vault.

Highlights

Dataview replaces Breadcrumbs to fix a real-world problem: identical file names in different folders break breadcrumb-based navigation.
Tag rules don’t just color nodes—they also define prefixes and can infer parent/child structure for links.
Virtual nodes show up as red and dimmed until the referenced file is actually created in Obsidian.
With alias display enabled, node labels become readable by showing the page alias (first alias if multiple).
The graph can run inside Hover Editor, letting navigation happen in a compact corner or full-screen mode.

Topics

Mentioned

  • Dataview