Interested in building visualizations on top of Foam?

Foam is an ecosystem of tools for creating, sharing and publishing your personal knowledge base, digital gardens, etc.

Right now, we use the excellent tchayen/markdown-links VS Code Extension to render graphs, but it's clear that for larger workspaces, a simple network visualization is not optimal.

Here's an example of what Foam's own documentation workspace looks like after 1 month of content creation:

In this graph

• Each point (node) is a markdown document in your Foam, and
• Each line (edge) is a link between the documents.

I'd like to explore alternative ways of visualizing a graph of documents. There are many possible use cases for such a visualization:

• Navigation inside VS Code (visualisation can send back events to navigate in/between documents etc)
• Website navigation in a published Foam
• Zooming in/out
• Discovering connections
• Organising/structuring
• Decoration/inspiration
• Etc.

In addition to just nodes and edges, we could consider other data points:

• Length of document
• Number of in/out edges
• Frequency of updates over time extracted from workspace git history...
• etc.

• Foam uses dagrejs/graphlib to represent the graph of documents.
• See data/foam-docs-2020-07-16.json for an example of such structure.
• You can use graphlib.json.read to rehydrate the graph if needed.

Any HTML/JavaScript can work! As long as it runs in a web browser such as the VS Code WebView, it can work with Foam!

This list of graph visualization libraries compiled by Elise Devaux is just a few!

If you're into dataviz and want to help people visualize their knowledge graphs, post ideas, prototypes and hacks as issues and PRs to this repository!

A simple HTML file is a good starting point! If we discover an interesting visualization and want to bring it into VS Code or the Foam website template, we can work together to integrate it.

Hop onto Foam Discord for more information!

In the long term, Foam could have a generalised "framework", where anyone can drop a plain HTML document that knows how to read a Foam graph into their workspace, and turn it into a useful visualization.