Use Updated Version of Mermaid JS with DataViewJS

Share & showcase
,
1

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('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs')

mermaidAPI.initialize({ startOnLoad: false });

let el = dv.el("div", null);
const graphDefinition = `
timeline
    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.

5 Likes
3

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
4

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
5

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.

6

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