# Graph View

## Summary

• Visualize the notes and schemas in your workspace in a graph view
• Click on a node to open up the corresponding note/schema in your workspace
• Filter graph view to show only desired data
• Much faster startup times than the legacy note/schema graph
• Scales to virtually any size graph

## Types

### Note Graph

#### Full Note Graph

Show graph of all your notes. You can activate this by using the Show Note Graph Command command and toggling the Show Note Graph option.

#### Local Note Graph

Shows a graph of your current note and immediate neighbors. This is the default view when you run Show Note Graph.

### Schema Graph

Show graph of your schemas. You can activate by running the Show Schema Graph command.

## Commands

### Show Note Graph V2

Launch the command palette (see docs): > Dendron: Show Note Graph V2

Click on a node to open up the corresponding note in your workspace, or open a note to center the graph on that note.

Use the filter view in the top left to filter and modify the data shown by the graph.

### Show Schema Graph V2

Launch the command palette (see docs): > Dendron: Show Schema Graph V2

Click on a node to open up the corresponding schema in your workspace.

Use the filter view in the top left to filter and modify the data shown by the graph.

The schema graph shows high level connections between a vault's root schema and other schemas within the vault. These other schemas may have other nodes connected to them representing additional children of that schema.

## Filter View

In the top left of both the note and schema graphs lives the graph filter view. This UI element contains information about the graph and various filtering options.

### Vaults

This view contains a list of each vault in the workspace. The visibility of each vault in the graph can be toggled to better filter the graph.

### Connections

• Hierarchy: When checked, include hierarchical graph connections

### Filter

This view contains various options to filter the graph.

#### String Filters

Use these string filters to include/exclude graph nodes by filename or name. These fields support multiple arguments in the form of a comma-separated or space-separated list.

• Allowlist: Graph nodes including any of these string arguments will be included in the graph
• Blocklist: Graph nodes including any of these string arguments will be excluded from the graph

Here's a quick example:

• Allow: journal.2021, dog
• Include any notes that include either journal.2021 or dog in their name or filename
• Block: cat
• Exclude any notes with cat in their name or filename

#### Other Filters

• Show Stubs: When checked, show stub notes in the graph

### Options

• Show Local Graph (Note Only): When checked, show local graph centered around the current open note. Otherwise, show the full workspace-wide note graph.

• Allow Relayout: When checked, layout the graph again when the graph configuration is updated.

• This is useful in instances you'd like to preserve the current layout but add/remove information, e.g. adding link connections to a hierarchical graph while maintaining readability

### Information

Primarily for debugging, this section has information about graph size. Edge counts are calculated individually from the actual rendered edges, so may not represent the true rendered count if a certain type of edge is hidden.

• Hierarchical Edges: Number of hierarchical connections between nodes
• Nodes: Number of nodes in the graph

## Custom Styling

Dendron supports custom styling of schema and note graphs. Styling follows the Cytoscape.js format, which is CSS-like with a couple of differences. Full Cytoscape.js styling documentation can be found here.

Launch the command palette (see docs): > Dendron: Configure Graph Style (css)

Once the styles.css file is open, add your styles and save. The styles will be visible in the graph the next time it is opened.

### Selectors

In order to style the graph, there are a variety of selectors to choose from. Currently supported selectors include:

SelectorDescription
nodeAny node
edgeAny edge
:selectedAny selected node
.parentAny parent node (local note graph only)
.linksAny link connection edge
.hierarchyAny hierarchy connection edge

There are also some vault-specific selectors. These include:

SelectorDescription
.vault-VAULT_NAMEAny node or edge in the VAULT_NAME vault

Selectors can be chained together, just like in regular CSS. For example, node.vault-VAULT_NAME would target only nodes in the VAULT_NAME vault.

### Style Properties

#### Styling Nodes

Some common node style properties are listed below. Full node style property list →

PropertyDescription
widthThe width of the node’s body.
heightThe height of the node’s body.
shapeThe shape of the node's body (ellipse, triangle, etc.)
background-colorThe color of the node's body.
border-widthThe size of the node’s border.
border-colorThe color of the node’s border.

#### Styling Node Labels

Some common node label style properties are listed below. Select labels by selecting the node associated with them. Full node label style property list →

PropertyDescription
colorThe color of the label.
font-sizeThe size of the label text.
font-weightThe font weight of the label text.

#### Styling Edges

Some common edge style properties are listed below. Full edge style property list →

PropertyDescription
widthThe width of the edge line.
line-colorThe color of the edge line.
line-styleThe style of the edge line (solid, dotted, or dashed).

### Troubleshooting

If styles are not showing up in the graph, try the following steps:

1. Check that every style property ends in a semi-colon.
2. Check that you have no unused selectors (e.g. node {}). Cytoscape can be a bit particular at times, so just comment out selectors if not in use.
3. Close and re-open the graph view. Styles only apply on graph open at the moment.