Draw IO new custom plug in development.

[Santosh Kumar]

Hi,

I am trying to create a new custom plugin for draw io desktop version which can add two custom menus on draw io menus. and these menus should export the opened file in draw io editor into uncompressed xml format. Also I would like to take these exported files as an input for further Python tool which will be running in local PC.

Please guide me steps for custom plug in development for draw io desktop version. and documentations for drawio API list and support.

[diagrams.net Q&A]

ChatGPT answer (not checked for correctness):

Creating a custom plugin for draw.io (also known as diagrams.net) desktop version requires some knowledge of JavaScript and the draw.io plugin architecture. Here's a step-by-step guide on how to create a custom plugin to add two custom menus that export the opened file in draw.io editor into uncompressed XML format:

1. Familiarize yourself with the draw.io plugin documentation: The documentation for draw.io plugins can be found in their GitHub repository: https://github.com/jgraph/drawio/wiki/Plugins

2. Create the plugin JavaScript file: Create a new JavaScript file, for example customExportPlugin.js, and include the following code:

javascript

Draw.loadPlugin(function (ui) { var menu = ui.menus.get('plugins'); var graph = ui.editor.graph; function exportAsUncompressedXML(callback) { var xml = mx.mxUtils.getXml(ui.editor.getGraphXml()); callback(xml); } function customExportAction(label, filename) { return function () { exportAsUncompressedXML(function (xml) { mx.mxUtils.saveAs(xml, filename); }); }; } menu.addItem('Export as uncompressed XML 1', null, customExportAction('Export 1', 'export1.xml'), menu.div); menu.addItem('Export as uncompressed XML 2', null, customExportAction('Export 2', 'export2.xml'), menu.div); });

This code creates a custom plugin that adds two menu items to the "Plugins" menu. Each menu item exports the opened diagram as an uncompressed XML file with different filenames.

3. Load the plugin in draw.io desktop version: To load your custom plugin in the draw.io desktop version, follow these steps:
   • Open draw.io desktop application.
   • Go to "Extras" > "Plugins" > "Add".
   • Click "Select File" and browse to your customExportPlugin.js file.
   • Click "Open" and then "Apply".
   • Restart the draw.io desktop application.

Now you should see two new menu items "Export as uncompressed XML 1" and "Export as uncompressed XML 2" under the "Plugins" menu. Clicking on these menu items will export the opened diagram as an uncompressed XML file.

4. Use the exported XML files with your Python tool: The exported XML files can be used as input for your Python tool running on your local PC. You can read the XML files using Python's built-in xml.etree.ElementTree module or any other XML parsing library.

For further information on draw.io API, you can refer to the following resources:

• draw.io API documentation: https://github.com/jgraph/drawio/tree/master/src/main/webapp/js/diagramly
• draw.io source code: https://github.com/jgraph/drawio
• draw.io plugin examples: https://github.com/jgraph/drawio-plugins

You can use these resources to learn more about draw.io API and how to create custom plugins for specific requirements.

[Santosh Kumar]

Thanks for the reply.

1. But following links are not working from answer.

https://github.com/jgraph/drawio/wiki/Plugins

https://github.com/jgraph/drawio-plugin

2. Need guide on custom plugin development in drawio desktop.

3. How to run python script from custom plugin.