Hello! I have been using obsidian for a while now but just recently started diving into the more advanced functionality. I’ve been attempting to use obsidian to build out processes to help me keep track of where I am at in projects, etc. I have mermaid flowchart for the process in question, and what I would like to do is be able to embed checkboxes in the mermaid nodes so I can track the progress as I go.
Since the mermaid parsers are looking for [] to format nodes it didn’t seem like I’d be able to use the standard md checkbox syntax; so I started reading the mermaid documentation (mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.) to see if I could find a workaround. I noticed that in base mermaid you can call js callback functions on a node click, and thought I might be able to use that to call a function to add in a checkmark emoji into the mermaid definition. But I have not been able to define a custom function within the mermaid codeblock.
Does anyone know the proper way to define callback functions so that the mermaid interpreter can call them?
Thanks!
As previously mentioned I wanted to create a “Skill Tree” style tracker in Mermaid, but there is currently not a mermaid node that will allow for working checkbox to be inserted. Looking at the documentation for mermaid the support for executing a callback function on a node click.
While I have not been able to identify how to create custom callback functions that mermaid has access to, I was able to find somewhat of a work around for my specific use case. Since all I wanted was a visual cue indicating if a given node has been completed, I was able to use the search and replace function within the “Advance URI” plugin to swap a ‘☐’ emoticon with a ‘🗹’ that was nested within the name of the given node.
Since Advanced URI lets you execute the find and replace from a URL/URI format you can just have a given Node’s click events link to the URL/URI without having to use the call the a predefined callback function.
Advanced URI:
obsidian://advanced-uri?
vault=<vault>
&searchregex=<node_id>(\[\"☐)
&replace=<nodeid>["🗹
&filepath=Mermaid Skill Tree Test
Encoded Advanced URI:
obsidian://advanced-uri?vault=<vault>&searchregex=<node_id>(%5C%5B%5C%22%E2%98%90)&replace=<node_id>%5B%22%F0%9F%97%B9&filepath=Mermaid%20Skill%20Tree%20Test
Unfortunately this workaround leaves a lot to be desired as this makes it so that any of the nodes are clickable, which is not good for a “Skilltree”. This also makes it impossible to revert the change from a ‘🗹’ back to a ‘☐’ as the search and replace function will only execute one replacement for a given url.
If anyone does had any ideas for where/how I’d be make a function that could be used by mermaid please let me know as I’d like to make improvements to this “Skilltree” mermaid flowchart. In the meantime I have attached this test file if anyone wants to play around with it and incorporate it into their vault.
Mermaid Skill Tree Test.md (661 Bytes)
1 Like