Make pattern links in mindmap clickable

[spier]

We have this beautiful mindmap here:
https://patterns.innersourcecommons.org/explore-patterns

It is generated based on the data and code in here:
https://github.com/InnerSourceCommons/InnerSourcePatterns/tree/main/pattern-categorization

The current mindmap is simply an image.
One drawback of that approach is that we could not get the links to the patterns to be clickable.

Now in a new release of gitbook (where we host our patterns website), a mermaid integration became available.

Therefore I am wondering if mermaid+gitbook would allow us to generate a mindmap where we can click through to the actual patterns?

[spier]

GitHub can also render mermaid, so I can show a quick first experiment here directly.

I have re-created only a part of our mindmap using mermaid.
Now I need to figure out if (and how) a node can be made clickable.

Any mermaid pros here that can help with that?

flowchart LR

0(InnerSource Program) --> A(Begin)

A(Begin) --> A1(Program Setup)
A1(Program Setup) --> id1{{Management hesitates to invest in InnerSource}} --> id11>Start as an Experiment]
A1(Program Setup) --> id2>Slow community growth hinders InnerSource]
A1(Program Setup) --> id3>InnerSource principles are not intuitive for everybody]

A(Begin) --> A2(Project Setup)
A2(Project Setup) --> id4{{Hard to assess a project quickly}} --> id41>Standard Base Documentation]
A2(Project Setup) --> id5{{Ad-hoc communication hinders project growth}} --> id51>Communication Tooling]
A2(Project Setup) --> id6{{Intransparent roadmap and direction of the project}} --> id61>Issue Tracker Use Cases]

A(Begin) --> A2B(Project Setup B)
A2B(Project Setup B) -- Hard to assess a project quickly --o id41b>Standard Base Documentation]
A2B(Project Setup B) -- Ad-hoc communication hinders project growth --o id51b>Communication Tooling]
A2B(Project Setup B) -- Intransparent roadmap and direction of the project --o id61b>Issue Tracker Use Cases]

Loading

[spier]

Testing something clickable within the GitHub UI.
Doesn't work it seems.

flowchart LR

0(InnerSource Patterns) --> A("click me")

click A "https://github.com/InnerSourceCommons/InnerSourcePatterns"

Loading

[spier]

mermaid has an experimental chart type of mindmap.
https://mermaid-js.github.io/mermaid/#/mindmap?id=mindmap

Given the maturity maybe not something to use yet?

[spier]

The first diagram in here contains clickable nodes in the graph. So it is possible, just not sure if it is possible in the gitbook integration of mermaid.

[spier]

Here an example of the Mermaid Live Editor, showing how it could work:|
Clickable chart

flowchart LR

0(InnerSource Patterns) --> A("click me")
click A "https://github.com/InnerSourceCommons/InnerSourcePatterns" _blank

The extra parameter _blank gets the link target to open in a new window. ¹

However when trying the same in gitbook, it looks like gitbook is trying to load the link target within the graph area itself. Possibly an iframe?

Footnotes

1. I was experimenting with other parameter values, which is why you see _top in the screenshots. Had the exact same effect though. ↩

[spier]

I have sent a support request to gitbook, as I cannot get this to work.

[privero-meli]

Hi @spier!!

You can try this solution, it's not the best but it works 😁

flowchart LR
  0(Inner Source Patterns) --> A[<a href='https://patterns.innersourcecommons.org/p/trusted-committer'>Trusted Commiters</a>]

flowchart LR
  0(Inner Source Patterns) --> A[<a href='https://patterns.innersourcecommons.org/p/trusted-committer'>Trusted Committer</a>]  

Loading

[spier]

@privero-meli thank you for chiming in here.

Did you try this in gitbook as well? (not in GitHub)
When testing your syntax above in gitbook, it renders the graph correctly, however when clicking on the link it still opens it within the iframe itself.

Graph:

After link click:

[privero-meli]

@privero-meli thank you for chiming in here.

Did you try this in gitbook as well? (not in GitHub) When testing your syntax above in gitbook, it renders the graph correctly, however when clicking on the link it still opens it within the iframe itself.

Graph:

After link click:

Too bad 😞 I only tested it on GitHub, since it also uses an iframe I thought the behavior would be the same.

[NewMexicoKid]

What about markmap <https://markmap.js.org/>? It looks like there might be a possible gitbook plugin <https://www.npmjs.com/package/gitbook-plugin-markmap?activeTab=readme> (but version 0.01, two years old). The generated mindmap looks sharp (collapsible nodes, links, all driven by markdown mark-up).

…

On Sat, Feb 25, 2023 at 10:03 AM Pablo Rivero ***@***.***> wrote: @privero-meli <https://github.com/privero-meli> thank you for chiming in here. Did you try this in gitbook as well? (not in GitHub) When testing your syntax above in gitbook, it renders the graph correctly, however when clicking on the link it still opens it within the iframe itself. Graph: [image: Screenshot 2023-02-25 at 00 04 42] <https://user-images.githubusercontent.com/163029/221317612-a39b9c2a-3279-4f09-9cc0-08440d07d643.png> After link click: [image: Screenshot 2023-02-25 at 00 04 54] <https://user-images.githubusercontent.com/163029/221317624-8f659873-bf3b-459f-be24-53663f6111d7.png> Too bad 😞 I only tested it on GitHub, since it also uses an iframe I thought the behavior would be the same. — Reply to this email directly, view it on GitHub <#479 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARUJ4EDZYDGLAAFRAWMYSLWZIUNBANCNFSM6AAAAAARWI5HWI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.*** com>

-- Tim Yao - ***@***.*** ***@***.***> ***@***.***> aka NewMexicoKid at National Novel Writing Month, http://nanowrimo.org <http://www.nanowrimo.org> co-Municipal Liaison for the Illinois::Naperville region NaperWriMo - http://naperwrimo.org

[spier]

Hehe, good find @NewMexicoKid!
So good in fact that we already found it i.e. the current static mindmap is created using markmap. More details in here. :)

However we cannot embed that as a dynamic mindmap into gitbook, as the SaaS version of gitbook does not allow you to add your own plugins.

I believe that previous versions of gitbook came packaged in a way that you could also self-host it. That seems to be a think of the past, and likely the npm package that you found is from those older days.

[spier]

Doesn't look like we can easily do this right now. Also not a high prio item. Therefore closing this for now.