SilverBullet plug for showing a graph view of the documents

This plug aims to bring similar functionality as the Obsidian Graph view to Silver Bullet.

Installation

Open (cmd+k) your PLUGS note in SilverBullet and add this plug to the list:

- github:bbroeksema/silverbullet-graphview/graphview.plug.js

Then run the Plugs: Update command and off you go!

Usage

Run the Show Global Graph command to open up the graph view. Zoom and pan is supported by scroll and pinch gestures with the mouse(pad).

Tags & Paths

Set tags on the pages to customize their appearance in the graph

#node_color=ff0000 → Change node color to red
#.graphignore → Hide the page from the graph

You can also use other custom tags to define node colors: Create a colormap with HEX-colorcodes in SETTINGS.md. In this example, a node of a page where the tag #garden is set will be rendered as green:

# Graphview
graphview:
  default_color: "000000"
  colormap:
    path:
      ⚙ services: "01017a"
      📓 notes: "02bdb6"
      🚧 projects: "ffc533"
      🧰 how-to: "96020e"
    tag:
      garden: "0bbd02"

Links

Click on the node labels to directly navigate to pages in your space

Label-shortening

Long labels are shortened for readability. E.g. notesarecool/somethingverylong/subsubsubsub/foo → notes./somet./subsu./foo

For offline development

To ease development of the visual part, the offline folder contains a copy of the html and custom javascript. As well as a simple graph model.

$ cd offline
$ python -m http.server

v411e / silverbullet-graphview