Plugin: draw.io

This is my first release of draw.io plugin.
I'm still fixing some bugs and stability issues but you can start using it and give some feedbacks.

I don't suggest you to draw important things with it yet because sometime the resources are deleted.
I think it is because Joplin things there are no notes using it. If you know how to prevent this, let me know.

The main feedback I would like to receive is related to the hand writing support in the sketch mode. I don't have a computer with a pen so I cannot test it very well.

It should be available in the plugin list inside Joplin soon.

21 Likes

It really nice when I found that the diagram created by the plugin can actually be rendered out and show the diagram content.

One question: after creating a diagram by the plugin, how can I edit the diagram after saving it?

Right click on the image to open the context menu and edit it

4 Likes

another good addition!

1 Like

Great! I've been a user of draw.io for years, and with this plugin I can manage my draw.io files with Joplin. Thanks!

1 Like

Thank you! This is great

One issue I did experience is when I switch back and forth between editor modes the <'s and >'s on each end of the draw.io section get replaced with the html versions

1 Like

I'm releasing the first stable version (v1.0.0) where I fixed the linking between the resource and the note.

If you created some diagrams before this release you need to modify the html tag to make it work with the new version:

# Previous format
<drawio id="6a0a0fcf2b0246bca3a5b0bccbca1943"/>
# New format
<drawio id="](:/6a0a0fcf2b0246bca3a5b0bccbca1943)"/>

In the previous version the image drawn with this plugin was deleted after a while by the automatic process deleteOrphanResources.

Here is the story on how I fixed this issue that I hope can help other plugin developers with their amazing work.

Story of the fix

This was happening during the modification of a diagram where I was replacing the previous resource with the new one.
In the first implementation, I tried to use the PUT resource/:id method documented in the Joplin Data API, but after several attempts to guess the expected input of this function (the input is not documented), I looked into the implementation and I realized it was never implemented.

My next approach was to delete the previous resource and then recreate it with the same ID in order to keep the same ID in the note body tag:

<drawio id="6a0a0fcf2b0246bca3a5b0bccbca1943"/>

this approach was working and this is what I used in my first release 0.1.0.

After some testing I realized that after a while the resources where deleted and this was caused by 2 issues:

  • no linking between resource and note was generating a orphan resource that is automatically deleted after 90 days
  • the delete resource I was using to replace the previous resource with the new one was done asynchronously, so instead of deleting the old resources Joplin was deleting the new one

The delete resource api DELETE /resources/:id is adding the resource to delete in the deleted_items sqlite table


and then it is actually deleted during the next synch.

Issue #1 - Orphan resource

Jopling stores the links between resources and notes in the database table note_resource. This table is populated automatically during the synch process.

The Joplin Data API to create a resource don't allow to link it to a note so you must follow the rules of the automatic synch process to create this link.

The synch process scans all the notes to populate the note_resource table and uses the following rules to decide that a resource is used by a note:

  • the resource id is inside a img tag in the src attribute
  • the resource id is inside a a in the href attribute
  • it matches the regular expression /^(joplin:\/\/|:\/)([0-9a-zA-Z]{32})(|#[^\s]*)(|\s".*?")$/

For this plugin I decided to trick the resource-note linking process using the last rules and I converted the note placeholder to:

<drawio id="](:/6a0a0fcf2b0246bca3a5b0bccbca1943)"/>

Issue #2 - Asynchronous delete

To prevent the asynchronous delete of the new resources I decided to not delete it at all and create a new resource with the same ID.

I'm lucky because the code to create a resource first stores the input resource with the option { overwrite: true } on top of the previous resource with the same ID and then tries to save the new resource in the database.
Of course the save on the database fails with a really beautiful error because the resource ID is a unique key:
image
but before that the resource is correctly replaced and the operation is not fallen back in case of errors.

Conclusions

To fix Issue #2, it would be really useful to have the PUT resource/:id implemented.

Regarding Issue #1, I'm not sure what it would be the best approach. If the API to handle resources allows also to link the resource to a note, then it would be impossible to break this link in case the plugin is uninstalled.
Maybe the best approach would be for a plugin to declare what are his rules to link a resource to a note and keep those rules valid until the plugin is installed. But it looks a bit difficult to implement.

1 Like

I have just tried this out and it is quite impressive. However changes to a diagram do not appear to sync?

I created a basic diagram in one client and synced. The note and resource went to the server and it appeared in client two. I edited the diagram in client two but a sync did not show any changed records being sent to the server. Client one still had the original basic diagram.

I then edited the original diagram on client one. Syncing did not appear to send any update up to the server. There was no conflict either.

So, unless I am doing something stupid, it looks like after a diagram is created and initially synced, no subsequent changes are sent to the server for syncing to other clients?

As the resource ID is reused does Joplin also need to be told that the resource has been updated?

I have a solution to #2 for you. You can use the external editor functionality to edit the resource on disk and have it tracked by Joplin.

First, get the resource path:

const resourcePath = await joplin.data.resourcePath(drawingId);

Second, start the file watcher

await joplin.commands.execute('startExternalEditing', drawingId);

Third, write the new file contents:

await fs.writeFile(resourcePath, drawingData);

(If it's not already imported, you can import fs with const fs = joplin.plugins.require('fs-extra');)

Finally, stop the watcher

await joplin.commands.execute('stopExternalEditing', drawingId);
1 Like

Just a note, would it be possible to retheme the output according to the theme selected? The black lines are reallty hard to see in most dark modes...

Capture19

@CalebJohn
Thanks for this suggestion about the externalEditing feature, It works really well.
This could fix as well the issue reported by @dpoulton. Can you test it again?

@Imperial_Squid
I fixed this issue in the release 1.2.0. You only need to select the dark mode in the plugin options and the export will be in dark mode as well.

2 Likes
  • Joplin Desktop 2.7.15 (client1 Windows11, client2 Kubuntu 21.10)
  • Joplin Server 2.7.4
  • Diagram types tested: SVG & PNG

Still doesn't appear to send any updates to the server. If I edit a diagram, save it and then press sync, the result is just "Completed". There are no messages that any records have been updated and, of course, the copy on the other client remains unchanged and only displays the original diagram.

I have tried editing on both the Windows and Linux clients and the result is the same.

Still seems to not be working here... Tried both SVG and PNG versions with dark mode on and off, no differences in terms of colouration at all...

If it's useful, the version is: Joplin 2.7.15 (prod, win32)

Try to update the content of the diagram in order to trigger the generation of the resource again:
Animation

Don't know what to tell you mate, I followed your steps exactly and still nothing changes...

Joplin_gfj40QEW41

I've tried both picture formats, I've tried different orderings of changing the settings and themes, I've tried making the diagram and then changing the setting and making it after the setting change, consistently the dark version just isn't being applied...

Which version of the plugin are you using?

Ver 1.2.0, I already considered that... (And tbf did make that mistake before but no, updating didn't fix it)

Capture21

That is amazing! I just know i can edit it in joplin. Thank u.

Hi,

Yes it is a wonderful plugin. Thank you, thank you, thank you.
Just to make sure I understand. I am not very familiar with draw.io
Are the type links <drawio id="](:/e05130823b0ab4d40bebc38feed2e8b7f)"/>
that allow previewing and editing perennial? Or do you have to make a fixed image copy (pdf, jpg, png) once the graphic is finished?
I have a lot of evolving documents... this could allow me to manage maps (mindmap) directly in Joplin....

1 Like