Plugin: Mermaid View

Share & showcase
1

I’m an avid Mermaid user. I work with everything from simple to complex charts, and they don’t always fit neatly within Mermaid code block syntax. I like to keep some of them in separate files that can be versioned, shared, or viewed directly on GitHub.

Obsidian supports Mermaid out of the box, but only inside individual notes. Here’s why I created the Mermaid View plugin: GitHub - weppos/obsidian-mermaid-view: Obsidian plugin for viewing Mermaid files in views.

This plugin instead treats Mermaid files as first-class citizens.

Key features:

  • Native support for Mermaid files stored as .mermaid or .mmd files (configurable)
  • Ability to view and edit Mermaid files directly in Obsidian, with a split mode that lets you edit and see changes in real time
  • Navigate large diagrams with mouse wheel zoom and click-drag panning and pinch-to-zoom.
  • Include mermaid diagrams in other notes using standard embed syntax

This is fairly new, and I’m sharing it to gather feedback.

I’ve submitted it to the official Community Plugins repository, but the backlog is quite long and it may take weeks to be accepted. In the meantime, if you want to give it a try, the best option is to head over to the Releases page and download the latest version.

2

At last! I’ve been using the mermaid live editor until now, but the cut and paste and lack of initialisation features inside mermaid code blocks has always annoyed me. I wil try this plugin and provide feedback. Thanks for creating it!

Right now it needs to be installed with BRAT as it is not listed in the community plugs yet (in the uk).

3

Seems to work very well. I got caught out by the scroll behaviour at first but it makes sense. Moving my trackpad finger up and down makes the diagram zoom in and out. But my diagram looks exactly the same as it does in a note so yay!

You might want to enhance the scroll options though because of the diagram is large and exceeds the display area then the mouse stops at the edges and you can’t move the diagram any further without lifting your finger and moving the mouse to another place to continue.

I don’t want to have to zoom out to be able to move around inside the preview with a trackpad or mouse. Maybe when you reach the edges with the mouse, it should automatically pan the display slowly?