Mind maps with links

[Adam_Banasiak]

Hey all,

I’m pretty new to Hugo. I’m working on a page and I would like to create a menu/table of contents, in the form of a graph, where each node will be a link to the subpage.
I thought that Kroki would help me with that, but it generates a static image and I can’t add any link to it. Perfectly I would like to have something similar to this mind map, but links to subpages in all nodes.
Does anyone know how to achieve anything like that?

Greetings!

[McShelby]

You might find some inspiration in this theme: https://amethyst.bencuan.me/

[jmooring]

The example you link to uses this code block render hook to call Kroki’s public API. Notice that it renders an image element, something like:

<img alt="diagram" class="diagram diagram-kroki diagram-kroki-plantuml" id="h-rh-cb-kroki-3" src="/_1241048131771509262.svg">

When rendered this way, the SVG is not interactive.

Modify the hook to render the content returned by Kroki’s public API, e.g.,

{{ .Content | safeHTML }}

Then you can include links per https://plantuml.com/link. For example:

```kroki {type=plantuml}
@startmindmap
skinparam monochrome true
+ OS
++ [[https://ubuntu.com/{Visit the Ubuntu site!} Ubuntu]]
+++ [[https://linuxmint.com/ Linux Mint]]
+++ [[https://kubuntu.org/ Kubuntu]]
+++ [[https://lubuntu.me/ Lubuntu]]
+++ [[https://neon.kde.org/ KDE Neon]]
++ LMDE
++ SolydXK
++ SteamOS
++ Raspbian
-- Windows 95
-- Windows 98
-- Windows NT
--- Windows 8
--- Windows 10
@endmindmap
```

Note that the Ubuntu link has a tooltip (mouseover) too.

Looks like:

I’m pretty sure there’s a plantuml issue, somewhere, related the dashed (instead of solid) text decoration on the link. To remove the text decoration:

```kroki {type=plantuml}
@startmindmap
skinparam HyperlinkUnderline false
skinparam monochrome true
+ OS
++ [[https://ubuntu.com/{Visit the Ubuntu site!} Ubuntu]]
+++ [[https://linuxmint.com/ Linux Mint]]
+++ [[https://kubuntu.org/ Kubuntu]]
+++ [[https://lubuntu.me/ Lubuntu]]
+++ [[https://neon.kde.org/ KDE Neon]]
++ LMDE
++ SolydXK
++ SteamOS
++ Raspbian
-- Windows 95
-- Windows 98
-- Windows NT
--- Windows 8
--- Windows 10
@endmindmap
```