An interactive knowledge graph that lives in the right panel. Shows all pages and their connections as a force-directed D3.js graph, highlighting the current page.
- Full graph — shows every page and wikilink in your space (system pages filtered out)
- Auto-updates on page navigation — graph recenters on the current page
- Click to navigate — click any neighbor node to jump to that page
- Drag nodes — reposition nodes, simulation reheats
- Zoom & pan — scroll to zoom, drag background to pan
- Hover highlighting — hover a node to highlight its connections, dim the rest
- Adaptive node sizing — nodes scale with connection count
- Orphan page detection — surfaces pages with zero wikilinks (toggled via toolbar)
- Toolbar — header bar with toggle buttons for graph options
- Dark/light mode — follows SilverBullet's theme automatically
Run the Library: Install command in SilverBullet and use this URL:
https://github.com/selcux/silverbullet-atlas/blob/main/PLUG.mdRun the command: Atlas: Toggle Graph View
This opens (or closes) the graph panel on the right side. The graph automatically updates as you navigate between pages.
The toolbar at the top of the panel lets you toggle Orphans — pages with no incoming or outgoing links. Your preference persists across sessions.
- Script-generated links not shown — Links produced dynamically by Space Lua templates (e.g.
${string.format("[[Journal/%s|Today's Journal]]", os.date("%Y-%m-%d"))}) are not included in the graph. The SilverBullet index only tracks statically written wikilinks.
-
Create a namespace folder in your space:
mkdir -p ~/myspace/Library/Atlas -
Build and copy:
deno task build cp atlas.plug.js ~/myspace/Library/Atlas/ -
In SilverBullet: run Plugs: Update or reload the page.
Web Worker (no DOM) Panel iframe (has DOM)
┌─────────────────────┐ ┌──────────────────────┐
│ atlas.ts │──JSON──▶│ d3.min.js │
│ ├─ toggleAtlas() │ │ atlas-render.js │
│ ├─ updateGraph() │◀─call───│ atlas-style.css │
│ ├─ handleNavigate() │ │ │
│ └─ setOption() │ │ Toolbar + SVG graph │
│ │ │ drag/zoom/click │
│ graph.ts │ └──────────────────────┘
│ ├─ buildFullGraph() │
│ └─ queryAllPages() │
│ ▼ │
│ SB Index syscalls │
└─────────────────────┘- Worker → Panel:
editor.showPanel("rhs", ...)injects D3 + graph data aswindow.__ATLAS_DATA__into the iframe script. - Panel → Worker: The iframe calls
syscall("system.invokeFunction", "atlas.handleNavigate", pageId)to navigate. - Theme: SB sets
data-themeon the iframe's<html>viapostMessage. CSS variables activate accordingly.
All colors are defined as CSS custom properties in atlas-style.css, keyed by data-theme:
| Variable | Purpose |
|---|---|
--atlas-bg |
Panel background |
--atlas-node-current |
Current page node |
--atlas-node-neighbor |
Other nodes |
--atlas-edge / --atlas-edge-highlight |
Edge default / hover |
--atlas-label / --atlas-label-current |
Label text |
--atlas-node-orphan |
Orphan node fill + stroke |
--atlas-node-dim / --atlas-edge-dim / --atlas-label-dim |
Dimmed on hover |
--atlas-toolbar-bg |
Toolbar background |
--atlas-toolbar-border |
Toolbar bottom border |
--atlas-btn-hover / --atlas-btn-active |
Button states |