Advanced Canvas for Obsidian.md

⚡ Supercharge your canvas experience! Create presentations, flowcharts and more!

Feature Overview

This plugin enhances the Obsidian canvas with a wide array of features:

• Core Enhancements:
  • Full Metadata Cache Support: Integrate canvases with Obsidian's graph view, outgoing links, and backlinks.
  • Better Default Settings: Customize default node sizes, grid alignment, and more.
  • Enhanced Readonly Mode: Finer control over canvas interaction in readonly mode.
  • Improved Image Export: Export to PNG/SVG with transparency and other options.
• Node Customization:
  • Node Styles: Includes various Flowchart Shapes, Border Styles, and Text Alignment.
  • Auto Node Resizing: Nodes adapt to their content size automatically.
  • Variable Breakpoints: Control content rendering based on zoom level.
  • Z-Ordering Control: Manage node stacking order.
  • Custom Colors: Add your own colors to the picker.
• Edge Customization:
  • Edge Styles: Includes Path Styles (dotted, dashed), Arrow Styles, and Pathfinding Methods.
  • Floating Edges: Edges automatically adjust their connection side.
  • Flip Edge: Quickly reverse edge direction.
• Interaction & Workflow:
  • Canvas Commands: A suite of commands for efficient canvas manipulation.
  • Presentation Mode: Create and navigate slide-like presentations.
  • Portals: Embed other canvases within your current canvas.
  • Collapsible Groups: Organize your canvas with expandable/collapsible groups.
  • Focus Mode: Highlight a single node by blurring others.
  • Encapsulate Selection: Move selected nodes to a new canvas, linking back to it.
  • Create groups independently of the nodes.
• Styling & Extensibility:
  • Custom Styles: Add unique CSS-based styles to nodes and edges.
  • Canvas Events: Expose canvas events for use in other plugins.

All features can be enabled/disabled in the settings.

Installation

Open the Community Plugins tab in the settings and search for "Advanced Canvas" (or click here).

Other installation methods

• Install it using BRAT
• Manual folder creation
  1. Create a folder named advanced-canvas in your vault's plugins folder (<vault>/.obsidian/plugins/).
  2. Download main.js, styles.css and manifest.json from the latest release and put them in the advanced-canvas folder.
  3. Enable the plugin in Settings -> Community plugins -> Installed plugins

Support

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!

Full Metadata Cache Support

Advanced Canvas enables .canvas files to be indexed by the metadata cache. This means that there is now full compatibility with the graph view, outgoing links and backlinks. You can even enable (optional) the creation of an outgoing link if two embeds in a canvas are connected by an edge. This feature brings the full power of Obsidian's linking system to the canvas file format.

Metadata Cache Support Example

Outgoing Link Using An Edge Example

Technical Details

• The file cache of a .canvas file now contains a value for the hash key (Generated from the filepath) instead of an empty string.
  • Check the app.metadataCache.fileCache[<filepath>] object to see the changes.
• The metadata cache is located in the app.metadataCache object - the same object that is used by Obsidian for markdown files.
  • e.g. app.metadataCache.getCache/app.metadataCache.getFileCache now works with .canvas files.
  • The position object which is found inside metadata cache entries now contains a new key nodeId for .canvas files.
  • The metadata cache entry for a .canvas file now contains a new key nodes which is an object of type { [nodeId: string]: MetadataCacheEntry } - this allows for other plugins to access the full metadata cache for single nodes. The MetadataCacheEntry object is the same as for markdown files (even created with the same function - 1:1 compatibility).
• The resolved links object now has entries for .canvas files.
  • The app.metadataCache.resolvedLinks object values for .canvas files are implemented in the exact same way as for markdown files.

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

View available commands

• Advanced Canvas: Open Quicksettings
  • Open the quicksettings menu
• Advanced Canvas: Toggle readonly
  • Toggle the readonly state of the canvas
• 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: Zoom to fit
  • Zoom to fit all nodes
• Advanced Canvas: Navigate up/down/left/right
  • Navigate through the canvas using the aforementioned commands
• 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
• Advanced Canvas: Flip selection horizontally/vertically
  • Flip the selected nodes and the respective edges horizontally or vertically

Node Styles

You can customize the default node styles using the settings. This includes various shapes, border styles, and text alignment options.

Node Shapes

Flowchart Example

Usage

• Use the updated popup menu set a node's shape.

Shapes

Terminal Shape

Process/Center Shape

Decision Shape

Input/Output Shape

On-page Reference Shape

Predefined Process Shape

Document Shape

Database Shape

Border Styles

Set the style of the border to dotted, dashed or invisible.

Border Styles Example

(Note: Text Alignment options (Left, Center, Right) are also available for nodes.)

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 Path Styles Example

Arrow Styles

Set the style of the arrows to triangle outline, halved triangle, thin triangle, diamond, diamond outline, circle, circle outline and blunted.

Arrow Styles Example

Pathfinding Methods

Set the pathfinding method of the edges (arrows) to default, straight, squared or A*.

Edge Pathfinding Methods Example

Custom Styles

Custom style attributes for nodes and edges can easily be added.

1. Create a new CSS snippet in your vault:
   • Navigate to Settings > Appearance > *scroll down* > CSS snippets and click on the folder icon to open the snippets folder.
   • Create a new CSS file (e.g. my-fancy-node-style.css).
