Mermaid with Obsidian capabilities

Mermaid diagrams are great to look at, but I sometimes feel disconnected while editing them. Could we give them an interactive boost by integrating Obsidian functionality?

With notes selected via search, the click of a button could produce a rendered diagram complete with directly editable links syncing to the graph. To be clear, in this proposal, the initial Mermaid diagram would be built based on the selected note names and their links, essentially being a curated slice of the vault’s graph.

Maybe, pick-whipping from node to node would define Mermaid connections, with these added links and note/tag changes propagated throughout Obsidian. Might this all even be potentially accessible directly through hovering a note’s links and the graph’s nodes?



See this related workaround:

Make sure to also see the lower post where a bug is corrected. This is awesome stuff!

Hmm… Come to think of it. I the link above, I’m only targeting notes and I’m only using the default square element. It should be possible to alter the mermaid graph so as tags could have a different box around them. And it’s also possible to introduce subgraphs if one has common folders. I think it’s doable, at least. Not sure how much coding it would require…

On a related side note, Ji11ard has made a more generic approach to a similar theme here: GitHub - Ji11ard/Dataview-to-Mermaid-Flowchart: This dataviewjs script dynamically renders DQL queries into a Mermaid flow diagram based on links and formatting instructions contained in the file's YAML.

In that setup they’ve made a thingy where you can define various queries to be shown as nodes in a mermaid chart, and then other queries to define the links between these nodes.

The examples look slightly overwhelming, and I’m not quite sure how to reuse it, but I thought I should mention it, as I came across it when researching for the link above. I chose a different path, but their path is also an interesting path.

1 Like