Foam

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 foam.graph.style setting.

Graph style demo

A sample configuration object is provided below:

"foam.graph.style": {
    "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 backlinking.md note:

---
type: feature
---
# Backlinking

...

And the following settings.json:

"foam.graph.style": {
    "node": {
        "feature": "red",
    }
}

Will result in the following graph:

Style node by type