bbroeksema / silverbullet-graphview

A Graphview for Silvebulletmd

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.json

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

silverbullet-graphview's Issues

Idea: Node hover and click effects

Base node size on connectedness of nodes

As a user I would like more connected nodes to be more visible by having a bigger size.

Constraints

• Nodes should have a minimum size
• Nodes should have a maximum size

Idea:
Linear interpolation between min and max size based on connectedness of nodes

Optional:

• Min and max size of nodes could be configurable. Let's do a simple implementation with hard-coded values first.

Make sure the panel takes full height

The panel currently takes a fixed height. This should be dynamic and the full available height.

Add labels to nodes when zooming in

As a user I would like to see labels when I zoom in on the graph.

Labels should be centered below the node to which they belong.

@willemhendriks has some code for this already.

Add support for node colouring based on prefix

As a user, I want to color nodes differently based on prefix

E.g.
Resources/People/XXX -> Green
Resources/Organisations/YYY -> yellow
Project/ZZZ -> Blue

This must be implemented using the configuration system of @silverbulletmd as prefixes are completely user-specific.

Although, it would be nice to have some kind of color-picker, let's not complicate too much initially and use hex values.

Performance

I just imported my large (1500 file) Obsidian vault into silverbullet and turned on the graph. I got at most 2 frames per second in the animation.

Some ideas on how to approach this

• provide controls for which items to show. In my case, removing the daily notes would probably remove at least 50% of edges
• use canvas instead of SVG
• use webgl

I'm willing and ready to contribute to this, but I'm not sure what the current strategy is since I just found silver bullet. What do you think is the best way forward here?

Find a proper default gray value for nodes and links instead of black