6 ms·

Diagrams: Open-Source Alternative to Lucidchart

328 points by synergy20 5y ago

toastshaman 5y ago
This is also excellent. https://github.com/mingrammer/diagrams https://github.com/mingrammer/diagrams
davidjgraph 5y ago
For those finding the UI too complex, there is the option of a simpler UI - https://app.diagrams.net/?splash=0&ui=sketch https://app.diagrams.net/?splash=0&ui=sketch . That can be set under extras->theme->sketch.
igetspam 5y ago
Is this supposed to be a clever way of announcing that draw.io has been renamed to diagrams.net?
- dljsjr 5y ago
  They wanted to move off .io for several reasons, they announced it a while back: https://www.diagrams.net/blog/move-diagrams-net https://www.diagrams.net/blog/move-diagrams-net
  - IshKebab 5y ago
    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.
    - davidjgraph 5y ago
      "Between 1967 and 1973, the Chagossians..." (https://en.wikipedia.org/wiki/Chagossians https://en.wikipedia.org/wiki/Chagossians). That's the colonial era? They are plenty of Chagossians alive today that were evicted.
Veuxdo 5y ago
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-and-drop-diagram-tools/ https://www.ilograph.com/blog/posts/its-time-to-drop-drag-an...
- beachy 5y ago
  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.
  - lmc 5y ago
    Take a look at Structurizr - https://structurizr.com/ 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 :-)
    - beachy 5y ago
      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.
      - lmc 5y ago
        Got it, diagrams are part of your product, rather than for system design.
  - alexott 5y ago
    I like PlantUML a lot
alpb 5y ago
Isn't this the well known https://draw.io https://draw.io rebranded?
- synergy20 5y ago
  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.
- csunbird 5y ago
  It definitely is!
houqp 5y ago
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.drawio 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 https://github.com/roapi/docs/blob/main/src/images/roapi.svg.
- thedougd 5y ago
  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.
  - thrtythreeforty 5y ago
    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.
- stevesimmons 5y ago
  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.
- the_arun 5y ago
  How can I share a link for the diagram with a friend/team member & collaborate?
  - davidjgraph 5y ago
    Save it to Google Drive or OneDrive and share that with them.
725686 5y ago
"When companies pay us money it should be because we add value, not because they are locked in."
dtjb 5y ago
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.
yboris 5y ago
Related: yEd graph editor with my favorite feature: automatic diagram untangling / re-arrangement / reflow. https://www.yworks.com/products/yed https://www.yworks.com/products/yed
riidom 5y ago
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)
spellcard199 5y 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/mxGraph-js.html#mxGraph https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGr... [2] https://gitlab.com/spellcard199/drawio-plugin-eight-droves-of-rabbits https://gitlab.com/spellcard199/drawio-plugin-eight-droves-o... [3] https://gitlab.com/spellcard199/emacs-drawio https://gitlab.com/spellcard199/emacs-drawio [4] https://github.com/NicolasPetton/Indium https://github.com/NicolasPetton/Indium
- davidjgraph 5y ago
  If you're ever looking for a software job let me know - david@draw.io
  - spellcard199 5y 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.
    - 5y ago
argella 5y ago
My company is forcing everyone back to Visio from diagrams.net because “it’s included with m365”. Shit deal.
- jrochkind1 5y ago
  Oddly, my company has a deal for m365 that does not include Visio. If it did, I'd probably just use Visio honestly!
tgsovlerkhgsel 5y ago
This is how the example chart on their homepage looks on my machine: https://i.imgur.com/al67CoQ.png 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.
jrvarela56 5y ago
If you're looking for a simpler drawing tool https://www.tldraw.com https://www.tldraw.com lets you draw and associate all kinds of shapes.
jotm 5y ago
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.
hnarn 5y ago
I thought this was about the Python module “diagrams”.
ChicagoDave 5y ago
No way it comes close to the capabilities of LucidChart.
- ygra 5y ago
  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.
remram 5y ago
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.
pottertheotter 5y ago
Thanks! Anything other than Lucid is a win for me. Horrible company to deal with. Tons of dark patterns.
langsoul-com 5y ago
Used this before their rename, it's the good shit. Great for flowcharts, at least that's my use
br4m 5y ago
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!
zoom6628 5y ago
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.
nkerkin 5y ago
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.vscode-drawio https://marketplace.visualstudio.com/items?itemName=hediet.v...

328 points by synergy20 5y ago

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

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

igetspam 5y ago

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

dljsjr 5y ago
They wanted to move off .io for several reasons, they announced it a while back: https://www.diagrams.net/blog/move-diagrams-net https://www.diagrams.net/blog/move-diagrams-net
- IshKebab 5y ago
  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.
  - davidjgraph 5y ago
    "Between 1967 and 1973, the Chagossians..." (https://en.wikipedia.org/wiki/Chagossians https://en.wikipedia.org/wiki/Chagossians). That's the colonial era? They are plenty of Chagossians alive today that were evicted.

Veuxdo 5y ago

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-and-drop-diagram-tools/ https://www.ilograph.com/blog/posts/its-time-to-drop-drag-an...

beachy 5y ago
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.
- lmc 5y ago
  Take a look at Structurizr - https://structurizr.com/ 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 :-)
  - beachy 5y ago
    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.
    - lmc 5y ago
      Got it, diagrams are part of your product, rather than for system design.
- alexott 5y ago
  I like PlantUML a lot

alpb 5y ago

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

synergy20 5y ago
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.
csunbird 5y ago
It definitely is!

houqp 5y ago

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.drawio 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 https://github.com/roapi/docs/blob/main/src/images/roapi.svg.

thedougd 5y ago
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.
- thrtythreeforty 5y ago
  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.
stevesimmons 5y ago
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.
the_arun 5y ago
How can I share a link for the diagram with a friend/team member & collaborate?
- davidjgraph 5y ago
  Save it to Google Drive or OneDrive and share that with them.

725686 5y ago

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

dtjb 5y ago

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.

yboris 5y ago

Related: yEd graph editor with my favorite feature: automatic diagram untangling / re-arrangement / reflow. https://www.yworks.com/products/yed https://www.yworks.com/products/yed

riidom 5y ago

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)

spellcard199 5y 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/mxGraph-js.html#mxGraph https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGr... [2] https://gitlab.com/spellcard199/drawio-plugin-eight-droves-of-rabbits https://gitlab.com/spellcard199/drawio-plugin-eight-droves-o... [3] https://gitlab.com/spellcard199/emacs-drawio https://gitlab.com/spellcard199/emacs-drawio [4] https://github.com/NicolasPetton/Indium https://github.com/NicolasPetton/Indium

davidjgraph 5y ago
If you're ever looking for a software job let me know - david@draw.io
- spellcard199 5y 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.
  - 5y ago

argella 5y ago

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

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

tgsovlerkhgsel 5y ago

This is how the example chart on their homepage looks on my machine: https://i.imgur.com/al67CoQ.png 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.

jrvarela56 5y ago

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

jotm 5y ago

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.

hnarn 5y ago

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

ChicagoDave 5y ago

No way it comes close to the capabilities of LucidChart.

ygra 5y ago
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.

remram 5y ago

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.

pottertheotter 5y ago

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

langsoul-com 5y ago

Used this before their rename, it's the good shit. Great for flowcharts, at least that's my use

br4m 5y ago

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!

zoom6628 5y ago

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.

nkerkin 5y ago

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.vscode-drawio https://marketplace.visualstudio.com/items?itemName=hediet.v...