Obsidian Mermaid Diagrams

Hi all - spent part of today experimenting with integrating Mermaid JS into Obsidian. Seems to be working and wanted to share the progress. Are others interested in this? Has this been done already and I just didn’t find it? Let me know your thoughts.

Quick short video showing it in action is here: https://youtu.be/Y0kW3NC7Hls

Overview:

  1. It renders diagrams in the doc preview mode only
  2. It only generates diagrams if they have not already been generated
  3. All diagrams are rendered as png (though I am considering svg later)
  4. The rendering happens using a locally running support service that wraps mermaid-cli - the diagram source is sent to this service which performs the generation and returns the image.

Hi! How will this be different from Obsidian’s mermaid integration?

1 Like

Please tell me more - I am rather new to Obsidian. I didn’t see anything to enable mermaid

Thank you for the link - exactly what I was looking for!
Saved me a bunch of extra work

1 Like

You might also like to look at: https://kroki.io/

1 Like