Mindmap graph in mermaid version 9.3.0 not rendered in DEVONthink and DTTG

[kuanksiaokuo]

I just start to use mermaid code in markdown file, as I know, the DEVONthink version is 3.8.7(the latest version), and the DTTG version is 3.6.3. I tried the mermaid mindmap code in other markdown editor, it renders well:

but when I tried the same code in dt and dttg, all render with syntax error:

I have known that the other markdown editor also use mermaid version 9.3.0, but I don’t know why the dt and dttg render the code failed.

here is the code:

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

and I noticed that, after trying all the graph types from mermaid document, only the mindmap code fails to be rendered in dt and dttg.

please help me to solve the problem.

[chrillek]

@kuanksiaokuo

only the mindmap code fails to be rendered in dt and dttg.

Mindmap is declared as “experimental”, quite loudly.

And if you scroll down on the page you’re linking to, you’ll see that it needs an additional JavaScript file. Which DT does not include by default (of course, given that the stuff is experimental). So, try adding this JS file to your MD and see if that works.

[BLUEFROG]

Welcome @kuanksiaokuo

@chrillek is spot on here…

PS: The behavior of one application is not indicative of the behavior of another application. This is especially true in indie / artisinal software as many developers will implement proprietary, non-standard, or uncommon features in their apps. Adherence to standards when possible is something to think about when comparing and shopping for apps.

[kuanksiaokuo]

thank for you reply, I’ve given up putting the mindmap in md.

[BLUEFROG]

Perhaps this will work reliably if it comes out of the experimental stage.

[chrillek]

Why not

@chrillek

try adding this JS file to your MD and see if that works.

“this” being the additional javascript file mentioned on the website, i.e.

https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs

you could add that to the global JavaScript setting in DT and see if it works.

[BLUEFROG]

It didn’t work here

[kuanksiaokuo]

yes, I’ve tried that, importing js file in tags, but it not works. so as the importing of css files.

[chrillek]

Indeed. I tried lots of different approaches, always got this “Syntax error”. Not very helpful, either.

[Steinthal]

Since version 10, there’s a new method to call mermaid. If you add this to the top of your md file with the mindmap, it will be rendered:

<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.mjs';
let config = { 
    startOnLoad: true,
    loglevel: 0,
    theme: 'default',
};
mermaid.initialize(config);
</script>

[BLUEFROG]

Actually, this is not needed. The eye-watering aesthetics aside , the mindmap feature appears to be functional now…

[Steinthal]

You’re right – if the default settings for a mermaid diagram are used.

If I want to configure a diagram “locally”, DT3 just displays the code.

Example:

# Test

```mermaid
%%{init: {'theme':'forest'}}%%
graph LR

 A  -->  B  --> C

renders as

If I add at least

<sript>
mermaid.initialize()
</script>

at the beginning of my file, then the diagram is rendered correctly:

That’s the reason why I (sometimes) also include the link to a newer mermaid version as the one built into DT3.

I haven’t found a way to add the “mermaid.initialize()” call globally. Any chance it can be added by default to DT3?

[Steinthal]

Using “mermaid.initialize()”, you can change the “eye-watering aesthetics” of the mindmap

Below is just a quick example. The colours depend on the theme – “base” will use different colours with the same values.

<script>
let config = {theme: 'forest',
'themeVariables': {
      'primaryColor': "#ffcccc",
      'secondaryColor': "#fff0cc",
      'tertiaryColor': "#fff0f0" }
};
mermaid.initialize(config)
</script>

(Mindmap currently(?) does not support “%%{init: }%%”)

[BLUEFROG]

It’s the only request of it’s kind but it’s noted.