Mermaid external links don't work on graph

Steps to reproduce

I tried to use the code from the mermaid document.

graph LR;
    A-->B;
    click B "http://www.github.com" "This is a tooltip for a link"

Expected result

→ I hope it can open the link in the browser. But when I click the button, there is nothing changed.

How can I modify the code so that it can successfully link to the website. Thanks.

Environment

  • Operating system: win 10
  • Obsidian version:0.9.22

This is due to an upstream change

Sorry, I am not quite understand what upstream changes mean.

Could you please tell me how can I modify the code so that it can successfully link to the website. Thanks.

It’s a bug, they don’t work.

Okay, I see.

So I will wait the obsidian debug. Thank you.

I have some new info that might help with this bug with a detailed write-up and reproduction in this Obsidian Publish page as the bug affects Obsidian and Obsidian Publish.

Summary

click links in mermaid graph diagrams do not work in the app or Publish, but click links in flowchart diagrams work in both. And click links in mermaid graph diagrams do work in general outside the Obsidian context (e.g. mermaid live editor).

Findings

Here is a link to the findings.

In short

  • Obsidian (in app preview and Publish) both render the same DOM node tree as the mermaid live editor, which does work for graph diagrams
  • It is possible to force the links to work in Publish and in-app preview by making a DOM update

Will check this again when 0.14.3 is released Mermaid use of html tags in obsidian is not working - #2 by WhiteNoise

I have a thought on this:

  • Obsidian recognises a new file type .mmd
  • Obsidian “passes” the file onto mermaid and basically “says”
    • This is for you
    • Please take it and produce an SVG or PNG for me (dependent on a preference setting)
  • In a page in which you wish to include the output, obsidian just has an easy way to find results from mermaid for you to embed the image

This is just a very rough outline of my thought :slight_smile:

I’m extremely appreciative that the devs are looking at this issue :pray:

So licat is amazing. Quoting him from over in the #vip-lounge on discord, last night


1 Like

I’m uncertain if I fully understand it, but that is wonderful :slight_smile:

And I thought I had a novel idea :see_no_evil:

It’s an interesting idea, but without licat’s new fix, I think we’d have the same issue even if the mermaid was defined externally. Obsidian basically does what you describe, hands the embedded diagram definition to mermaid and asks for an SVG. I prefer the code block embedding that exists for my own use cases. 0.14.3 is turning out to be a nice quality-of-life release.

1 Like

Absolutely - I’m a big fan of plantUML for some things but revert to mermaid for simple flows :slight_smile:

1 Like

This has already been fixed in Obsidian Publish :tada:

1 Like

I just saw and it least my diags are now readable :slight_smile: Still some formatting inconsistencies, but I may post about those another time

Big thanks to @Licat !

I was not expecting this release until the end of the week.

Kudos to a fantastic team

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.