Obsidian Links in Mermaid

[shaunp]

I managed to get Obsidian links to work in Mermaid which is pretty finicky about case etc.

Note: It turns out you can currently only link to a note which is in a folder ; not a note in the vault root directory. You don’t have to specify the folder just prefix the note name with a slash. Strangely if a note name such as “/test” does not exist you can create the note from within Mermaid and the diagram link will work until you restart Obsidian at which point it will not find the note in the root folder . You can probably get around linking to root notes by setting up a folder containing Mermaid linked notes which embed the root notes you need access to.

Here is some code which works in the Obsidian help vault (remember to embed as inline code with backticks and Mermaid directly after the first 3 ticks):

graph LR;

%% Class Definitions
%% =================

classDef FixFont font-size:11px;

%% Nodes
%% =====

QuickStart(Quick Start):::FixFont -->
    CmdPalette(Command<BR>Palette):::FixFont;
QuickStart --> 
    CreateNotes("Create notes"):::FixFont;
QuickStart --> 
    InternalLinks("Internal Links"):::FixFont;

click CreateNotes "/Create notes";
click CmdPalette "/Command palette";
click InternalLinks "/Internal link";

%% Internal links
%% ==============

class CmdPalette internal-link;
class CreateNotes internal-link;
class InternalLinks internal-link;

%% Node styles
%% ===========

style CmdPalette fill:#383;  
style QuickStart fill:#A00;
style CreateNotes fill:#03C;
style InternalLinks fill:#C097;!

[randulfr]

This is sweet, would love to see the linked nodes work consistently and flexibly. Worth filing a bug report for this, referencing this post for detailed example.

[shaunp]

Thanks. Now we are out of the Insider build I will file a bug report.

[verma]

@shaunp

Thanks for sharing the code, it it looks very daunting

I am not an expert here, but do you mind sharing the code without all the color and the styling ?

I hope I will be able to make some sense of the mermaid diagram then.

Thanks

[icouto]

This would be the mermaid code with all the styling definitions taken out:

graph LR;

QuickStart(Quick Start) --> CmdPalette(Command<BR>Palette);
QuickStart --> CreateNotes("Create notes");
QuickStart --> InternalLinks("Internal Links");

click CreateNotes "/Create notes";
click CmdPalette "/Command palette";
click InternalLinks "/Internal link";

[Craig]

FYI, in 0.9.2 the click format above didn’t work for me, but full obsidian:// style links do:

graph LR;
bash --> onedrive --> systemctl;

click bash "obsidian://vault/Reference/bash";
click onedrive "obsidian://vault/Reference/onedrive";
click systemctl "obsidian://vault/Reference/systemctl";

[santi]

Do you know if this is still working? @Craig I’m in 0.9.6 and I couldn’t get it to work. I’m on Linux as well, not sure if that might be the reason

[Craig]

Hi @santi! Yes, I can confirm this still works for me in 0.9.6, in both Linux (Ubuntu 20.04) and Windows 10.

Do “obsidian://” links work for you in general? If not, have you set up your Linux desktop file as described in the Help vault “Using Obsidian URI”? You need to do that if you want to use Obsidian URIs in Linux. Here’s what my desktop file looks like:

[Desktop Entry]
Name=Obsidian
Exec=/home/craig/Programs/obsidian/Obsidian-0.8.15.AppImage %u
Terminal=false
Type=Application
Icon=/home/craig/Programs/obsidian/obsidian.png
StartupWMClass=obsidian
X-AppImage-Version=0.8.15
Comment=Obsidian
Categories=Office;
MimeType=text/html;x-scheme-handler/obsidian;

(Note the %u in the Exec line – that’s the secret sauce.)

[santi]

Yep that must be it, I havn’t set up URI to work with .Appimage
Thank you, it looks a bit cumbersome, I might get back to you I hit a roadbloack since we have a similar set up.

Thanks for the help!

[WhiteNoise]

Starting from 0.9.21, the format for using internal links in mermaid diagrams will be this:

graph LR
A[Note Name] --> B 

class A internal-link;

[cristian]

@WhiteNoise

Starting from 0.9.21, the format for using internal links in mermaid diagrams will be this:

I’ve tested this and works like charm. This deverves to go into the help

[cristian]

Can you open an external URL?

[WhiteNoise]

I think there is a bug currently in mermaid

[misterchad]

i second this question. trying to figure out how to turn an image into an external link in obsidian. can’t get it to work natively. can’t get it to work with html because electron doesn’t allow. now wondering if there is a hack using mermaid.