Add configuration options to enable links and subscripts in diagrams

[icamps]

Hello,

I had read that it is possible to use sub/superscript and links in mermaid, but to do that, the following has to be added to mermaid config:

{
   "theme": "default",
    "htmlLabels": true,
    "securityLevel": "loose",
}

but I really have no idea about in which file I should add this in order to the tweak work.

Thanks in advance,

Camps

[DanielFlaum]

Let me take a look around, I should be able to find that for you.

[DanielFlaum]

@icamps Can you link to me where you got that code snippet?

[DanielFlaum]

Note for self: It looks like those options need to be passed mermaid.initialize()

[DanielFlaum]

Note for self: The plugin calls mermaid.initialize() here: https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams/blob/c18856beaf0d894cf7c612be14690bc1c6c78c06/mermaid-diagrams.php#L93

[DanielFlaum]

Note for self: Adding the ability to configure these options via the plugin's YAML should be possible with use of $this->config->get() in https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams/blob/c18856beaf0d894cf7c612be14690bc1c6c78c06/mermaid-diagrams.php#L72

[DanielFlaum]

The plugin currently lacks the functionality needed for @icamps to do what he needs without altering the plugin's source code. YAML configuration options need be added to rectify this.

[DanielFlaum]

@icamps I'll need to work on the plugin so that you have super- and subscripts and links without altering the plugin's source code.

But while I'm doing that, I can also point you to what changes you would need to make to get this working in the meantime. The key is on this line: https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams/blob/master/mermaid-diagrams.php#L93

Changing that to mermaid.initialize({startOnLoad: true, htmlLabels: true, securityLevel: \"loose\", }); should turn on the functionality you need, although I haven't actually tried it myself yet.

I'm going to mark this issue as having a workaround, but if that doesn't work for you, let me know.

[icamps]

Hello @DanielFlaum , sorry for the delay...

I took that info from the Mermaind Github: https://github.com/mermaid-js/mermaid/issues/1376.

Also, from the Mermaid page, they have the option called Interaction that add the ability to use links.

Thank you very much for the quick response!

[tobias0409]

Hello @DanielFlaum,

I really appreciate your plugin. However, I see that it is not possible to set the configurations like in the Mermaid documentation. Example

   %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
    timeline
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
          2005 : Youtube
          2006 : Twitter

Is this still in development? Thank you!