Add click interactions to MindMap

[quan787]

Proposal

There are features for interactions in some other types of diagrams, e.g. Flowchart, Class Diagram. This helps a lot for linking pages together as a intuitive and organized way.

However, MindMap does not have that yet. This type of diagram is particularly suitable for doc and wiki websites, where it really need to add url links to nodes.

I am using wiki.js to build a wiki website, and really want this kind of diagrams to be shown at the front page.

Right now, the link syntax similar to other types are ignored:

Example

Syntaxes like this are needed:

mindmap
root((Variable stars))
 Pulsation 
 link Pulsation "github.com" "something"
 Cataclysmic

Screenshots

No response

[ishaan812]

Can I be assigned this issue?

[ZainGulbaz]

@jgreywolf Can you please assign this to me?

[jgreywolf]

A month later - sorry for the delay. Are you still interested in working on this?

[spalukuri]

hi, I am really looking forward to this any update on this. Thanks for the great work!

[garwalsh]

Also hoping for this!

[baba43]

Please make this happen! 👍

[ShawnBrew]

This would be great.

[marabesi]

I was looking for the same thing, and this answer from stackoverflow did the trick.

[threedaysmore]

I was looking for the same thing, and this answer from stackoverflow did the trick.

Any chance you can provide how this answer achieved this for you for mindmaps? I've tried adding securityLevel: loose and adding in clicks or anchor tags in a node with no success.

[threedaysmore]

So I had to put something together that would get this off the ground for a small personal project. I made a small react app that takes in a mermaid mindmap doc with comments for each node's link and adds click listeners. It's by no means a particularly masterful solution since I am not a masterful JS dev 😅

A note for devs: this is just manipulating the DOM after render as best as the Mermaid package will allow me. This could be done smoother/better directly in the mermaid package/code I'm sure.

But hopefully this is a stepping stone for someone else who comes to this thread later.

Here is the example site deployed to Netlify
repo link

And here is the mermaid doc used to generate this mindmap

mindmap
  root((TV Shows))
    Frasier %% https://en.wikipedia.org/wiki/Frasier
      Frasier %%https://en.wikipedia.org/wiki/Frasier_Crane
      Daphne %%https://en.wikipedia.org/wiki/Daphne_Moon
      Niles  %%https://en.wikipedia.org/wiki/Niles_Crane
      Martin %%https://en.wikipedia.org/wiki/Martin_Crane
    Avatar the Last Airbender %%https://en.wikipedia.org/wiki/Avatar:_The_Last_Airbender
      Aang %%https://en.wikipedia.org/wiki/Aang
      Katara %%https://en.wikipedia.org/wiki/Katara_(Avatar:_The_Last_Airbender)
      Sokka %%https://en.wikipedia.org/wiki/Sokka
      Zuko %%https://en.wikipedia.org/wiki/Zuko
      Iroh %%https://en.wikipedia.org/wiki/Iroh
    Game of Thrones %%https://en.wikipedia.org/wiki/Game_of_Thrones
      Jon Snow %%https://en.wikipedia.org/wiki/Jon_Snow_(character)
      Ned Stark %%https://en.wikipedia.org/wiki/Ned_Stark
      Tyrion Lanister %%https://en.wikipedia.org/wiki/Tyrion_Lannister
    Scrubs %%https://en.wikipedia.org/wiki/Scrubs_(TV_series)
      Turk %%https://en.wikipedia.org/wiki/Christopher_Turk
      JD %%https://en.wikipedia.org/wiki/J.D._(Scrubs)
      Elliot %%https://en.wikipedia.org/wiki/Elliot_Reid
      Dr. Cox %%https://en.wikipedia.org/wiki/Perry_Cox

[baba43]

I was looking for the same thing, and this answer from stackoverflow did the trick.

Any chance you can provide how this answer achieved this for you for mindmaps? I've tried adding securityLevel: loose and adding in clicks or anchor tags in a node with no success.

Same here. Did you find a solution? Maybe this is just not working for the Mindmap in general?

[threedaysmore]

Same here. Did you find a solution? Maybe this is just not working for the Mindmap in general?

Best I can tell clickable links are not natively supported for Mindmaps. In this previous reply of mine I've got some code out there to show how to kind of shoehorn it in there for now until mermaid(hopefully) gets some support out there for this.

[sauron918]

Really hope for support. Links are quite often used in mind maps.

[marabesi]

update on my answer:

it worked just for flow diagrams but after trying to do that with mermaid js for mindmaps it didn't work

ping @threedaysmore

[AndrewBarfield]

Not working in v10.9.1. We really need this. How can I help?

[vMamr]

I've come up with the perfect solution.

You need to add this JS code after loading Mermaid:

        window.addEventListener('load', () => {
            // Ищем все элементы с классом, начинающимся на 'link:'
            document.querySelectorAll('*[class*="link:"]').forEach(node => {
                node.classList.forEach(className => {
                    if (className.startsWith('link:')) {
                        const url = className.split(':')[1]; // Извлекаем URL из класса

                        // Добавляем обработчик события для клика
                        node.addEventListener('click', () => {
                            window.open(`https://${url}`, '_blank'); // Открываем ссылку в новой вкладке
                        });
                    }
                });
            });
        });

Use this structure:

        mindmap
            root((Главная тема))
                Важная тема
                :::link:example1.com
                Вторая важная тема
                    :::link:example2.com
									важная тема 2.1
											:::link:example2.1.com
                Третья важная тема
                    :::link:example3.com

If you want a click icon instead of an arrow, then add this CSS code:

[class*="link:"] {
	cursor: pointer; /* Курсор-рука при наведении */
}