generated from makary/foam-template
101 lines
4.1 KiB
Markdown
101 lines
4.1 KiB
Markdown
# Graph Visualization
|
|
|
|
Foam comes with a graph visualization of your notes.
|
|
To see the graph execute the `Foam: Show Graph` command.
|
|
|
|
Your files, such as notes and documents, are shown as the nodes of the graph along with the tags defined in your notes. The edges of the graph represent either a link between two files or a file that contains a certain tag. A node in the graph will grow in size with the number of connections it has, representing stronger or more defined concepts and topics.
|
|
|
|
## Graph Navigation
|
|
|
|
With the Foam graph visualization you can:
|
|
|
|
- highlight a node by hovering on it, to quickly see how it's connected to the rest of your notes
|
|
- select one or more (by keeping `shift` pressed while selecting) nodes by clicking on them, to better understand the structure of your notes
|
|
- navigate to a note by clicking on it's node while pressing `ctrl` or `cmd`
|
|
- automatically center the graph on the currently edited note, to immediately see its connections
|
|
|
|
## Filter View
|
|
|
|
If you only wish to view certain types of notes or tags, or want to hide linked attachment nodes then you can apply filters to the graph.
|
|
|
|
- Open the graph view using the `Foam: Show Graph` command
|
|
- Click the button in the top right corner of the graph view that says "Open Controls"
|
|
- Expand the "Filter By Type" dropdown to view the selection of types that you can filter by
|
|
- Uncheck the checkbox for any type you want to hide
|
|
- The types displayed in this dropdown are defined by [[note-properties]] which includes Foam-standard types as well as custom types defined by you!
|
|
|
|
|
|
|
|
## Custom Graph Styles
|
|
|
|
The Foam graph will use the current VS Code theme by default, but it's possible to customize it with the `foam.graph.style` setting.
|
|
|
|
|
|
|
|
A sample configuration object is provided below, you can provide as many or as little configuration as you wish:
|
|
|
|
```json
|
|
"foam.graph.style": {
|
|
"background": "#202020",
|
|
"fontSize": 12,
|
|
"lineColor": "#277da1",
|
|
"lineWidth": 0.2,
|
|
"particleWidth": 1.0,
|
|
"highlightedForeground": "#f9c74f",
|
|
"node": {
|
|
"note": "#277da1",
|
|
}
|
|
}
|
|
```
|
|
|
|
- `background` background color of the graph, adjust to increase contrast
|
|
- `fontSize` size of the title font for each node
|
|
- `lineColor` color of the edges between nodes in the graph
|
|
- `lineWidth` thickness of the edges between nodes
|
|
- `particleWidth` size of the particle animation showing link direction when highlighting a node
|
|
- `highlightedForeground` color of highlighted nodes and edges when hovering over a node
|
|
- to style individual types of nodes jump to the next section: [Style Nodes By Type](#style-nodes-by-type)
|
|
|
|
### 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.
|
|
|
|
There are a few default node types defined by Foam that are displayed in the graph:
|
|
|
|
- `note` defines the color for regular nodes whose documents have not overridden the `type` property.
|
|
- `placeholder` defines the color for links that don't match any existing note. This is a [[placeholder]] because no file with such name exists.
|
|
- see [[wikilinks]] for more info <!--NOTE: this placeholder link should NOT have an associated file. This is to demonstrate the custom coloring-->
|
|
- `tag` defines the color for nodes representing #tags, allowing tags to be used as graph nodes similar to backlinks.
|
|
- see [[tags]] for more info
|
|
- `feature` shows an example of how you can use note types to customize the graph. It defines the color for the notes of type `feature`
|
|
- see [[note-properties]] for details
|
|
|
|
For example the following `backlinking.md` note:
|
|
|
|
```markdown
|
|
---
|
|
type: feature
|
|
---
|
|
# Backlinking
|
|
|
|
...
|
|
```
|
|
|
|
And the following `settings.json`:
|
|
|
|
```json
|
|
"foam.graph.style": {
|
|
"background": "#202020",
|
|
"node": {
|
|
"note": "#277da1",
|
|
"placeholder": "#545454",
|
|
"tag": "#f9c74f",
|
|
"feature": "red",
|
|
}
|
|
}
|
|
```
|
|
|
|
Will result in the following graph:
|
|
|
|
|
|
|