Diagrams: Open-Source Alternative to Lucidchart | Hacker News Reader

Diagrams: Open-Source Alternative to Lucidchart

diagrams.net

328 pointssynergy2052 comments

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

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.

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

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

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.

Maybe you should launch a fork of it for medical diagramming :).

I love the product, not only does it have an easy to use web/offline app, I am also able to checkin the diagram source into git for version control, see: https://github.com/roapi/docs/blob/main/src/images/roapi.dra.... Then I can use automations to generate images based off that source file: https://github.com/roapi/docs/blob/main/src/images/roapi.svg.

You can also embed the source into a png or svg and commit those to the repo. Diagrams.net will allow you to open from the source embedded png or svg.

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.

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.

How can I share a link for the diagram with a friend/team member & collaborate?

Save it to Google Drive or OneDrive and share that with them.

Depends on how its shared... but... if you pull up https://app.diagrams.net

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.

Diagrams is a great drag-and-drop tool, but drag-and-drop tools shouldn't be used for serious system diagramming: https://www.ilograph.com/blog/posts/its-time-to-drop-drag-an...

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.

Take a look at Structurizr - https://structurizr.com/

The guy that makes it is super helpful on twitter as well.

Ah, I've just realised, the article above pointed to a quote by Simon Brown - he is the Structurizr guy :-)

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.

Got it, diagrams are part of your product, rather than for system design.

I like PlantUML a lot

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.

Any suggestions for tools to checkout?

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.

1. https://github.com/zsviczian/obsidian-excalidraw-plugin

It’s sad that nothing beats OmniGraffle.

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.

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.

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?

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.

Isn't this the well known https://draw.io rebranded?

it is, I especially like its offline desktop version(for all OSes). I don't think Lucidchart has a desktop version.

and of course, it's totally free unless you want its paid Apps+cloud version, which in my case I don't.

It definitely is!

Related: yEd graph editor with my favorite feature: automatic diagram untangling / re-arrangement / reflow.

https://www.yworks.com/products/yed

This is also excellent. https://github.com/mingrammer/diagrams

"When companies pay us money it should be because we add value, not because they are locked in."

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)

I'm loving the VS Code extension[1] for this aswell, my teams have finally moved away from visio

[1] https://marketplace.visualstudio.com/items?itemName=hediet.v...

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.

My company is forcing everyone back to Visio from diagrams.net because “it’s included with m365”.

Shit deal.

Oddly, my company has a deal for m365 that does not include Visio. If it did, I'd probably just use Visio honestly!

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.

Wow, this is... awesome!

I was looking for something like this for a while, OneNote works but it's quite tedious. Just a canvas for mindmaps/diagrams/ideas.

This is one of the reasons I keep coming here, to discover new, useful software. Google is rather bad for that these days.

Thank you very much!

I'll see if I can contribute anything.

For those finding the UI too complex, there is the option of a simpler UI - https://app.diagrams.net/?splash=0&ui=sketch . That can be set under extras->theme->sketch.

Thanks! Anything other than Lucid is a win for me. Horrible company to deal with. Tons of dark patterns.

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).

So kudos for that!

Is this supposed to be a clever way of announcing that draw.io has been renamed to diagrams.net?

They wanted to move off .io for several reasons, they announced it a while back: https://www.diagrams.net/blog/move-diagrams-net

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.

Used this before their rename, it's the good shit.

Great for flowcharts, at least that's my use

If you're looking for a simpler drawing tool https://www.tldraw.com lets you draw and associate all kinds of shapes.

No way it comes close to the capabilities of LucidChart.

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.

I thought this was about the Python module “diagrams”.

Reply on news.ycombinator.com