Use Updated Version of Mermaid JS with DataViewJS

Obsidian ships with mermaid 9.3, which is not very out-of-date, but I really wanted to try and use the latest version of mermaid.js.

After quite a bit of hacking around, inspiration from this comment about creating html elements using dataviewjs, and mermaid.js example API usage, I was able to come up with this code snippet wrapped in a dataviewjs block:

const { default: {mermaidAPI} } = await import('')

mermaidAPI.initialize({ startOnLoad: false });

let el = dv.el("div", null);
const graphDefinition = `
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
const {svg} = await mermaidAPI.render("graphDiv", graphDefinition);
el.innerHTML = svg;

It works!

This may also serve as a good example on how to import external js modules into your obsidian notes.

This snippet could be improved by putting the code logic in a customJS script.


Wow! This is really cool. I never thought about importing stuff like this directly into dataview.

The only inconvenience is that when I try to edit it once it’s generated, it disappears until the note is reloaded. But still—this is really cool!

1 Like

Thanks! I wrote a similar post about importing ChartJS in DataView. I’m going to do a little bit of work and write up another post in the near future about importing modules directly in CustomJS so they can be reused in multiple dataview code blocks.

1 Like

This is really awesome! Thanks for your effort.

One question: Is it possible to include some kind of “zoom”? I have several quite large diagrams and they are only partly readable, because the text is displayed so small.

Does anyone know if it’s possible to do the same thing and use a dataviewjs request to use plantuml?