Please consider supporting the plugin. There are many hours of work and effort behind it. The two easiest ways to support the plugin are either by starring ⭐ the repository or by donating any amount on Ko-fi ❤️. Thank you!
Better Default Settings
Enforce all new nodes to be aligned to the grid
Customize default text node size
Customize default file node size
Modify the minimum node size
Disable the font scaling relative to the zoom level
Canvas Commands
Advanced Canvas: Create text node
Create a new text node
Advanced Canvas: Create file node
Create a new file node
Advanced Canvas: Select all edges
Select all edges
Advanced Canvas: Zoom to selection
Zoom to the bounding box of the selected nodes
Advanced Canvas: Clone node up/down/left/right
Clone the selected node in the direction of the arrow keys
The cloned node will have the same dimensions and color as the original node
Advanced Canvas: Expand node up/down/left/right
Expand the selected node in the direction of the arrow keys
Node Styles
You can customize the default node styles using the settings.
Set the style of the border to dotted, dashed or invisible.
Border Styles Example
Edge Styles
You can customize the default edge styles using the settings.
Path Styles
Set the style of the edge paths to dotted, short-dashed or long-dashed.
Edge Styles Example
Arrow Styles
Set the style of the arrows to triangle outline, halved triangle, thin triangle, diamond, diamond outline, circle or circle outline.
Arrow Styles Example
Pathfinding Methods
Set the pathfinding method of the edges (arrows) to default, straight, squared or A*.
Path Styles Example
Custom Styles
Custom style attributes for nodes and edges can easily be added.
Add a popup menu option
Open the <VAULT-PATH>/.obsidian/plugins/obsidian-advanced-canvas/data.json file
If you want to add an option to node popup menu, search for customNodeStyleAttributes property, otherwise search for customEdgeStyleAttributes property. (Create it if it doesn't exist yet)
Add the custom popup menu option (Remove the comments!)
"customNodeStyleAttributes": [
{
"datasetKey": "exampleStyleAttribute", // Must be unique and written in camelCase"label": "Example Style Attribute",
"options": [
{
"icon": "cloud-sun", // Choose an icon from lucide.dev"label": "Sunny Appearance",
"value": null// Null means default
},
{
"icon": "cloud-rain-wind", // Choose an icon from lucide.dev"label": "Rainy Appearance",
"value": "rainy"// The value that gets set
}
]
}
// You can add more categories here
]
Create a new CSS snippet in your vault (And enable it in the settings)
.canvas-node[data-<DATASET-KEY>="rainy"] { /* The dataset key is now written in kebab-case */background-color:#7f7f7f;
}
Reload Obsidian and enjoy your new custom style!
Custom Colors
Add custom colors to the color picker. You can add them using the following css snippet:
:root {
/* Where X is the index of the color in the palette *//* The colors 1-6 are already used by Obsidian */--canvas-color-X:0,255,0; /* RGB */
}
Custom Colors In Palette
Properties Support
Support for properties in canvas files just like in md files. You can edit the properties using the updated control menu.
Supported properties:
cssclasses (Separate multiple classes with a space)
In presentation mode, you can navigate through the nodes using the arrow keys or the PageUp/PageDown keys (Compatible with most presentation remotes). The different slides/nodes are connected using arrows. If you want to have multiple arrows pointing from the same node, you can number them in the order you want to navigate through them. While in presentation mode, the canvas is in readonly mode (So better readonly effects the presentation mode as well!). You can exit the presentation mode using the ESC key or the corresponding command. If you want to continue the presentation from the last slide you were on, you can use the Advanced Canvas: Continue presentation command.
Canvas File
More Complex Example
Canvas File
Usage
Create the first slide
Create the first slide of the presentation using the updated popup menu
OR create a node and mark it as the first slide using the updated card menu
Add more slides
Link the slides using arrows
If you want to loop back to a previous slide, you can number the arrows in the order you want to navigate through them
TIP: Create slides with consistent dimensions by using the updated card menu
Control the presentation
Start the presentation using the command palette (Advanced Canvas: Start presentation)
Change slides using the arrow keys
Exit the presentation using the ESC key
Portals
Embed other canvases inside your canvas and create edges (arrows) to the embedded canvas.
Usage
Embed a canvas file and click on the door icon of the popup menu to open a portal
Collapsible Groups
Collapse and expand groups to organize your canvas.
Collapsible Groups Example
Auto Node Resizing
Resize nodes automatically when the text content changes.
Auto Node Resizing Example
Focus Mode
Focus on a single node and blur all other nodes.
Focus Mode Example
Better Readonly
Disable node popup menus
Lock the canvas' position
Lock the canvas' zoom
BUT to retain some interactivity, it allows zooming to a bounding box (e.g. zoom to selection, zoom to fit all)
Usage
Use the updated control menu to toggle the new features (Only shown if the canvas is in readonly mode)
Encapsulate Selection
Move the current selection to a new canvas and create a link in the current canvas.
Usage
Select the nodes you want to encapsulate
Use the context menu (right click) to encapsulate the selection
OR use the command palette (Advanced Canvas: Encapsulate selection)
Canvas Events
All custom events are prefixed with advanced-canvas: and can be listened to using app.workspace.on (Just like the default events).
All Events
advanced-canvas:canvas-changed
Fired when a new canvas gets loaded
Payload: Canvas
advanced-canvas:viewport-changed:before and advanced-canvas:viewport-changed:after
