Suggestion: Draw IO integration plugin with links and embed

Plugins ideas
#1

With all the changes to Obsidian, it is quickly overcoming all of the initial caveats that I had in switching over from running a bunch of markdown files in VScode. One thing I’d like to suggest is integration of Draw IO files. Several people have mentioned working with diagrams and more visual elements.

Mermaid diagrams are good for more simple diagrams, but more complicated diagrams would benefit from something more complete.

Having the ability to make a diagram that also had internal obsidian links and embedded content would allow for some super nice MoC pages and other visualizations for those of us who are more visual oriented.

There is a plugin for VScode (link to git repo). I know both are electron apps, but it would entail more than a simple fork with minor modifications. The outcome would be worth it in my mind though.

28 Likes
Draw.io Plugin for Obsidian
#2

Yeah, that’s a good idea.

1 Like
#3

+1 for this great idea.
It would be amazing to have draw.io support.

4 Likes
#4

I find out that Obsidian can show SVG in its preview mode. Meanwhile, if you draw and save a diagram as “.svg”, you are still able to edit this diagram in the future (great work, draw.io!). So, the current solution is:

  1. Open draw.io (executable, or Visual Code plugin, or etc.), draw your graph, save as “.svg”
  2. Use ![[some_dir/some_name.svg]] to display your figure in the note.
  3. Open the SVG you want to edit in draw.io to update the figure.
  4. Ctrl+R to refresh the preview in Obsidian.

A simple idea is that if I can right click on the diagram, select “open with draw.io” (standalone executable, VS code, or whatever I have on the machine), open the figure outside Obsidian. No extra work (editor, rendering, …) is needed.

7 Likes
#5

To draw MOCs, like a simple diagram would be indeed super-useful.
Bonus points if you rename or connect notes in the diagram itself, visual thinkers will enjoy :slight_smile:

There are also alternatives to draw.io, that could be considered, like: Excalidraw · GitHub

1 Like
#6

So happy to see this thread. My hopes are up.

Would be totally satisfied with what is explained here.

But to think out loud, I am not sure if there is any existing way that could bring all 3 dimensions into play in this regard. Perhaps even with rearrangements of the content shown in sequence from different points of view. So just four dimensional. That’s all I ask, ha.

But seriously, just the thought of this all has definitely already made my day.

Thank you.

2 Likes
#7

Infact it should be implemented this way:

User types in

```draw
```

In preview mode a draw board pops out.
Draw there and save. The drawing is saved automatically as SVG.
And when you switch back to preview mode, you see the link to same new SVG file and that codefence above it.

4 Likes
#8

There is also an open source VSCode plugin that could be used as a basis.
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

1 Like
#9

Use case or problem

Currently there is a plugin for Draw.io on:

Proposed solution

Would anyone be making a Obsidian.md based plugin?

If Obsidian had this, it would really be a huge feature. Draw.io has the full suite of AWS, Azure and GCP icons in their library, and it is my go-to tool for diagramming system architecture as well as other sorts of flowcharts

Current workaround (optional)

I am simply using the Desktop App for now.

Related feature requests (optional)

None for now.

8 Likes
#10

I’ve just pushed a first release of a draw.io integration plugin here. Release 1.1.0 · zapthedingbat/drawio-obsidian · GitHub

It’s not in the community plugins list yet any I’ve had nobody except me test it so it’s very much still in a certified “works on my machine” state right now. But if you want to try it I’d be very interested to know about any bugs or suggestions.

3 Likes
#11

WOW! Let me give it a try and will report back here

#12

image
image1738×1146 132 KB

Looks like its been added to the Community Plugins list already! thanks @ztd and all who helped to push for this!!

1 Like
#14
  1. Sketch off is not working in Format Panel
  2. I would like to link and embed text, can you improve it?
4 Likes
#15

This is great, but I cannot see the diagram in the preview mode, I just get a blank space. I can edit and preview in another pane but not within the main pane that I am working on.
thanks

#16

Found out that if I rename to one word it displays, so brilliant add in. Cannot praise highly enough

#17

That is also something I would be interested in. Being able to link to other noted from the diagram would be game changing

1 Like