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!
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
Set the style of the border to dotted, dashed or invisible.
Border Styles Example
Edge Styles
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
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 (27)
advanced-canvas:canvas-changed
Fired when a new canvas gets loaded
Payload: Canvas
advanced-canvas:viewport-changed:before and advanced-canvas:viewport-changed:after
I've only tested this on mobile, so that might be the issue. Whenever undo is used it sets all nodes to the default node shape. Redo sets it back to the custom shape again. This is a fairly big issue if you use the undo function a lot
Recently I've been trying to map out my social contacts and discovered that Obsidian only has 4 anchor points for each node. Turns out, this scenario is quite complex as most people have more than 4 connections. I would love to see more anchor points for all nodes.
Since I write on Canvas and link my thoughts right-there, I would prefer to create a Note with a Double-Click instead of a Card/Node. It'd be handy for heavy writers like me.
Regarding the application of the "mind map" mode in canvas, there are already projects that have made relevant features. Obsidian-Canvas-MindMap
Press Enter to create brother card;
Press Tab to create child card;
Delete card to rearrange layout automatically;
Press Alt + ←/→/↓/↑ to navigate between cards;
Press Cmd / Ctrl + ←/→/↓/↑ to create floating cards;
But it’s not enough. I think this project can further enhance the idea of displaying the canvas mind map mode by emulating the collapsing/expanding features implemented on v2.6.0-beta.1.
Feature Description
Collapse of child nodes by clicking the expand (⊕) or collapse (⊖) symbols next to the father node.
Display the number of collapsed child nodes after collapse
When applying Shapes to a card, text inside becomes very blurry compared to a regular card. Tested on recent Obsidian version, without any additional modules.
I don't know if this is a bug, but handling the positional relationship between collapsed groups is really a problem.
Please see the GIF below for specific questions.
Currently, when a focused file node in canvas is clicked, it only switches into edit mode with the cursor setting to first character of file. Therefore, when editing a file in canvas, user needs to click once to foucs on the node , then click a second time to enter edit mode, and a third time is required to set the cursor position. Reducing the number of operations to one would greatly streamline the process for users who edit multiple files on the canvas heavily.
Scrintal , another Canvas based PKM tool uses Visual-Thinking ability of the Canvas to let their users form multiple-complex connections intuitively. In the background these connections are automatically translated as Backlinks between notes, allowing it to be reused in other places. It's effortless, and a pure bliss to use compared to Obsidian.
In contrast, an Obsidian user has to type in the double bracket to toggle backlinking, type in the search bar, skim through a long list of search results to find the one they are looking for. For making multiple links they repeat the process all over again. Extremely taxing effort and time.
Backlinking and GraphView is what made Obsidian gain popularity and find it's userbase since they were the first to implement this feature, and they even inspired many other PKM tools to add GraphView. And yet, another Core feature like Canvas is not integrated with them which is very annoying. Right now the only way to utilize both is by manually adding backlinks to recreate the Canvas Connections.
I cannot emphasize the world of difference it makes between Scrintal and Obsidian in this regard. Obsidian NEEDS the backlinking feature of Scrintal's Canvas. Once it's in place it will be even more powerful than Scrintal, since these visual-connections are now accessible globally since translated-backlinks are now accessible by Graph-View and many existing plugins like Canvas-Link-Exploder would unlock many powerful workflows in Obsidian.
This is one of the main selling-point of Scrintal as their users love the intuitive visual thinking and ease-of-use making relevant links. Easier ways to form connections is a long awaited feature request in the Obsidian forum(Scrintal, AI-Based linking similar to Napkin)
I cannot emphasize enough how useful this feature would be. So I implore you to add this feature to your plugin. I have been on the hunt for this feature for a while now, I scoured google to no avail. I even thought about making it myself even though I'm no coder and I don't even know where to begin. That's how bad I want this feature.
I can tell from your plugin, you are a very capable developer. So I kindly request you to make this. PLEASE!! :)
Since Notes are grouped, following a color theme makes the Groups look distinct from each-other, while the contents of a group are of the same color creating a sense of Harmony/Homogeneity within the Group.
In my other feature request, I had recommended avoiding the use of distinctive visual elements since that would create a hierarchy in the Canvas which may not be apt. But using colors in the Group is very appropriate due to the fore mentioned reasons.
The color of the Note, the color of the Group's frame, and the color of the connecting arrows.
These can be coded to pick a Triadic color from the color wheel.
Earlier when I made this request, you said it may not deserve any immediate attention for now. I guessed the effort:benefit isn't significant.
For now I request you to make shortcuts similar to Ctrl+Alt+Click which opens the file in split-view(right). while the Canvas stays open in the left-pane.
The problem is, it creates a new-split-view everytime it's used. Since this is created for users who work on multiple files at the same time. But I am hoping to view/edit one file at a time, while my primary need is a larger view of the notes in my Canvas.
Modifying this shortcut to open-files-in-new-tabs within existing-split-pane(without creating a new split-pane) would be enough to fit my needs, for now, maybe forever.
It'd be nice if this feature could be set to as default when i click on the file name(outside the note).
In the current project, Canvas serves as a core component offering robust graphic rendering and organization capabilities. However, when dealing with complex visual scenarios or large-scale projects, the lack of expand/collapse functionality for Group elements can lead to user frustration and reduced efficiency in viewing or editing multi-level content.
Feature Description
Current State
I have investigated multiple similar projects to find a solution, but unfortunately, the current products on the plugin market and GitHub do not provide an intuitive and efficient Group folding/expanding implementation.
Your project is excellent at enhancing the canvas experience, so I'd love to get some help here.
Proposed Improvement
Add controls to group style UI.
When the control is clicked, the group shrinks to show only the title. Click again and the group will expand to show all contents.
A good concrete example is the way group elements are handled in Marginnote3, where this functionality is achieved by clicking the expand (⊕) or collapse (⊖) symbols next to the group node.
Possible Alternatives
In the mini-toolbar above a group, put a collapse/uncollapse control.
Possible impact
When implementing this feature, you need to consider its impact on UI design, performance optimization, and DOM tree operation and rendering efficiency, so this is just a feature suggestion, not a "do it now" demand.
Additional Information
Here is a project that has been put on the shelves for reference：Obsidian Collapse Node
The project in the above link extends the concept of folding and unfolding to the canvas node, but the overall implementation effect is not good. I think it's enough to implement it only at the group level.
Obsidian Settings > Options > Files & Links > Folder to create new notes in
Obsidian Settings > Core plugins > Canvas > Folder to create new canvas files in
I have set them to "in the folder specified folder below" and pointed them to a default location.
While creating a note from a canvas, or new canvas via 'encapsulate' option, or by adding .canvas at the end of file name they are created in the Home directory. it'd be nice to have them follow the fore mentioned locations.
Also, it'd be handy to have a "create a new canvas button". which i have mentioned in #49
The ability to Disable the "Create groups independently of the nodes" from the Canvas Card Menu would be helpful to clear up some space, As I don't use it at all.
The declutter would be beneficial for other plugins such as "Canvas Daily Note Plugin"
Along with this, the ability to hide "Drag to Add note from vault", the default Canvas feature would be nice too since I don't use it either. This request would work well with my other feature request "Double-click to add Note instead of Card"
The key refused to move the indentation of the bullet-points. Rather, it takes the cursor to options such as popups above the card.
Lack of such subtle features is so frustrating for someone like me who uses the hierarchy and folding indentations a lot.
Having the text-editor fill the screen would be nice. It's not necessary for while doing quick edits. But for continuous writing, something like + should Zoom into the Canvas and fitting the note to 90% of the screen.
When I hit or click outside the note should zoom back to the original Zoom level I started with.
I'm particular about 90% for some spatial awareness, the edge and arrows are visible, and i can click outside to exit the enlarged view, which is quick and intuitive.
i use this Collapse-Node plugin to fold-unfold cards in my canvas.
When a Portal is double clicked upon, when it's card is folded, it wont open.
Collapse-Node is a very handy plugin, and I believe it should be integrated into Advanced Canvas. the plugin is not in active development, and has issues like not recognizing overlapping cards, etc. which leads to a clutter. and the irony is, this plugin's sole job is to help with managing clutter. it'd be a great addition to the suite of tools in Advanced Canvas. Please consider it.
When choosing a color for a Node there are currently only six options. If i want to use a custom color I have to pick it every time. I would like to be able to add custom colors to choose from
This is a difficult balance. The original purpose of the group collapsing feature request was to accommodate more cards so that more information could fit into the same canvas. But now, in order to prevent cards that do not belong to the collapsed group from accidentally entering its scope and becoming its child nodes, the cards must be placed further away, resulting in a decrease in the space utilization of the entire canvas.
Suggestions for Improvement
Intelligent Layout Algorithm:
I think should design a layout algorithm that can automatically adjust the existing child node layout within the group and the affected card layout outside the group when the group is expanded, so that they will not overlap or be misclassified into the group, and maintain the relative position relationship between adjacent cards.
4. Developer Considerations:
I understand that implementing such features may require significant design and development effort. Therefore, I would like developers to consider the feasibility of these suggestions and evaluate whether there are alternative solutions that better align with the application architecture and roadmap.
In conclusion, finding the right balance between effective space utilization and maintaining clean, organized content relationships is crucial. I highly value other diverse opinions and look forward to any feedback or updates on this issue.
when I utilize the "Drag to Slide" button, my nodes vanish and no slide gets created. Is this supposed to be operational or is it still considered "work in progress"?
I had issues navigating around the Canvas with my keyboard. Looks like it's a long-awaited feature request. But the Author said he's not going to publish it.
The bare minimum I need is to Jump between note selections (Ctrl+Shift+Arrows)
This comment has a list of interesting suggestions.
By experimenting. I accidentally found out I could change the file extension at the end of a new note to .canvas and create a new canvas in the current one via Portal.
But it has some bugs, where it creates an empty card without a "card label" above it. nothing happens upon double clicking it. once you delete this odd-card it unveils the Portal to the newly created canvas.
This bug occurs sometimes, and sometimes not.
To avoid this, I create a dummy file and use the Encapsulate feature to create a new Canvas. I would really appreciate a dedicated button to create a new Canvas which is intuitive and helpful. especially with the workflow mentioned in #16
The Slide ratio can be easily changed upon dragging the corners. I would like to change the Scale, while retaining the ratio. Setting a fixed ratio such as 16:9 should be followed.
My workflow is having a completed Canvas and sorting out the Slides at the end. But this feature forces me to rearrange the Canvas which I don't like. Sometimes the notes get stuck to the Frame and trying to move the Frame drags my notes around too.
To fix this, the ability to select multiple notes, and then creating a Slide-Group around it in the set ratio(16:9) would be nice.
Also, I don't really use the Slide icon in the Canvas Card menu. Even if I did use it, its a rarely used feature by nature. I don't want to keep it in the Canvas Card menu. The toggle to disable/hide that would help me free up the space and make my screen look mimimal/distraction free.
When a group element is collapsed, its original size range is hidden, causing other elements to fall into it when moved. I think it's necessary to create a tip to avoid this happening.
Suggestions Improvement
Create cues using grid guides
When other elements mistakenly fall into the size range of the collapsed group, the shadow of the range is displayed to serve as a reminder.
The no-follow condition is triggered when the edges of a nested collapsed group extend beyond the edges of the parent collapsed group.
Screen Recording
bandicam.2024-03-13.01-17-50-589.mp4
My Opinion
I'm not sure if this is a bug, but from simple logic, after a collapsed group is fixed to the range of another group, it should become its child node and move accordingly.
Hi Mike, I love this plugin and it already gives me a lot to work with. I'm currently trying to plot the class structure for a project in Obsidian and I have the feeling canvas would be great for it. However, there is only one arrow shape as far as I can see.
Do you think it is possible to add more arrow shapes like the ones used in UML diagrams?
I know there is a UML plugin for Obsidian but it doesn't integrate with Obsidian as neatly as canvas does. With more arrow shapes canvas would be the ideal candidate to become my graph of choice for it.
Right now the users are expected to click on the exact spot to make connection. in the example use-case mentioned here, Linking is a primary task frequently performed.
Having the ability to Hold a button while clicking an item, which acts as a shortcut to spawn Arrow will be helpful.
Maybe having a mode where only links are formed. This could be added to Better-Readonly feature set, where users are expected to read and form connections.
Anyone know how to get around?
I've tried to reinstall both Obsidian as well as plugins etc when I deactivate Advanced Canvas it works but as soon as I activate it again I cant make a new Canvas only work in those already created?
Would really love the ability to set custom edge styles, but for cards!
PS: congratz on your awesome work! I've tried donating it but got a message saying my country isn't supported :/. Do let me know if you have an alternative method
In the above picture, the target position for A* could be offset slightly to the left, leading to an orthogonal edge into the target. Similarly, the start could be offset if that end has an arrowhead.
Rotate the Arrowhead
Pretty self-explanatory.
Modify the heuristic
Alternatively, the heuristic could be modified to include a cost penalty based on the distance to a card.
This could prevent the edge from "sticking" too close to a card if possible, like in this example:
Hi Mike, you seem to really wanna make the Canvas a really powerful tool, so I am hoping you might be interested in adding this functionality.
I ran into that problem that I am overwhelmed with all the text of the notes I am writing and even if I use a card, I would prefer to see eg a picture or another text instead.
With collapsed notes and css-classes/meta data there is the possibility to define another text or an image with embedd sytax similar to the project plugin, I think. Ofc collapsed notes and not just collapsed notes would be a smaller useful addition that someone else has solved in another plugin already.
This is an alternate solution to the problem cited in #26
Obsidian already offers a Hover-to-Preview feature, by Holding Ctrl while hovering over a File-name/Backlink.
But it doesn't work in Canvas. Enabling this feature inside Canvas solves half the problem of being able to Read.
- For writing, maybe the Hover-View is modified to edit the document. Or the user resorts to other ways such as opening it in Split-View, etc.
This Plugin should be added to your suite of enhancements. This plugin works. But it's not updated real-time. The user has to manually trigger it to rearrange the connections. I hope you'd be able to fix it
Some users might need to retain the side the Connection/Arrow was made in certain use-cases. But most of the time, the Arrows dynamically taking the shortest path as someone drags a note is an essential feature in any Canvas based app.
The following is how I originally imagined #26, which is slightly better than using split-view imo.
When someone who writes a lot from Canvas, or reading a very long Note, The small card view may not be comfortable.
The ability to Zoom into the Canvas, fitting the note to ~80% of the screen.
This is executed upon Triple-Clicking a Note, making a handy and intuitive key to access this feature.
Upon pressing the view zooms-out to initial value.
Making it easier to form Spatial awareness in the Canvas would add to the user experience.
It is important to have perceivable yet quick animation while zooming in and out.
I mentioned ~80% of the screen is utilized to display the note, and not 100% because, the background - connections - files around the Note should be visible to create a sense of being in the Canvas and the Note's relative position within it.
Another way of achieving this.
While zooming into the note is one way of achieving it, a lot of space in the Screen is wasted since most Notes are Square and the Screens are 16:9.
A Editor Overlay animated-launched from the note upon triple-clicking it.
Clicking outside the Editor Overlay should close it. OR closes it
This might give the user the benefit of a fully utilizing the screen, and offering a Focus reading in-contrast to the spatial awareness in the earlier method.
I install v2.1.0 use BRAT plugin , there is a problem that cannot see options, when I create a new canvas file, then I have to close this file and reopen it , it will works.
Search-Results and GraphView already have powerful search queries integrated to sort through the files by specifying/excluding tags, path, etc
Ability to import them into a Canvas gives the ability to work with those files, that's where the true value of GraphView lies.
Whereas importing all the Search-results into a Canvas primarily helps us go through them to find-out what you are looking for.
2.2.1 In the Native-Search, Highlights the matching search-input. Similarly they should remain highlighted in the imported cards.
2.2.2 In the Native-Search, if a single file has more than one Match, the file is displayed in small chunks. It'd be nice if the Advanced-Canvas plugin could replicate this feature while importing.
2.3 Since users perform multiple Searches to find what they are looking for, every Search-Import must be put inside a Group titled {{search-parameter}}. That way, when Multiple-Search results can be imported into a Single-Canvas.
2.3.1 Some can use it as a way to bring together different data and try to sit through them and form connections. It can be seen as a way of gaining insights from existing knowledge. OR in a similar process new information(Eg. imports) can be integrated with existing knowledge base. (assume #16 is working)
2.4 Within the Search-Groups, Sub-Groups based on Path, Tags, etc can be created. (these Groups are Unique to every search, some might return Notes that hold a lot of Tags, where a Tag-based Sub-Group might be apt. Whereas in some cases, file-path might be apt.
By doing further research, we can find the following
2.4.1. User-Research to Rank the list of metadata-properties. When we know the most Useful/Preferred properties, and we compare that with available data, we can make meaningful/useful Sub-Groups.
For example, lets assume Tags>File_path in User-Preference. And the Search-Results contain a lot of Tags. So Sub-Groups are organized based on Tags.
If there are "no Tags" in the resulting files(or a very few tags to have a meaningful impact), File_path is used to make the Sub-Group although the Ranking we made earlier states the opposite.
2.4.1.2. If a specific Search-Operator is used by the user, it should be given priority in making Sub-Groups.
2.4.2 In the previous example, the Tag based Sub-Groups might suggest Overlapping-Groups. Where two Groups are made, for Tag_A and Tag_B. Among the files in these groups, there could be a Third-Tag_C which is large and significant enough to form a Sub-Group of it's own, leading to an Intersection of two Groups A & B.
2.4.2.2 I am not sure whether or not an intersection/overlaps are advisable in Obsidian Canvas. Maybe Sub-Groups are not the best way to visually represent Tabs. Which demands exploring different types of representations, and finding which of those work well with different types metadata.
2.4.2.3 A large/complicated Search-Result could make it difficult to make accurate representations without the Notes overlapping or looking clumsy in a limited space. Thus limitations should be made. Such as maximum/optimal number of Nested-Groups, etc.
Once I got to writing this post, I realized this is not relevant as a part of Advanced-Canvas. While Request 1(Graph import) could be added since it looks simple. Request 2 is complex, and should be made into its own-plugin. I'd like to acknowledge it before posting it. if made, it'd prove useful, offering a better experience than the using the default search, where results are displayed in a sidebar(small font, hard to read) with minimal information, no grouping, etc.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent