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.
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.
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
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.
You can also save your drawings using the option that embeds the drawio diagram source into the rendered svg or png file, and check that single file into git.
Then (a) no need for an automation to generate the image; (b) any image or svg is directly editable.
This is possibly one of Diagrams's killer features, especially in the days of proprietary cloud document hosting that (poorly) attempts to hide the "file" abstraction. You can plunk your diagram directly into the doc without worrying if you'll be able to keep track of the source if you need to edit it later.
Do an 'Open from' > 'URL...' and paste in http://shagie.net/wp-content/uploads/2015/05/Untitled-Diagra... (an example diagram I made several years ago) - its a png itself and you can open that up as a png, but I also exported it with the drawing embedded.
So when you open that up in the app, you'll get the drawing - not the raster version.
Also consider that I created that png 7 years ago - other drawing document formats have been less stable over that timeframe. I'm quite impressed with it.
We opted for Mermaid (mentioned in your article) and auto-layout in our new offering.
As you would expect, it has its pros and its cons. As diagrams get bigger and more complex, mermaid's auto-layout gets more and more challenged and more and more acres of white space start to appear. Of course drawing those same large diagrams manually would be a bitch too.
At small scale, auto-layout is a no-brainer, but the jury is still out for us on large, real world diagrams.
Thanks for the link. All the examples look pretty simple and only use straight line connectors. We're building a no-code for HR platform, so the diagrams are large and really need curved connectors to maximise use of the space.
Ideally, I want diagrams-as-code with a supporting layout-as-code document for fine-tuning the presentation and a wysiwyg tool for manipulating that layout-as-code document.
But I understand why none of this exists: the MVP is too big.
I completely agree with the sentiment of that post.
I've generally always found it difficult to find something in this space that produces a layout that's easy to follow, and easy to experiment with.
I think I'd like something that had:
- layout constraints similar to the android relative layout
- something like excalidraw that could dump the hand drawn diagram out to code for a bit of cleanup before going into VCS
I'm imagining you could solve the ability to inject new sections with the constraints relatively easily but still retain a good amount of creative control to better tell the story.
It's a slight tangent but as an Obsidian user, the Obsidian-Excalidraw plugin^1 is kind of jaw-droppingly, amazingly good at combining the many things each tool does well into a seamless, customizable UX.
The way that article suggests adding more ELBs to the diagram would take a lot of work with a drag and drop tool is hilariously bad, maybe the author should learn how to use drag and drop tools or maybe they are using terrible ones that don't let you also drag to select?
Different uses for different audiences. That article addresses engineering use cases. But diagramming is also useful when discussing (and constantly revising) concepts and workflows with business users before any code is written. Drag and drop fits the bill just fine there.
It would probably be possible to write a layout engine for diagrams to get the best of both worlds. Would be great for some drawing, other diagrams work well with drag and drop.
You can also use it as a wireframing/prototyping tool, or as some kind of free-form typing tool. Write something about the topic at hand in a box, make a list of things in another box, draw some sketch with some basic shapes in a 3rd box, arrange it all later on so similar things are together, etc. And then export to pdf (or html, but I'm more familiar with the pdf export)
This is how the example chart on their homepage looks on my machine: https://i.imgur.com/al67CoQ.png - ugly font, labels crossing their boxes.
I think they're sending me an SVG that my browser renders poorly, but that's a horrible first impression.
That said, the tool itself looks pretty solid, much better than the only other open source alternative I know (dia). Like many open source tools the UI design looks a bit old and it's chock full of advanced features that make the basic ones hard to find/use, but it's certainly usable.
And it's browser based, which means it runs anywhere, including Chromebooks.
Love it. Been using for a few years in cloud and desktop versions. Easy for casual diagram making. I do like mermaid for embedding small diagrams inside text but for a bigger diagram with colour this is my go to tool.
FWIW I do mind mapping in seperate tool as I haven’t found a generic diagram tool that does mind maps even half as good as specialist mindmap software(and vice versa).
Diagrams.net for diagrams
Freeplane for complex mind maps; simplemind for ad hoc maps.
Liked yEd but have forgotten why I didn’t stick with it.
Last I checked, diagrams.net offered live collaboration, but only for Google Drive users. If you use the draw.io plugin with NextCloud, it's even worse, one concurrent user's edits will be silently overwritten.
Not a flaw of diagrams.bet per se, but something to keep in mind before you decide to deploy it.
Yes, this tool is amazing. I use it almost daily for my work, and I see coworkers naturally default to using this app (something I haven't seen all that much, usually people use whatever they are already used to, or they use something they are forced to use).
Ha that complaint about British Imperialism is hilarious. The British forced the original inhabitants off the island in the colonial era, thus denying their descendants the right to profit from an internet domain?? Madness.
"Between 1967 and 1973, the Chagossians..." (https://en.wikipedia.org/wiki/Chagossians). That's the colonial era? They are plenty of Chagossians alive today that were evicted.
I'm not affiliated but if anyone is looking for BPMN diagramming I've found cawemo.com to be the best option out there. Lightweight, simple, online, free, and can be used for downstream automation.
I guess if you're just using LucidChart to draw something interactively, it's a good replacement and even better (probably mostly comes down to what your UI preferences are). I'm not sure there's a good replacement for LucidChart's data imports in there.
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