top | item 30783243

(no title)

spellcard199 | 4 years ago

I 'm an heavy user of diagrams to take notes while learning topics in biology and medicine. I think the most interesting feature of diagrams.net is its extensibility, which is not frequently mentioned. If you run in the javascript console...

    var editorUi;
    Draw.loadPlugin(app => editorUi = app)
    var editor = editorUi.editor
    var graph = editor.graph
... then you can automate changes to the diagram using mxGraph's api [1] on the `graph' variable from the console.

Around this plugin mechanism I wrote some dirty hacks for personal use to make the editor behave more to my likings [2] (some features stopped working with recent versions of the desktop app), and an even dirtier Emacs mode for editing labels and having the js REPL available directly from Emacs when I need to run some code to fix my diagrams programmatically [3] (based on Indium [4] + the fact that electron apps can be launched with --remote-debugging-port=...). It's not pretty, but works enough for me, and it's only thanks to the customizability that diagrams.net allows.

[1] https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGr...

[2] https://gitlab.com/spellcard199/drawio-plugin-eight-droves-o...

[3] https://gitlab.com/spellcard199/emacs-drawio

[4] https://github.com/NicolasPetton/Indium

discuss

order

davidjgraph|4 years ago

If you're ever looking for a software job let me know - david@draw.io

spellcard199|4 years ago

As you can see I am a fan of both your product and the philosophy behind it, so thank you for your work. If I was interested in working just on software diagrams.net would be somewhat of a dream job for me, however, currently my life plan is to finish my last years of med school (after being stuck for ~20 years) and then possibly do something related to both software and med at the same time. Thanks for the offer anyway, since it came from you I admit I have really appreciated it.

CornCobs|4 years ago

TIL about being able to hack the diagrams from console. Thank you very much! I've been using diagrams.net recently and have had some frustrations with the graphical editor that I almost wished I were using plantuml

spellcard199|4 years ago

I agree on the graphical editor. Before customizing it to my needs there were several behaviors that I found quite tedious.

Since it may be of interest I'll add some notes.

You can get a console also in the desktop app if you launch it from a terminal adding --remote-debugging-port=..., then opening http://127.0.0.1:<port> from a chromium-based web browser.

A couple of useful functions that allow to listen to events are graph.model.addListener and graph.selectionModel.addListener. They are documented in the mxGraph api page.

You can make your functions persistent between sessions by putting your code in a javascript file, clicking from the desktop app on Extras > Plugins > Add > Select File... Then restart the app. In the web app "Select File..." is replaced by "Custom..." and the file should be some reacheable url. The javascript file can contain arbitrary javascript code, doesn't need to have a specific format.

Finally, to customize the ui actions, keybindings and menus without touching the various event listeners, this answer on stackexchange [1] from user holroy is what initially guided me in the right direction.

[1] https://webapps.stackexchange.com/a/82379