Move drawio.js from plugin to core

[deajan]

Describe feature

So I've used excalidraw in the past with old Trilium versions, but since I found out about this plugin developped by @SiriusXT , I cannot live without it in my field.

I use it way too much to draw IT schemas, and so do people I work with that I convinced to use TriliumNext.
DrawIO comes with an object lib, and makes so much sense for IT/technical schemas/engineers.
I also guess that TriliumNext targets that audience.

Would it be possible perhaps to add this by default to TriliumNext ?

Additional Information

No response

[eliandoran]

@deajan ,

One of the main criteria of embedding a plugin is if it we can self-host all the dependencies. The plugin embeds diagrams.net, so it's not fully self-sufficient.

We can only have it once we have a plugin system in place, since Draw.io is quite big (~100-200 MB in assets).

Will move to plugin ideas for now.

[SiriusXT]

My point of view is about data availability.

For data availability, the trilium-drawio plugin saves drawings as SVG images. Even if you delete the plugin, you can still view the files.

Additionally, you can install drawio-desktop on your computer and use Trilium's Open Note Custom feature to edit Draw.io notes with drawio-desktop, without relying on the plugin.

If you have security concerns, you can also self-host Draw.io online using Docker and replace the link in trilium-drawio accordingly.

[deajan]

@SiriusXT That makes perfect sense for me, especially the self-hosting part which kind of guarantees the availability for me.
Thank you for your answer.

[maphew]

that's excellent! Opening direct with app is better than a plugin for desktop scenarios. I didn't know about that feature. Thanks!

[SiriusXT]

that's excellent! Opening direct with app is better than a plugin for desktop scenarios. I didn't know about that feature. Thanks!

If you frequently use Open Note Custom, you might need this widget. It automatically clicks "Upload Modified File" after an external save.

let centerPane; 

function checkForButton() {
    if (!centerPane) {
    	centerPane = document.querySelector("#center-pane");
    }
    const button = document.querySelector('.watched-file-update-status-widget.alert-warning:not(.hidden-int) .file-upload-button');
    
    if (button) {
        let fileName = button.parentElement.previousElementSibling.querySelector('code').textContent;
        fileName = fileName.split(/[/\\]/).pop();
        fileName = fileName.split('-').slice(3).join('-');
        
        // Create an event that does not bubble and can be canceled, similar to jQuery's triggerHandler
        const event = new Event('click', { bubbles: false, cancelable: true });
        // Only trigger the listener without performing the default operation to prevent tab jumps
        button.dispatchEvent(event);
  
        const message = `File uploaded.\nFileName: ...${fileName}`;
        console.log(message);
        api.showMessage(message);
    }
}

setInterval(checkForButton, 3000);

[arigit]

My point of view is about data availability.

For data availability, the trilium-drawio plugin saves drawings as SVG images. Even if you delete the plugin, you can still view the files.

Additionally, you can install drawio-desktop on your computer and use Trilium's Open Note Custom feature to edit Draw.io notes with drawio-desktop, without relying on the plugin.

If you have security concerns, you can also self-host Draw.io online using Docker and replace the link in trilium-drawio accordingly.

@SiriusXT, with the latest trilium version on Mac + draw.io installed as a desktop app,

The "open note custom" feature appears greyed out. Does this feature need to be enabled in the settings somehow? sorry in advance if this is a basic question. I couldn't find an option for this in the settings.

[arigit]

@SiriusXT logseq refugee here, looking for alternatives. Trilium-next seems to tick all the modern boxes except for some plugin system supporting draw.io, I used it quite extensively there with technical notes.
Question, would the web-app approach to embed draw.io diagrams work in both linux and mac?

[SiriusXT]

@arigit Yes, it works on both Linux and macOS — the web-app approach is platform-independent and not restricted by the operating system.

[deajan]

Can confirm, I self-host a draw.io instance in order to respect document privacy, works on Linux, Windows and macOS so far.

[shutaozhenzhen]

