Graph Visualisation

Foam comes with a graph visualisation of your notes. To see the graph execute the Foam: Show Graph command.

The graph will:

Custom Graph Styles

Currently, custom graph styles are supported through the setting.

Graph style demo

A sample configuration object is provided below:

"": {
    "background": "#202020",
    "fontSize": 12,
    "lineColor": "#277da1",
    "lineWidth": 0.2,
    "particleWidth": 1.0,
    "highlightedForeground": "#f9c74f",
    "node": {
        "note": "#277da1",
        "placeholder": "#545454",

Style nodes by type

It is possible to customize the style of a node based on the type property in the YAML frontmatter of the corresponding document.

For example the following note:

type: feature
# Backlinking


And the following settings.json:

"": {
    "node": {
        "feature": "red",

Will result in the following graph:

Style node by type