How to make my first draw.io plugin

[Spyke]

Hi i would like to make a simple draw.io plugin. Something like showing a text message when a triangle object is placed.

I've coded in C# and WinForms but i've not much expirience in web stuff.

My current setup is:

- Ubuntu Virtual Machine

- Node.js and npm installed

- https://github.com/jgraph/drawio repository cloned.

Example script:

// Wait for Draw.io to be ready
mxEvent.addListener(window, 'load', function() {
    // Add a listener for the shapeAdded event
    editor.addListener(mxEvent.SHAPE_ADDED, function(sender, evt) {
        // Get the added shape
        var shape = evt.getProperty('cell');
       
        // Check if the shape is a circle
        if (shape && shape.isVertex() && shape.style && shape.style[mxConstants.STYLE_SHAPE] === mxConstants.SHAPE_ELLIPSE) {
            // Show a text message
            alert('A circle has been added');
        }
    });
});

(this following ChatGPT indications)

But now i'm confused and i'm not sure where i have to put the code, how to compile it, how to test it, etc.

Thx for your help.

[Spyke]

Hi, someone here to help mee?

Thx.

[Spyke]

Finally i figgured it out. No need for all that stuff i said before.

I will explain how to make a plugin that will pop up a message when opening draw.io

1. It's coded in JavaScript. So create a file named: "myFirstPluggin.js".

2. Edit  "myFirstPluggin.js" and put the following code:

Draw.loadPlugin(function(ui) {

    alert('myTestPluggin.js running!!');

});

3. Install Draw.io Desktop.

4. Run Draw.io from cmd using --enable-plugins (Ex: draw.io.exe --enable-plugins)

5. On open, go to Extras>Plugins... > Add > Select file > and select  "myFirstPluggin.js".

6. Restart the app (using the same comand as step 4).

7. Once opened it should show a pop up.

Enjoy.

[Lumiere]

Hi, which version of drawio were you using? with the latest version, plugins will not show in extra even after following these steps

[Spyke]

Hi, i can't remember. But the latest aviable on 18 Jul 2024.