Draw.io: Online Diagramming Website(github.com)
github.com
Draw.io: Online Diagramming Website
https://github.com/jgraph/drawio
196 comments
Love the interface and the fact that it's written in Clojure but it's worth mentioning Whimsical is $10/month vs. draw.io being free forever, and the Whimsical limited intro version is crippled in some quite annoying ways.
Just checked it out - it's incredibly stringent. It doesn't adjust your "free board" limit even if you delete a board. Create a board, delete it just to try out the interface? One of your free boards is gone forever.
Love the interface, hate the free plan.
Love the interface, hate the free plan.
You can restore your deleted board, manually remove all content and reuse it — but that’s them making it intentionally more painful than necessary.
So, draw.io it is.
So, draw.io it is.
Pretty sure they know what they are doing with pricing (and "charge more" mantra and all that) but I wonder if there will be more people paying if the prices were lower. With cheap storage and serverless compute one would think pricing could be better.
PS: The UX is great and the diagrams are beautiful but I don't use it enough to pay THAT much. It's totally OK though, I'm probably not in the target market.
PS: The UX is great and the diagrams are beautiful but I don't use it enough to pay THAT much. It's totally OK though, I'm probably not in the target market.
I’d probably make 10-20 diagrams in the next two years. That’s $20 to $10 per diagram and then more if I want to keep them on their platform.
$200 per two year period for mostly client-side diagram software doesn’t sound like a deal to me.
$200 per two year period for mostly client-side diagram software doesn’t sound like a deal to me.
To any business, $10 / month is literally nothing. If you pay $10 / month as a person, then I can see why it matters, but to a business that amount is nothing.
its an infinit canvas...so infinit space..so no need to pay if no collaboration needed :)
Draw.io has the advantage of being open source and able to be self-hosted. I wouldn't trade that flexibility and security for anything.
(co-founder of Whimsical here) Thanks for the mention! Couple fun facts - Whimsical is written 100% in Clojure and we are self-funded (https://whimsical.com/business/why-bootstrap/).
I'm on Linux and just signed up. How do you pan around? The arrow keys work, but opposite the direction I'd expect. Don't see any panning tool obvious. Is the use case touchpads like on a Mac?
Cheers
Cheers
You can pan by holding down Space key (and then use mouse to drag the board). In general Whimsical's UX patterns are quite similar to Figma, Sketch and other UI design tools.
Freaking love whimsical. Keep it up!
Whilst it looks good, I love that I don't even need an account to use draw.io. We use it at work and integrates with Confluence perfectly.
If we're delving into paid services, I find Miro to be another incredible product in this space that absolutely nails the UX. My whole design team collaborates on Miro now and we love it.
https://miro.com/
https://miro.com/
Another lesser-known diagramming tool that shares elements of Whimsical and Miro is Plectica: https://www.plectica.com/
The website doesn’t actually show me anything but a nice picture though?
How will I know what I can do with this?
How will I know what I can do with this?
We started drafting our architecture for https://VisualSitemaps.com with Draw.io but then when we discovered Whimsical and it’s intuitive design speed modern UX..it was hard to go back.
"Whimsical" You can't even try without providing your email. Any app/website asking me to do the hard work of providing my email when i have to do the favor of trying it out, my response has been no thanks, i am not gonna try.
Thanks for sharing whimsical. I just played around with this for a few minutes and I found it enjoyable.
An incredibly useful tool. I started using it in university for coursework, I used it to create figures for my master's thesis, and now I use it in my industry job. I would give it the highest statement of praise you can give any software: it just works.
Without a doubt one of the most useful 100% free software tools a dev has at their disposal.
Personally I’m fond of gcc
Draw.io and Web Sequence Diagrams really improved my code documentation because I actually want to use them.
Pretty rare for software imo.
Pretty rare for software imo.
WSD seems neat. I'd like to explore it further, but I'm not interested in signing up for yet another account.
For me, the biggest advantage Draw.io has over many of its competitors is that it can be self-hosted.
For me, the biggest advantage Draw.io has over many of its competitors is that it can be self-hosted.
If you like the text based ness of WSD, you might like https://mscgen.js.org - which is 100% open source & client side only.
Last I checked you can use WSD without account just can’t save, but iirc it records to the url so you can still kinda work it. Also; could be wrong but I thought it allowed federated logins.
It’s worth it.
The syntax is stupid easy and you really would have to try to mess it up. Fast to make workflow diagrams that other people can edit.
It’s worth it.
The syntax is stupid easy and you really would have to try to mess it up. Fast to make workflow diagrams that other people can edit.
Well no kidding. I used this a couple days ago with a coworker where we had to make a quick diagram and didn't know what to use. I searched google, this came up quickly, was able to get it on drive so he and I could each do work on it, and then able to export to pdf pretty seamlessly. Figure if it shows up on HN a few days after discovering and using it myself, I should write about the positive experience.
For those without MS Visio or other paid alternatives, Draw.io can pretty much get you covered at zero cost, with the option of doing it client-side, online, etc. Not sure if the founders have the option, but I would encourage folks to donate a couple of bucks to encourage high quality free software such as this.
I’ve found the draw.io experience to be so far above Visio that I just can’t imagine going back. I put it up there with VLC and Handbrake as quality apps.
Even as a common dirty pirate; I donated to all of those.
Even as a common dirty pirate; I donated to all of those.
I'm a fan as well. My org ended up dropping our draw.io intergration in Confluence in favour of Lucidchart; I'm still not really sure why as it appears to be worse in functionality as well as slower and more tied to a cloud backend.
In what ways is Lucidchart worse in functionality?
(disclaimer: employee of Lucid Software)
(disclaimer: employee of Lucid Software)
> In what ways is Lucidchart worse in functionality?
draw.io is like the In-N-Out of charting software. The menu is short, but you know exactly what you're getting each time and the price is right. It may not be the best at everything, but I'm almost never disappointed.
Lucidchart feels like that neighborhood restaurant that has a six page menu that tries to be everything to everyone. It feels like they should have anything I desire, but they're spread so thin across so many options that they can never really perfect any of the individual entrees. I can usually find something in Lucidchart that looks like it would solve my problem, but it always feels half-finished. I waste hours each month learning to work around the quirks and limitations of the different components. I always leave slightly dissatisfied that Lucidchart almost did what I needed, but due to the limitations of the component I would have been better off just drawing a simple chart in draw.io or even in Sketch.
For example: The Lucidchart iPad app sounds like a dream come true. I would love to make charts on the go with a great iPad interface that properly utilizes the Apple Pencil. However, every time I use Lucidchart on iPad I spend all my time accidentally moving the page when I wanted to drag the corner of box, failing to select text for editing, switching between fingers and Pencil, and so on. I end up walking back to a computer to finish the chart. I want to believe the Lucidchart iPad app would be great, but I always spend so much time fighting it that I'd be better off sitting down with draw.io and making a basic chart in 10 minutes.
draw.io is like the In-N-Out of charting software. The menu is short, but you know exactly what you're getting each time and the price is right. It may not be the best at everything, but I'm almost never disappointed.
Lucidchart feels like that neighborhood restaurant that has a six page menu that tries to be everything to everyone. It feels like they should have anything I desire, but they're spread so thin across so many options that they can never really perfect any of the individual entrees. I can usually find something in Lucidchart that looks like it would solve my problem, but it always feels half-finished. I waste hours each month learning to work around the quirks and limitations of the different components. I always leave slightly dissatisfied that Lucidchart almost did what I needed, but due to the limitations of the component I would have been better off just drawing a simple chart in draw.io or even in Sketch.
For example: The Lucidchart iPad app sounds like a dream come true. I would love to make charts on the go with a great iPad interface that properly utilizes the Apple Pencil. However, every time I use Lucidchart on iPad I spend all my time accidentally moving the page when I wanted to drag the corner of box, failing to select text for editing, switching between fingers and Pencil, and so on. I end up walking back to a computer to finish the chart. I want to believe the Lucidchart iPad app would be great, but I always spend so much time fighting it that I'd be better off sitting down with draw.io and making a basic chart in 10 minutes.
At some point, I actually paid for LucidChart for a year.
Last time I used it, before switching to draw.io, it became slow to the point of being unusable once you had a few pages in a document. And I was making an animation where each page showed the next step in a process, so there were a lot of pages.
This was a couple of years ago, so things may have changed since.
My diagrams may have a bunch of elements on them, but I don't think I use any advanced features (irrespective of whether it's Visio, LucidChart or draw.io). From that perspective, these isn't much difference between any of these programs, so there's just no reason to use a paid product.
Last time I used it, before switching to draw.io, it became slow to the point of being unusable once you had a few pages in a document. And I was making an animation where each page showed the next step in a process, so there were a lot of pages.
This was a couple of years ago, so things may have changed since.
My diagrams may have a bunch of elements on them, but I don't think I use any advanced features (irrespective of whether it's Visio, LucidChart or draw.io). From that perspective, these isn't much difference between any of these programs, so there's just no reason to use a paid product.
> This was a couple of years ago, so things may have changed since.
Yes, Lucidchart's performance has improved in the past couple years. And we now have resources dedicated to improving performance.
> From that perspective, these isn't much difference between any of these programs, so there's just no reason to use a paid product.
That's fair. I think Lucidchart's main advantage is more advanced functionality. And if you don't need that functionality, why pay for it?
Yes, Lucidchart's performance has improved in the past couple years. And we now have resources dedicated to improving performance.
> From that perspective, these isn't much difference between any of these programs, so there's just no reason to use a paid product.
That's fair. I think Lucidchart's main advantage is more advanced functionality. And if you don't need that functionality, why pay for it?
You're allowed to describe that advanced functionality, I'm pretty curious, myself.
Lucidchart is tiring complete :) we have a lot of data and automation features, integrations, text based diagramming, advanced shape libraries, dynamic shaped etc. Discoveravility of all the features can be lacking though because there is so much stuff. I've worked on the product for years and I still learn about new features all the time.
what is the advanced functionality?
I used to use Lucid a lot, since the early betas and for about 10 years.
Things I liked were that I could have a quick collaborative diagram with a friend for some bs project and not pay for it, and I could have a reasonable SAAS offering for a commercial team that wasn't expensive enough I got pushback. It was always a bit slow, and sometime quirky about connection placements but the diagrams were acceptable quality. Early on it was a lot less polished but you could make it work. And it was never a tool I'd use every day or realistically even every month, so it needed to be fairly low cost but I was happy to pay for when I did need it.
Now it is effectively impractical without a subscription so I can't use it for the former case. And the team offering are more enterprise-y and about double the price without adding any functionality I care about, so I tend not to do that either.
At some point I moved companies and didn't suggest a new team subscription, where previously I was usually the advocate for it. And the upsell messages and limitations of the free tier led me to find draw.io, which meets my needs for one-offs and little side projects as well as Lucid Chart ever did.
I'd say functionally they are mostly on par currently for my usages ... but that's the crux of your problem as a 10/month/head subscription.
Oh, and fwiw I use the offline version of draw.io most of the time, it's very responsive and also I like to work sometimes offline.
Things I liked were that I could have a quick collaborative diagram with a friend for some bs project and not pay for it, and I could have a reasonable SAAS offering for a commercial team that wasn't expensive enough I got pushback. It was always a bit slow, and sometime quirky about connection placements but the diagrams were acceptable quality. Early on it was a lot less polished but you could make it work. And it was never a tool I'd use every day or realistically even every month, so it needed to be fairly low cost but I was happy to pay for when I did need it.
Now it is effectively impractical without a subscription so I can't use it for the former case. And the team offering are more enterprise-y and about double the price without adding any functionality I care about, so I tend not to do that either.
At some point I moved companies and didn't suggest a new team subscription, where previously I was usually the advocate for it. And the upsell messages and limitations of the free tier led me to find draw.io, which meets my needs for one-offs and little side projects as well as Lucid Chart ever did.
I'd say functionally they are mostly on par currently for my usages ... but that's the crux of your problem as a 10/month/head subscription.
Oh, and fwiw I use the offline version of draw.io most of the time, it's very responsive and also I like to work sometimes offline.
Dragging the canvas around with the middle mouse button seems much more intuitive in draw.io to me.
That has worked in lucidchart for a while.
I wasn't trying to claim that middle mouse canvas movement didn't work in Lucidchart. The mechanism is just different, and IMO worse, than the one in draw.io. I think if you ask ten users to try both, you'll find a clear preference for the draw.io mechanism. I think it is important because it is an exceedingly commonly used feature.
Lucid probably spends more on sales ;)
(former employee)
(former employee)
How to donate? Sorry I could not find out myself.
I used to use Draw.io a lot more than I do now, and it is a wonderful tool, the only reason I use it less now is because I've been using:
PlantUML (http://plantuml.com/) with demo at (http://planttext.com). Creating most diagrams through a simple markup language that can be version controlled and rendered on demand has been really nice for me, and sometimes I would spent SO MUCH TIME in draw.io making sure my arrows were even, making the pixels line up, making sure I used the right shape with the right font size, etc, that it was liberating to just succinctly describe my data and have it automatically render.
For more complex diagrams or to plan a diagram, I've also gone back to paper. There really is nothing better than a notebook in front of you and a collection of colored pens and stencils.
PlantUML (http://plantuml.com/) with demo at (http://planttext.com). Creating most diagrams through a simple markup language that can be version controlled and rendered on demand has been really nice for me, and sometimes I would spent SO MUCH TIME in draw.io making sure my arrows were even, making the pixels line up, making sure I used the right shape with the right font size, etc, that it was liberating to just succinctly describe my data and have it automatically render.
For more complex diagrams or to plan a diagram, I've also gone back to paper. There really is nothing better than a notebook in front of you and a collection of colored pens and stencils.
> I would spent SO MUCH TIME in draw.io making sure my arrows were even, making the pixels line up, making sure I used the right shape with the right font size, etc,
I think most of us feel this!
I agree PlantUML makes that a lot easier. The thing is, the second you need to make something other than a UML, you’re going to another tool.
That said, while draw.io does an excellent job of their connector and arrow system usually getting it close, a UML or some sort of “strict grid mode” would be nice.
I think most of us feel this!
I agree PlantUML makes that a lot easier. The thing is, the second you need to make something other than a UML, you’re going to another tool.
That said, while draw.io does an excellent job of their connector and arrow system usually getting it close, a UML or some sort of “strict grid mode” would be nice.
Big fan of plantUML here. recently been using this C4 extension (https://github.com/RicardoNiepel/C4-PlantUML) for high level architecture diagrams.
Is there any way to change the rendering style? Or are you stuck with red and yellow?
There's a styling engine[1], but appartently it's still in beta[2]
[1] http://plantuml.com/en/skinparam
[2] http://plantuml.com/es/style-evolution
[1] http://plantuml.com/en/skinparam
[2] http://plantuml.com/es/style-evolution
[deleted]
> draw.io is a client-side, static web application. There is no user authenication or data storage concept in this repo. The online version stores data in mainstream cloud storage options, currently Google Drive, OneDrive, Dropbox, Github, Gitlab or Trello.
I love this about Draw.io. This is how I want to build my applications. I don't want to deal with storing any user data and rather let them handle it how they see fit.
I love this about Draw.io. This is how I want to build my applications. I don't want to deal with storing any user data and rather let them handle it how they see fit.
You may be interested in https://remotestorage.io/.
Oh wow, thanks for that link. I've been wanting my users to be able to save data and share links for ages.
> mainstream cloud storage options, currently Google Drive, OneDrive, Dropbox, Github, Gitlab or Trello.
Anybody know of a library of service (preferably open source) that offers an easy API to interact with all these in such a way?
Anybody know of a library of service (preferably open source) that offers an easy API to interact with all these in such a way?
BrowserFS has a few different APIs integrated. Not the lightest library though.
https://github.com/jvilk/BrowserFS/blob/master/README.md
https://github.com/jvilk/BrowserFS/blob/master/README.md
I would also love such a library. I currently follow the same pattern of making web apps that only use local storage so I don’t have access to user data, but would like to allow users to easily use their existing cloud services for persistence.
Check out https://kloudless.com! (Disclaimer: I'm a co-founder)
Here's our open source file picker: https://github.com/kloudless/file-explorer/ (the server-side is closed source and requires a paid subscription beyond a point)
Here's our open source file picker: https://github.com/kloudless/file-explorer/ (the server-side is closed source and requires a paid subscription beyond a point)
Maybe something like https://kloudless.com/ haven't used them though
Only other option I could find is https://github.com/rclone/rclone but it's a commandline tool
Only other option I could find is https://github.com/rclone/rclone but it's a commandline tool
The remoteStorage reference client can also sync with Google Drive and Dropbox:
https://remotestoragejs.readthedocs.io/en/latest/getting-sta...
https://remotestoragejs.readthedocs.io/en/latest/getting-sta...
Another cool thing they did, is they built a Sandstorm.io app back in the day. There hasn't been enough interest for them to invest a lot of resources in updating it, but I still use draw.io on my self-hosted Sandstorm server too.
I've followed draw.io back since I met them at Google I/O in like 2010 or 2011, I think they were one of Drive's first third party apps.
I've followed draw.io back since I met them at Google I/O in like 2010 or 2011, I think they were one of Drive's first third party apps.
I love these kinds of apps, but I haven't seen any with support for self-hosted cloud storage (Nextcloud). Is there a technical limitation behind that, or is it just lack of interest?
Right, I forgot about that - I actually have it installed on my instance. But my point wasn't specifically about Draw.io, but other cloud-synced web apps like StackEdit. It seems none of them have Nextcloud as a first-class option (some have WebDAV, but that's still a lot more complicated than Dropbox etc.).
I really like that you can export as PNGs and embed the diagram information inside. Being able send around PNGs that everyone can view, but can still be edited with draw.io makes sharing and updating much simpler.
This is really interesting, is this (or similar to) steganography? Poked around the repo but haven't yet found where this is implemented (on either end).
From a user perspective that sounds like a super useful feature, though perhaps unexpected unless you were directly informed of it.
From a user perspective that sounds like a super useful feature, though perhaps unexpected unless you were directly informed of it.
The code for writing is here: https://github.com/jgraph/drawio/blob/master/src/main/webapp... Reading is here: https://github.com/jgraph/drawio/blob/master/src/main/webapp... We're using the tEXt chunk.
PNG allows for sidecar data, so you can just encode your "source" there.
I'm guessing you can just append arbitrary data to a png file since it has eof markers in its file structure.
PNG is structured in "chunks" of data of different types, and you can add your own tool-specific types. IIRC there is even a way to indicate what other tools should do with a chunk type they don't recognise (keep it untouched or throw it away).
I exported a draw.io png and they do encode the diagram information with private data chunks.
I've tried drawing diagrams with these tools and it seems so much harder for quick drafting than just using pen and paper and also a lot of work to get anything even remotely good looking (like aligning things or making boxes of the same size, ie performing mass operations).
I would like to use a tool where I first describe the relations in text/code and the layouting and formatting is done separately, and formatting should be hierarchical.
I would like to use a tool where I first describe the relations in text/code and the layouting and formatting is done separately, and formatting should be hierarchical.
> it seems so much harder for quick drafting than just using pen and paper
I don’t consider that a reasonable criticism. Of course using pen and paper is quicker and easier. The advantage of any digital format is that it is distributable, universally readable and persistent.
I don’t consider that a reasonable criticism. Of course using pen and paper is quicker and easier. The advantage of any digital format is that it is distributable, universally readable and persistent.
And editable! Last time I drew a sequence diagram on a whiteboard I instinctively tried to drag and drop a box to another location. I was sorely disappointed.
Not to mention changeable! The ability to erase items, or to rearrange your diagram (and to have the lines between items automatically reflow) is another key reason to use a digital format.
It's also possible to have both.
I have a "smart pen" that saves anything I write as a PDF on my phone that can be searched and stored where I choose (including cloud services).
The downside is that you have to write on special paper or in special notebooks. But it's not as terrible as it sounds because the notebooks are very reasonably priced.
It also works as an actual pen.
I have a "smart pen" that saves anything I write as a PDF on my phone that can be searched and stored where I choose (including cloud services).
The downside is that you have to write on special paper or in special notebooks. But it's not as terrible as it sounds because the notebooks are very reasonably priced.
It also works as an actual pen.
These are pretty useful as a note taking tool personally, and avoid scanning etc. I've never converted over but have had colleagues use them exclusively.
PDF's are a terminal format though, and doesn't really meet the need of a persistent, editable, graphic format for diagrams.
PDF's are a terminal format though, and doesn't really meet the need of a persistent, editable, graphic format for diagrams.
Would be nice to have both: draw on pen and paper and then use some "OCR" (wouldn't be called that obviously) to turn a screen shot of your paper into a digital file.
> like aligning things or making boxes of the same size
Did you actually try this tool? it makes mass aligning/resizing extremely easy. For instance, to change dimensions of multiple elements you just select them and then type desired width/height. It is also has pretty standard arrange and distribute controls.
Did you actually try this tool? it makes mass aligning/resizing extremely easy. For instance, to change dimensions of multiple elements you just select them and then type desired width/height. It is also has pretty standard arrange and distribute controls.
I have used it. I'll make a comparison. Google draw has a feature that provides immediate visual feedback when you select multiple objects and then resize the group. Everything is resized at once.
You can try mermaid
https://mermaidjs.github.io/
This was the only tool I could find that would work with version control.
This was the only tool I could find that would work with version control.
That's nice. I can fit most of the syntax in my head (more than be said for Markdown...)
When I first tried drawio I also felt slightly clunky, but after a few hours of use I fell in love. Now most of diagrams I make (to share with others) I make in draw.io
I have been using yed for a while now - I don't think it exports to PDF well (not all elements are editable) BUT it is hierarchical and has some tools for automatically laying out your elements. Overall I have found it to be great for flowcharts and diagramming (atrocious was of default colors aside...) - I liked it more than draw.io when I compared them several years ago.
You can download and use yed for free - I think their business model is that you pay for integration with other tools. It's not open source though.
You can download and use yed for free - I think their business model is that you pay for integration with other tools. It's not open source though.
I'm a long-time yEd user. I think its secret sauce is the incredible time and effort its creators put into its automatic layout algorithms. I have yet to see anything else that matches it in that respect.
In particular, yEd is what I would call critical for quickly generating easily readable dependency diagrams with more than, say, 50 elements. The heirarchical layout supports octilinear edge routing (like subway diagrams), which makes resulting layouts readable even with hundreds or thousands of elements. Also, I have printed out large yEd dependency diagrams on a plotter -- so if you can "print to PDF" (like on a Mac or a recent Windows version), generating a PDF should be simple.
I just counted the number of options available on the "hierarchical" layout. This isn't a competition, but it does give you an idea of how thoroughly their developers built it: there are 51 configurable options. And in addition to "heirarchical", there are 19 other automatic layout types available, each with their own options.
Additionally, yEd's native file format is graphml, which is an open standard and can be generated programmatically.
In particular, yEd is what I would call critical for quickly generating easily readable dependency diagrams with more than, say, 50 elements. The heirarchical layout supports octilinear edge routing (like subway diagrams), which makes resulting layouts readable even with hundreds or thousands of elements. Also, I have printed out large yEd dependency diagrams on a plotter -- so if you can "print to PDF" (like on a Mac or a recent Windows version), generating a PDF should be simple.
I just counted the number of options available on the "hierarchical" layout. This isn't a competition, but it does give you an idea of how thoroughly their developers built it: there are 51 configurable options. And in addition to "heirarchical", there are 19 other automatic layout types available, each with their own options.
Additionally, yEd's native file format is graphml, which is an open standard and can be generated programmatically.
Mermaid.js[1] can be used within some markdown parsers. I use it all the time for recording sequence diagrams, logic flows, architecture charts.
I use it all off-line, in vscode with various plugins, though mermaid was made for web.
[1]https://mermaidjs.github.io/
I use it all off-line, in vscode with various plugins, though mermaid was made for web.
[1]https://mermaidjs.github.io/
You may like websequencediagrams.com
The site is only for sequence diagrams “swim lanes” but at that task I’ve found nothing better. I love describing the relationships textually and then selecting the best style for the job.
Many tools fail at basic style annotation so I can abstract the style. Even that would be an improvement for drawing diagrams.
The site is only for sequence diagrams “swim lanes” but at that task I’ve found nothing better. I love describing the relationships textually and then selecting the best style for the job.
Many tools fail at basic style annotation so I can abstract the style. Even that would be an improvement for drawing diagrams.
I’ve used PlantText[0] in the past, which is a text based UML editor. It’s useful if you want to track changes (just add the source to version control).
[0]https://www.planttext.com
[0]https://www.planttext.com
I primarilly use Gliffy cause it is built into confluence, but whenever it is not available, I go right to draw.io. Its a pretty cool tool for this.
Well, they're not "built in" to Confluence, but are plugins. So can draw.io.
select multiple objects, go to align tab, select the alignment you want
it's very nice if you have to, e.g. for university courses.
draw.io is a much nicer than let's say, Visual Paradigm
draw.io is a much nicer than let's say, Visual Paradigm
Fun fact, Visual Paradigm Online is draw.io under the hood, https://online.visual-paradigm.com/diagrams/
While I agree that draw.io is nicer, personally I find Visual Paradigm to get job done faster due to the amount of autocomplete it provided. It not easy getting started, I will admit.
I have only used Visual Paradigm in university though.
I have only used Visual Paradigm in university though.
You mean something like graph easy?
Creating a tool like this requires significant resources, is there a business model behind it?
The core team has a 15 year contract with an Atlassian consulting firm to produce and support the Confluence and Jira integrations with a revenue share model. Last financial year that earned us $3.1M, up from $1.8M the year before.
Thank you for keeping this open! It really is a gift to anyone who wants full control of their tools. I sometimes use it together with inkscape, tikz and graphviz.
I quite like the draw.io nextcloud app as well, though I guess it could also be a storage provider on the website for better integration :)
I quite like the draw.io nextcloud app as well, though I guess it could also be a storage provider on the website for better integration :)
Glad to hear that. Had an enterprise contract with you guys for years — mxGraph was an important part of our front-end stack.
Good choice :). We do still evolve the project as OS, https://github.com/jgraph/mxgraph, since it's the base of our stack.
That's really great! It's really hard to find examples of business models built around free software that brings in straighforward revenue. Good luck!
That’s great news! Draw.io is fantastic and I keep discovering new things about it. So thank you for making it easy to use with an optional rich set of options!
[deleted]
I love draw.io. I work for one of the big brand-name tech companies, and still routinely use draw.io for diagrams whenever I have to give presentations (high-level, system architecture things mostly).
It's easy to get something that looks relatively pretty made relatively quickly, and unlike something like Omnigraffle, it works on Linux.
It's easy to get something that looks relatively pretty made relatively quickly, and unlike something like Omnigraffle, it works on Linux.
I use Draw.io for work all the time. It's far less clunky than Vizio. My one minor issue is, due to security restrictions, I can't really save a whole lot outside of my local and it doesn't give me the option to choose my preferred directory.
Use desktop version https://github.com/jgraph/drawio-desktop/releases
Thanks for pointing this out! Now I can draw.io offline :)
Doesn't a footer pop up when you save locally on the online version telling you about the desktop version?
I saw "download" and clicked it thinking to download the diagram and closed the webpage without looking at it. Maybe it's me, or it might need UX work.
Great website. (and I will be downloading the desktop client :)
Great website. (and I will be downloading the desktop client :)
I never noticed it until now. But I haven't had to use the app in a few weeks.
I had no idea this existed. Thank you!
Awesome! Just installed via brew
brew cask install drawio
brew cask install drawio
Omg!!!! Thank you!!!
Huge fan of Draw.io, with Visio still missing Mac support it's been great for cross machine architecture design.
OmniGraffle on the Mac is great. It's the only thing I've missed since switching to Linux.
Exactly how I got into it. At university, realized that despite buying some office pack with a laptop, there was no visio contained. Began with draw.io and never looked back.
Is it possible to add Monodraw (https://monodraw.helftone.com/) style text art to this ?
I would pay for something that is browser only and generates really nice text art for diagrams.
I would pay for something that is browser only and generates really nice text art for diagrams.
http://asciiflow.com/ maybe?
I've tried asciiflow a few times and monodraw seems so appealing in contrast. But: Mac-only.
I very like it, it's simple but powerful!
Can you elaborate more about "text art"? I just recently purchased monodraw, after seeing it linked from Brandur's blog([1]), but have only done basic diagrams with it.
[1]: https://brandur.org/articles
[1]: https://brandur.org/articles
I meant text diagrams. Not art in the true stylistic sense.
Brandur's blog was an inspiration for me as well !
Brandur's blog was an inspiration for me as well !
monodraw is cool until you actually try making anything more than a simple diagram. It becomes tedious to manage all the different elements you create. Also, the developer hasn't updated the application in over a year and doesn't respond to customer messages.
If you want ascii-style diagrams there are a few free web apps which work 100% better than monodraw.
If you want ascii-style diagrams there are a few free web apps which work 100% better than monodraw.
Related from 2017: https://news.ycombinator.com/item?id=15029989
2013: https://news.ycombinator.com/item?id=6464495
2012: https://news.ycombinator.com/item?id=4947820
2013: https://news.ycombinator.com/item?id=6464495
2012: https://news.ycombinator.com/item?id=4947820
[deleted]
Draw.io is a great application. I integrated it into BookStack (Documentation System) as a way for people to create and manage drawings in the platform. Was much easier than I expected and David (davidjgraph) was very supportive.
Productivity tools often do integrate draw.io, but often are just embedding. Bookstack is one of the best integrations, the create and edit flow is exactly how we intended it.
Anyone have recommendations for a simple text-based flowchart specification format? Something that a human can read and easily understand in plaintext, but can also be rendered as a graphic?
The current solutions we have at my work are extremely difficult to use with VCS.
I've looked at Mermaid [0], but it is pretty limiting in its feature set.
I typically use draw.io/mxGraph [1] when I'm making diagrams and flowcharts, but the XML-based file format is pretty overwhelming for humans to read.
[0] https://mermaidjs.github.io
[1] https://github.com/jgraph/mxgraph
The current solutions we have at my work are extremely difficult to use with VCS.
I've looked at Mermaid [0], but it is pretty limiting in its feature set.
I typically use draw.io/mxGraph [1] when I'm making diagrams and flowcharts, but the XML-based file format is pretty overwhelming for humans to read.
[0] https://mermaidjs.github.io
[1] https://github.com/jgraph/mxgraph
plantUML[0] may be what you're looking for, specifically the activity diagrams[1].I've been using it extensively for sequence diagrams (has more features than websequencediagrams.com). Most recently I've been using this C4 architecture diagrams extension[2]. There's a VSCode preview extension[3] and a docker image[4] for running a plantUML server locally that lets me create and share version controlled diagrams with my colleagues easily.
I especially like that there's an ascii renderer for the sequence diagrams that makes embedding them in Readme's very easy
[0] http://plantuml.com/ [1] http://plantuml.com/activity-diagram-beta [2] https://github.com/RicardoNiepel/C4-PlantUML [3] https://marketplace.visualstudio.com/items?itemName=jebbs.pl... [4] https://hub.docker.com/r/plantuml/plantuml-server/
I especially like that there's an ascii renderer for the sequence diagrams that makes embedding them in Readme's very easy
[0] http://plantuml.com/ [1] http://plantuml.com/activity-diagram-beta [2] https://github.com/RicardoNiepel/C4-PlantUML [3] https://marketplace.visualstudio.com/items?itemName=jebbs.pl... [4] https://hub.docker.com/r/plantuml/plantuml-server/
There's always the ancient "Pic" language by Brian Kernighan, e.g.: http://mtorrest.sitios.ing.uc.cl/downloads/latex/flowchart.p...
These were posted on HN a few days ago: https://avdi.codes/tools-for-turning-descriptions-into-diagr...
draw.io got me through all of college. Easily one of my favorite applications ever. Suck it visio!
We recently had management ask for some diagrams of our applications infrastructure. Draw.io made that so easy with their pre-made components and export to PDF. Will definitely use it again.
The pre-made components and user lib is huge.
I was at Amazon working on something - their own engineer was using draw.io to quickly grab AWS icons for Lambda, IoT core, API Gateway etc and place them into his flow chart.
He said they had a library somewhere of AWS artwork, but it was easier to just use draw.io’s art lib.
I was at Amazon working on something - their own engineer was using draw.io to quickly grab AWS icons for Lambda, IoT core, API Gateway etc and place them into his flow chart.
He said they had a library somewhere of AWS artwork, but it was easier to just use draw.io’s art lib.
Long time draw.io user here. A couple of weeks back [brainio](https://brainio.com/#/) was posted on HN. Though it's still in beta, it works really well and I like the concept of going from Markdown to Mindmap and vice-versa.
Drawio is also trying to implement this through PlantUML but it's not fully functional yet with only some constrained types on PlantUML support.
Drawio is also trying to implement this through PlantUML but it's not fully functional yet with only some constrained types on PlantUML support.
This has been my go-to software for making diagrams since I was an undergrad. Absolutely stunning. I recommend their stand-alone version for offline editing as well.
Just 10 minutes of playing around with it and I'm hooked. What a great tool. Much easier that having to deal with Visio. And, it's cross-platform!
I use this all the time for basic schematics, especially hackathon projects to explain app architecture to newcomers. Never new it was open source!
It is a great tool !
Only issue with it is that the source code (of the front-end) is quite hairy to understand and modify. I tried to add support for Github Enterprise (https://github.com/jgraph/drawio/issues/473) and was quite lost.
Only issue with it is that the source code (of the front-end) is quite hairy to understand and modify. I tried to add support for Github Enterprise (https://github.com/jgraph/drawio/issues/473) and was quite lost.
It's a reasonable critism. The base of the stack is a proper dev library. The top part evolved from an example to that library and didn't get the same refactoring love to make it accessible to other devs.
Main problem from our end on your issue is we don't have access to a Github enterprise instance to test anything.
Main problem from our end on your issue is we don't have access to a Github enterprise instance to test anything.
It's a really nice software, great tool, thanks to people behind it!
I'm wondering about the licenses of icons, clipart or other shapes that are available for the diagrams. There are a lot of shapes, are they all usable without counterpart in any document (private or public)? If not, is there a way to check the licenses of the shapes we want to use?
I'm wondering about the licenses of icons, clipart or other shapes that are available for the diagrams. There are a lot of shapes, are they all usable without counterpart in any document (private or public)? If not, is there a way to check the licenses of the shapes we want to use?
For all the icons built into the app we've performed due diligence that the source allows them to go into the app and allows publishing in any format, or we built them internally from scratch. And yes, we need to publish the audit trail for that, it's on my todo.
After looking for good tools in this space, to create documentation diagrams, I stayed with Draw.io and yEd[1].
The latter has a pretty cool feature that re-arranges all objects according to some predefined layout. Quite neat.
[1]: https://www.yworks.com/products/yed
The latter has a pretty cool feature that re-arranges all objects according to some predefined layout. Quite neat.
[1]: https://www.yworks.com/products/yed
I couldn't tell, why was this trending today? I didn't realize this was open source, I too am a draw.io user. :)
I had no idea draw.io was open source, is this new?
Good stuff either way. I always thought it was amazing that it was free.
Good stuff either way. I always thought it was amazing that it was free.
Used this tool for a while until my org finally decided to pay for Lucidchart
Wow, this is a really slick experience on mobile. I've tried most tools in this class and this might be the most responsive & snappy. Maybe because everything is client-side.
When trying to create a new drawing, if I select the "not in my root folder" option, it a) tries to log me in despite my already being logged in, and b) fails anyway.
I see the same issue. I can save to root folder only in google drive. Also i am unable to open a file in google drive as it has the same "log in" dialog.
https://www.screencast.com/t/g4wnSWLDtOLk
Clicking the "Sign in" button closes the dialog and reopens it. It does this cycle twice, then shows this error pane:
https://www.screencast.com/t/qmUhxSuU2T
https://www.screencast.com/t/g4wnSWLDtOLk
Clicking the "Sign in" button closes the dialog and reopens it. It does this cycle twice, then shows this error pane:
https://www.screencast.com/t/qmUhxSuU2T
Pleas file an issue at https://github.com/jgraph/drawio/issues. Can't recreate currently, but need more details.
exactly that.
I used draw.io a bit a few years ago, before running out of reasons between jobs. Tried out a few paid alternatives recently before re-stumbling across draw - connected it to my personal gdrive and uncovered a whole bunch of old (very useful) diagramming - forget slick UIs, draw.io a remarkable balance of simplicity, flexibility and function. And free! Someone mentioned handbrake and vlc, would definitely agree with the comparison.
Just adding to the choir. This is a great tool. I prefer using open source software when possible, but I also like to pay for the tools that makes my job easier. The developer is aiming at corporate, volume licensing and I understand how a Patreon account would run counter to their business strategy. I wish there was a 'small dollar donations' channel, though. I like this tool enough to throw them some regular money.
We use draw.io at work for embedding diagrams into our process wiki which accepts basic HTML. It's great and allows us to update the drawings at any time.
Just now my colleague was showing the flow chart in draw.io. I was impressed by it and bookmarked the site and now it's trending here
The site is good. It’s one of the only online drawing programs that doesn’t IMMEDIATELY get bogged down.
But... the offline tool is superior for speed and UX imo. That’s where it really shines.
But... the offline tool is superior for speed and UX imo. That’s where it really shines.
I used draw.io for a wiring diagram for my solar permit, as well as for a site plan for a fence permit. Works great! Love it!
I use it everytime i have to draw any flowchart. It is not good as lucidchart but as it is free so i use it.
Same here! Ironically I think it's better than lucidchart because it's simpler and let's me just get my ideas down more easily.
I was just using this today for an ER diagram for class with a group. Working on a single document as a group works well, which has come up quite a few times in my time at university. Draw.io offers everything I need (which isn't very much) without being overly complicated.
Evernote, Google Sheets, VS Code, Draw.io. These are the apps that shape my work and life the most.
Funny, I just used it this afternoon to create an diagram of our technical infrastructure. Initially I was looking for the "Sign up" button so that I could save my diagram in the cloud but then I realized that it's all run in the browser. Love it!
For web-design things, you can turn on Bootstrap in the "More shapes" on bottom left.
Does it allow boolean operations on shapes? https://en.wikipedia.org/wiki/Boolean_operations_on_polygons
I've been using draw.io massively over the last years everywhere from concepting & mindmapping up to integrating it directly into website editors where needed - huge kudos to the authors, such a useful and well designed tool.
Been using draw.io for years and have turned many people at my work on to it. Simple, elegant, and works a treat! Thank you so much for sharing this work and for helping make the work day run a little smoother :)
I've worked with draw.io (mxGraph) quite a bit over the years. Love it!
The draft of my (part time) PhD thesis uses draw.io to present a flowchart of the findings - hopefully it makes the final cut next year.
Fascinating to hear the other uses, and thankyou for a wonderful and elegant tool!
Fascinating to hear the other uses, and thankyou for a wonderful and elegant tool!
I used the javascript and java versions of mxGraph (jgraphx) in several projects. Very powerful libraries with many features and many possibilities for customization. Documentation sucked, though.
I use draw.io all the time. It's incredibly simple and that's what makes it work so well. I can whip up a good architecture diagram in a few minutes using it.
I've used it as a lightweight alternative to LucidChart and was impressed. Pretty cool to be able to just download it as html, in addition to as an image.
A tremendous useful feature, well to me at least, is to let user specify graph data structure with associating data and export the data after drawing is done
Draw.io is a phenomenal program, easier to use for new users than visio. I had everyone use it in my college's robotics team to draw system diagrams.
Used it a lot. It's not perfect, but good enough.
My dissertation would be half as pretty without it.
Been using Draw.io since early 2016. Love it. Love the integration with Google Drive, as I live within that platform.
I can personally recommend precursor:
https://precursorapp.com
https://precursorapp.com
I tried to save a Diagram to Google Drive, not in root folder:
"Error Maximum call stack size exceeded"
"Error Maximum call stack size exceeded"
Didn't know it was open source. I used it for various diagrams for my blog posts. Thanks!
probably not intended for this use case, but I use draw.io to create cover image for my ebooks
Also a good choice for fast easy prototyping and wireframing.
Ok, just a note to everyone !
It is online service and your diagrams are stored in the "cloud" and you have zero control over it.
Please, do not post your company's secret in form of diagrams. Recently, we caught one of the contractors using Draw.io to make diagrams of brand new systems that we are designing(we are fortune 40 company). System is expensive, very sensitive.
And where did the user store the data?
Addtionally, you can deploy a local version via docker, or use the stand-alone desktop version, https://github.com/jgraph/drawio has the links.
Addtionally, you can deploy a local version via docker, or use the stand-alone desktop version, https://github.com/jgraph/drawio has the links.
"cloud" != "public"
If you save it in your Google Drive, you can control who has access. Even better if it's your organization's GSuite
If you save it in your Google Drive, you can control who has access. Even better if it's your organization's GSuite
that is if you save it, it is my understanding the actual objects drawn and linked on screen are entirely stored in the DOM of your browser until you click "save" and send it to a cloud location. "saving" to your browser or device just creates a "download" of static blob data in a variable
i have confirmed this with a local instance of draw.io
i have confirmed this with a local instance of draw.io
> your diagrams are stored in the "cloud" and you have zero control over it
I made a diagram on Sunday and saved it to my local device without logging in; nothing stored in the cloud. Just opened it again from my local storage and it loaded into draw.io with no problem.
I made a diagram on Sunday and saved it to my local device without logging in; nothing stored in the cloud. Just opened it again from my local storage and it loaded into draw.io with no problem.
As David mentioned, check out the desktop app for local device storage at https://get.draw.io
Just out of curiosity can someone point me to the basis for the claim that diagrams are uploaded to some cloud storage? I've used the tool and had the impression that it was all client side in memory DOM stuff until I downloaded my diagram. I never looked if some of the content gets pushed elsewhere, how would I substantiate these claims?
Contractor could have saved diagrams generated to the cloud using any tool. Not sure what makes Draw.io worth calling out in that regard.
On the flip side, we use Google G Suite so the majority of our documents are stored with Google, and draw.io's cloud support seamlessly works with our G Suite drives.
Our G Suite administrators have plenty of control over the G Suite Google Drives that would be used with draw.io and our Google accounts.
The only bits of our data we don't trust with Google are PHI
Our G Suite administrators have plenty of control over the G Suite Google Drives that would be used with draw.io and our Google accounts.
The only bits of our data we don't trust with Google are PHI
This is where my reply was going. Authenication to Google Drive is client-side and direct to google.com. There is no draw.io server anywhere that can access your Google Drive.
I'm not associated with the product at all, but it definitely needs more love in the space.