Visual Editor tool for Mermaid

Plugins ideas
1

Use case or problem

Currently, Mermaid in Obsidian uses a text-based syntax. Creating and editing diagrams visually is much more intuitive. This would be particularly beneficial for casual users who want to use Obsidian like a regular note-taking app. The idea is similar to the Table Editing tool.

Proposed solution

Add visual editor tool plugin for Mermaid. With the plugin I see following type of workflow.

  1. Right click on Note or Canvas.
  2. Choose insert Mermaid Diagram…
  3. Visual Pop Up editor show up (Similar to Mermaid Live Editor Playground mode)
  4. Hit save
  5. Insert the Mermaid code block.

While it still uses Mermaid, there is no step in this process user requires to know/use Mermaid text syntax.

Current workaround (optional)

I use Mermaid Live Editor. Then copy and paste the code into Obsidian.

1 Like
2

There is GitHub - dartungar/obsidian-mermaid: Tools for improved Mermaid.js experience in Obsidian.md, which can be added custom diagrams, which when inserted, can be further tweaked.

3

Thank you for the information. I’ve actually used the Plugin, but this request is specifically for a visual editor, similar to what you see in the Playground Mode of the Live Editor on the Mermaid website. So this workflow won’t require any mermaid code text input from the user. Essentially, it’s like the current Table Insert feature, where there’s no need for any Markdown input, as everything will be managed visually.

4

I see.

Until a plugin is developed, you can try AI help for another workaround as well, with a good system instruction/prompt to have good results. Then you can save that prompt as a command in Copilot plugin.

1 Like
5

Ah great tip! I never thought about it. I will give it a try. Thanks.

1 Like
6

And while you’re at it, you can try plantUML as well (you’ll need to install a third-party plugin of one of the Obsidian devs). The diagrams come out leaner and thus more compact than in Mermaid. I switched some time ago.

1 Like