2. Add the custom style attribute definition:
   • Open the CSS file and add the following code. The format needs to be YAML (within a CSS comment) and must contain the same keys as in this example. The number of options can be adjusted (minimum of one option is required). The icon key should contain the ID of an icon from lucide.dev.
   • Change @advanced-canvas-node-style to @advanced-canvas-edge-style for edge styles.

   /* @advanced-canvas-node-style
   key: validation-state
   label: Validation State
   options:
     -
       label: Stateless
       value: null
       icon: circle-help
   
     -
       label: Approved
       value: approved
       icon: circle-check
   
     -
       label: Pending
       value: pending
       icon: circle-dot
   
     -
       label: Rejected
       value: rejected
       icon: circle-x
   */

Important

There needs to be one option with the value null.

3. Add the CSS styling:
   • In the same (or another) CSS file, add the styling for your custom attribute.

   /* General structure */
   .canvas-node[data-<YOUR-CUSTOM-STYLE-KEY>="<VALUE>"] {
     /* Your custom styling */
   }

   • Example for validation-state:

   .canvas-node[data-validation-state] .canvas-node-content::after {
     content: "";
     position: absolute;
     top: 10px;
     right: 10px;
     font-size: 1em;
   }
   
   .canvas-node[data-validation-state="approved"] .canvas-node-content::after {
     content: "✔️";
   }
   
   .canvas-node[data-validation-state="pending"] .canvas-node-content::after {
     content: "⏳";
   }
   
   .canvas-node[data-validation-state="rejected"] .canvas-node-content::after {
     content: "❌";
   }

4. Enable the CSS snippet in Obsidian's settings and enjoy your new custom style attribute!
   Example in Popup Menu

   

See an example of a complete custom node style CSS file here.

Variable Breakpoints

Add breakpoints to nodes to change at which zoom factor the node's content gets unrendered.

Important

Due to performance reasons, custom breakpoints get cached and are only re-fetched when the canvas gets reloaded. Changes in the CSS snippet won't be applied immediately (only after reopening the canvas).

Create a new CSS snippet in your vault (and enable it in settings):

/* Any CSS selector can be used (As long as the .canvas-node element has the CSS variable defined) */
.canvas-node[data-shape="pill"] {
    /* The zoom factor at which the node's content gets unrendered (Zoom level can range from 1 to -4) */
    --variable-breakpoint: 0.5;
}

Z-Ordering Control

Change z-ordering of nodes using the context menu.

Z-Ordering Control Example

Custom Colors

Add custom colors to the color picker. You can add them using the following CSS snippet:

body {
    /* Where X is the index of the color in the palette (1-6 are used by Obsidian) */
    --canvas-color-X: 0, 255, 0; /* RGB values */
}

Custom Colors In Palette Example

Presentation Mode

In presentation mode, you can navigate through nodes using arrow keys or PageUp/PageDown keys (compatible with most presentation remotes). Slides/nodes are connected by arrows. For multiple outgoing arrows from one node, number them to define navigation order. While in presentation mode, the canvas is in readonly mode (so Better Readonly features apply). Exit with ESC or the corresponding command. Use Advanced Canvas: Continue presentation to resume from the last slide.

Simple Presentation Canvas File

More Complex Example

Complex Presentation Canvas File

Usage

• Create the first slide:
  • Use the updated popup menu to mark a node as the first slide.
  • OR create a node and mark it via the updated card menu.
• Add more slides:
  • Link slides using arrows.
  • To loop back, number arrows for navigation order.
  • TIP: Use the updated card menu for consistent slide dimensions.
• Control the presentation:
  • Start: Command Palette (Advanced Canvas: Start presentation).
  • Navigate: Arrow keys.
  • Exit: ESC key.

Portals

Embed other canvases inside your current canvas and create edges (arrows) to the embedded canvas.

Usage

• Embed a canvas file, then click the door icon in the popup menu to open it as a portal.

Collapsible Groups

Collapse and expand groups to organize your canvas.

Collapsible Groups Example

Image Export

Export the whole canvas or just a selection as a PNG/SVG image with transparency. Core plugin export options like "Privacy Mode" and "Show Logo" (extended to include Advanced Canvas logo) are also available.

Image Export Example (SVG)

Auto Node Resizing

Resize nodes automatically when their text content changes. Toggle this feature per-node using the updated popup menu.

Auto Node Resizing Example

Focus Mode

Focus on a single node by blurring all other nodes.

Focus Mode Example

Better Readonly

• Disable node popup menus.
• Lock the canvas' position.
• Lock the canvas' zoom.
• Interactivity is retained for zooming to a bounding box (e.g., zoom to selection, zoom to fit all).

Usage

• Use the updated control menu to toggle these features (shown only if the canvas is in readonly mode).

Encapsulate Selection

Move the current selection to a new canvas and create a link to it in the current canvas.

Usage

1. Select the nodes you want to encapsulate.
2. Use the context menu (right-click) to encapsulate the selection.
3. OR use the command palette (Advanced Canvas: Encapsulate selection).

Floating Edges (Automatic Edge Side)

Edges automatically change their connection side to the most suitable one. Drag the edge to the indicated drop zone inside the node to make the edge float.

Floating Edges Example

Flip Edge

Flip the direction of an edge with one click.

Flip Edge Example

Canvas Events

All custom events are prefixed with advanced-canvas: and can be listened to using app.workspace.on (just like default Obsidian events). Check out the list of events here.

Settings

Every feature can be enabled/disabled in the settings. All features were made to be as customizable as possible.

Contributing

All code contributions are welcome! (PRs that only update the documentation won't get merged. Please open an issue instead.) You may want to check out issues with the PRs appreciated label to find issues you can start with. But feel free to work on any issue or non-issue you want to work on!

Star History