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.