Create diagrams in the browser(draw.io)
draw.io
Create diagrams in the browser
https://www.draw.io/
24 comments
I'm surprised to see this on HN frontpage only now. I found this tool quite a while back and since then has been my main diagraming tool. Keep up the excellent work.
Nice to know about the Dropbox integration. Really good work, keep it up!
I use the underlying product [1] for a graphical online simulation and modeling program [2].
It really is a top notch diagramming library for JavaScript. It is very customizable and they support it back all they way to IE 6. When I was looking for something in this space a few years ago to build Insight Maker, it was the only thing that was flexible enough for my needs.
[1] MxGraph - http://www.jgraph.com/mxgraph.html [2] Insight Maker - http://InsightMaker.com
It really is a top notch diagramming library for JavaScript. It is very customizable and they support it back all they way to IE 6. When I was looking for something in this space a few years ago to build Insight Maker, it was the only thing that was flexible enough for my needs.
[1] MxGraph - http://www.jgraph.com/mxgraph.html [2] Insight Maker - http://InsightMaker.com
Very nice, lots of symbols. I was going to ask if it could do electronic schematics and block diagrams, but then I noticed the "More shapes" menu.
Looks like a much more powerful tool than the equivalent (free) version of Lucid Charts that others are evangelizing.
Looks like a much more powerful tool than the equivalent (free) version of Lucid Charts that others are evangelizing.
Very nice for electric/electronic/logic diagrams!
Is there a way to connect elements (logic gates, transistors, etc.) inputs to outputs with auto-routing wires?
Is there a way to connect elements (logic gates, transistors, etc.) inputs to outputs with auto-routing wires?
draw.io started life as one of the examples for mxGraph [1] and we've got a pile of stubly different behaviours available, it's just extremely tricky to expose any great number of without making the UI crap.
Do you mean something like [2]?
[1] http://jgraph.github.io/mxgraph/javascript/index.html
[2] http://jgraph.github.io/mxgraph/javascript/examples/wires.ht...
Do you mean something like [2]?
[1] http://jgraph.github.io/mxgraph/javascript/index.html
[2] http://jgraph.github.io/mxgraph/javascript/examples/wires.ht...
I noticed the logic gates are mislabeled - "or" is called "exclusive or" and "and" is called "or".
Like https://www.circuitlab.com/ ? (Developer)
How's your block diagramming compared to theirs? draw.io caught my eye because I occasionally need to do stuff like this ( http://i.imgur.com/xs5gyDe.png ). I normally use SmartDraw, which isn't free, and draw.io looks like an interesting alternative.
CircuitLab looks more like a (nicely done!) online version of LTSpice, which wouldn't be as well-suited for block diagrams.
CircuitLab looks more like a (nicely done!) online version of LTSpice, which wouldn't be as well-suited for block diagrams.
This is cool.
Unfortunately I think it miss something important: the way to change the rendering style (see for instance http://www.websequencediagrams.com/ ).
Such aesthetic feature is significant IMO,.. I tend to always make my schema myself with Inkscape because most software missed that "post-processing" touch.
Such aesthetic feature is significant IMO,.. I tend to always make my schema myself with Inkscape because most software missed that "post-processing" touch.
We did a theming option (i.e. one click to style everything), but removed it. It has been mentioned a lot, we'll stick it back in.
You can export to SVG and "post-process" into Inkscape, don't you?
Feature request: do not place selected items in the top-left corner as soon as they are selected.
Select the shape, and then place it with a click (is like most diagram software works, and as people is used too).
Select the shape, and then place it with a click (is like most diagram software works, and as people is used too).
You can drag them out of the toolbox directly to the position you'd like.
Holding the mouse down is needless strain on the hand. I don't do much drawing on the computer but when I do my mouse hand can start hurting after 15 minutes. Any little bit of relief is welcome. Both methods can be supported at the same time.
I agree. I think so many people are used to drawing programs that work this way (Photoshop, Illustrator, all the way back to MacDraw), that it would be nice to at least have it be a preferences option or something.
However, that's more for the basic geometric shapes. For the more template-like shapes (iPhone screen, etc.) creating it first makes more sense.
However, that's more for the basic geometric shapes. For the more template-like shapes (iPhone screen, etc.) creating it first makes more sense.
For simple UML diagrams, I really like http://yuml.me/. It has a simple textual notation, very easy and quick to use and the diagrams looks pretty neat.
I love yUML, and implemented a tool to generate yUML code from objective-c. https://github.com/darkFunction/DFGrok
Just to clarify: I am not the creator of this app, just came across it while searching how to create simple diagrams and thought it might be helpful sharing it.
Is it weird that the first thing I thought when I opened this up was
"Woah.. this looks like Google"
"Woah.. this looks like Google"
No, we straight out ripped off the Google Docs LAF. And yes, we went to lengths to ask permission from a lot of Googlers.
The idea with draw.io isn't too be innovative in certain areas, this is one of them. To create a completely free tool we have to be brutal as to where to apply resources.
The idea with draw.io isn't too be innovative in certain areas, this is one of them. To create a completely free tool we have to be brutal as to where to apply resources.
Whoa, first time I see a TLA for http://en.wikipedia.org/wiki/Look_and_feel! I guess that just proves I'm not a designer. :) This is looking good, so good call in that ripping.
We just came across this a few days ago and evaluated its use for a new project. Instead for our needs we're moving forward with http://www.mindmup.com
Certainly they're not directly comparable, as mindmup is a mindmapping tool, but depending what you're attempting to diagram and what your needs are, mindmup so far seems pretty awesome - all the front-end and back-end code is MIT licensed in github which was a huge plus.
Any chance you looked at Mind Meister (www.mindmeister.com)?
If so, was wondering if you found any big differences in functionality/features over mindmup.
If so, was wondering if you found any big differences in functionality/features over mindmup.
Awesome -- finally an online (supposedly free) alternative to Gliffy!
When i look at the price for licensing mxGraph, i did not think that it will be free forever.
Or possible they will add some Pro-Function to draw.io.
No, it's been free since 2010 and will stay that way. It's our primary marketing tool for the underlying library.
I use visio a lot , and this actually seems to hit a lot of the points I like about visio (namely not being way too frustrating to use like dia is).
Absolutely need keyboard shortcuts though
Absolutely need keyboard shortcuts though
Nice to see Draw.io using our API for images :-)
And superb service it is too, the 301 to https did catch us out though.
Top idea we've had for a feature is the ability to include our own icons in the global search, but with priority.
Alternatively, we could just add them to your system :).
Top idea we've had for a feature is the ability to include our own icons in the global search, but with priority.
Alternatively, we could just add them to your system :).
What is the UI library (for menu, toolbar, accordion..) being used here? I tried to look into source, couldn't figure out.
The diagramming part and UI around it are all written from scratch. When third-party libraries enter our bar, the music stops, everyone looks round and reaches for their weapons.
Based on a couple of your templates, you've really blown me away with the number of objects this thing can handle on the page at once. I think it's performance is probably as good or better than a couple other programs I won't name right now.
Thank you for the info! Was searching for an online tool draw mockups and schema diagrams.
Does anyone know of a good tool for drawing UML diagrams?
I run Linux on my desktop/laptop; so any Linux app, or browser (chrome/firefox) app would be good. Not requiring constant connectivity would be a plus.
I run Linux on my desktop/laptop; so any Linux app, or browser (chrome/firefox) app would be good. Not requiring constant connectivity would be a plus.
You could checkout Sketchboard to sketch UML, https://sketchboard.me. Though that requires constant connectivity due to realtime collaboration. I am author of the tool.
Feature Request: textural search for shapes
sumo.fm used to be my go to solution for drawing online. This is simpler! Sometimes simple works!
This is pretty cool. I like t ad use it since July. I would like to say kudos to author.
draw.io is by far the best web-based diagramming app IMO. I use it frequently.
[deleted]
This is a great idea, but Lucid Charts is available as a Google App in Chrome and is MUCH more polished than this.
You can only get 60 elements on a page in the free edition, but after months of using it I finally had a diagram hit that limit.
You can only get 60 elements on a page in the free edition, but after months of using it I finally had a diagram hit that limit.
Currently in progress are improved PDF export using PhantomJS to do SVG->PDF, first beta of the Visio importer and a Chrome Packaged App of it.
Feature requests always welcome, but here [1] please.
[1] https://jgraph.freshdesk.com/categories/27298/forums/107935