Files
foam/docs/features/graph-visualisation.md
José Duarte 792e66b061 Add custom graph styling support (#438)
* Add graph style to VSCode settings

* Update default to an empty object

* Add function to retrieve the graph style from the settings

* Implement the graph custom styling setting

The implementation makes use of the webview communication mechanism to
switch messages between the webview and the graph.
It works as follows:

- When the webview is loaded, it now sends a single request to VSCode,
the request asks VSCode for the graph style
- When VSCode answers with the style, the graph style is updated and
the webview loading process continues as normal.

The style change does not modify the API, in fact it makes use of the
shadiest programming tatic ever, *global variables* to remain
compatible.

The style object *currently* supports four base fields:
- background: string
- fontSize: int
- highlightedForeground: string
- node: object
  - note: string
  - nonExistingNote: string
  - unknown: string

* Simplify null handling logic

* Remove debug logs

* Rename style setting

* Rename message style type

* Remove forgotten debug log

* Refactor the code to match model & action

* Add missing break

* Allow for dynamic style updates

* Fix the window loading bug

* Implement a permanent fix to the bug

* Replace `nonExistingNote` with `placeholder`

* Include the new graph style feature in the docs

* Remove unnecessary async

* Remove unused case
2021-01-13 17:55:58 +00:00

1.3 KiB

Graph Visualisation

Foam comes with a graph visualisation. The graph will:

  • allow you to highlight a node by hovering on it, to quickly see how it's connected to the rest of your notes
  • allow you to select one or more (by keeping SHIFT pressed while selecting) nodes by clicking on them, to better understand the structure of your notes
  • to navigate to a note by clicking on it while pressing CTRL or CMD
  • automatically center the graph on the currently edited note, to immediately see it's connections

Custom Graph Styles

Currently, custom graph styles are supported through the foam.graph.style setting.

Graph style demo

A sample configuration object is provided below:

"background": "#202020",
"fontSize": 12,
"highlightedForeground": "#f9c74f",
"node": {
    "note": "#277da1",
    "placeholder": "#545454",
    "unknown": "#f94144"
}

Another extension that provides a great graph visualisation is Markdown Links. The extension doesn't use the Foam model, so discrepancies might arise, but it's a great visualisation extension nonetheless!

  • Use the Markdown Links: Show Graph command to see the graph Demo of graph visualiser