I strongly advise against embedding drawio because, although it is open-source software, it provides compiled results rather than pre-compiled source code. I somewhat consider this to be misleading. Additionally, this practice makes it difficult to patch it according to Trilium’s actual needs.(In one version, they removed the export to vsdx functionality. After updating, when I tried to add this feature back, I discovered that what they provided was not the actual source code. This greatly diminished my positive feelings towards the software, as I started using it precisely because it was open-source.)

[arigit]

the external app approach would be perfect, as long as one can include the diagram in a note where it gets stored, and the diagram can be edited (in the desktop app) with a single click. Is this type of integration possible with trillium-next? I couldn't find much online RE how to achieve this. The references I found were about the older trillium plugin that no longer works in -next

[deajan]

Yes, editing the diagram directly in the Trilium (next) desktop app (or in web) works great for me.
What problem do you encounter ?

[arigit]

Hi @deajan, I am learning the basics of Trilium, what I would like to achieve is as follows: I have a long-form note about some project and within the note, I have various draw.io diagrams. From testing trillium, I understand that I create the main "Project X" note, add text / images, and for draw.io I would somewho create a special sub-note to contain the draw.io diagram and then embed that subnote in the main note.
Question, how do I create the "draw.io" subnote? I have the draw.io app in my mac and trillium installed as well. I could not find the way to create a "Custom Subnote" as mentioned above. Creating the diagram and having it stored in that subnote would be the first step. Second step would be to find how to embed the subnote in the main project note, and how to enable the "Open Custom Note" so that I can open the subnote directly in draw.io.

[deajan]

@arigit Basically you need to download files from https://github.com/SiriusXT/trilium-drawio and put both trilium-drawio.js and drawio.svg files in a note. I use to have a "TRILIUM TOOLS" note in which I have subnotes like this.

Once this is done, you need to add attributes #originalFileName=drawio.svg #template to drawio.svg and attribute #widget to trilium-drawio.js (see my screenshot).

From there, restart (or reload) trilium and now you can right click on a note and "insert child note" with template drawio.svg

[arigit]

@arigit Basically you need to download files from https://github.com/SiriusXT/trilium-drawio and put both trilium-drawio.js and drawio.svg files in a note. I use to have a "TRILIUM TOOLS" note in which I have subnotes like this.

Once this is done, you need to add attributes #originalFileName=drawio.svg #template to drawio.svg and attribute #widget to trilium-drawio.js (see my screenshot).

From there, restart (or reload) trilium and now you can right click on a note and "insert child note" with template drawio.svg

Thanks @deajan ! this is really helpful. I followed this, on linux, draw.io and trilium-next installed from flatpak (latest version for trilium, downloaded the flatpakref from the release assets in github), I got this error after adding the attributes and restarting,

any hint of what I did wrong?

[arigit]

@deajan my bad - issue fixed and this works a treat even with my flatpak install, exactly fits my needs, really amazed by how powerful trilium is when combined with draw.io like this. Thank you! I'll test this in the work mac tomorrow.

For anyone landing here, when downloading the two files from SiriusXT repo, click on the file and "Download as Raw.
Then use "Import into Note", unselect all the 'processing options' and import each file. Lastly to set the attributes, look at the bottom right of the window, the attributes link. Then follow @deajan instructions to use. To insert the diagram into the parent note, use the + entry in the toolbar and insert the child note there, it will show as an SVG that you can resize. Amazing.

[arigit]

@deajan one thing I noticed in both Mac and Linux on trilium 0.101.3 is that after opening trilium and browsing to a note with a draw.io diagram, the diagram can be clicked, the svg note gets opened, where you can click again and the draw.io editor shows embedded, perfect. After closing draw.io and returning to your notes, if you click again in ANY note with a diagram, and then click on the diagram, the corresponding svg note opens "empty", with nothing visible in it, and the draw.io editor does not open.
The only way to edit another diagram is to fully close trilium, reopen it, and then everything works again, you can edit one more diagram. To edit a third diagram, the only way is to close trilium again etc.

is this your experience as well? in linux I use trilium flatpak, in my mac the .dmg version, and both behave with exactly the same problem