Build Draw.IO with the plugin

Prerequisites

Git (for cloning the repo and its submodule)

Node.js and npm - updated versions

Clone the repo

In an empty work folder: Typically this should be: C:\dragonflow\shared\drawio\custom

git clone --recursive https://github.com/jgraph/drawio-desktop.git
cd drawio-desktop

Install node packages

npm install

Test that the repo is working:

npm start --enable-logging

Embed the plugin

Copy 'aml_plug.js' (with the map files) into your desktop build tree under .\drawio-desktop\drawio\src\main\webapp\plugins

In src/main/electron.js, after the call to 'mainWindow.loadURL(ourl)' (in function function createWindow somewhere around line 230 ), add:

mainWindow.webContents.on('did-finish-load', () => {
  const relPath = 'plugins/aml_plug.js';
  mainWindow.webContents.executeJavaScript(`
    (() => {
      const s = document.createElement('script');
      s.src = '${relPath}';
      s.onload = () => console.log('Plugin loaded');
      document.head.appendChild(s);
    })();
  `);
});

This uses Electron’s BrowserWindow.webContents.executeJavaScript() API to run your plugin every time the editor comes up (basically we run the plugin when draw.io start)

Disable 'webSecurity' allows the plugin to access the internet (optional)

In src/main/electron.js find: webSecurity: true (it should be in the area of let mainWindow = new BrowserWindow(options)).

replace the true to false

Build

you will need a github token

set GH_TOKEN=ghp_QLOY6..........
npm run release-win

You will see errors on missing sign tokens (this is expected since we don't have the tokens).

Make sure everything is generated into: .\drawio-desktop\dist\win-unpacked

Now we can install this version of draw.io on the computer: .\drawio-desktop\dist\draw.io-28.0.4-windows-installer.exe