6 ms·

Create diagrams in the browser

237 points by gpsarakis 13y ago

ananth99 13y ago
Thank you for the info! Was searching for an online tool draw mockups and schema diagrams.
frozenport 13y ago
Feature Request: textural search for shapes
scottfr 13y ago
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 http://www.jgraph.com/mxgraph.html [2] Insight Maker - http://InsightMaker.com http://InsightMaker.com
deleted 13y ago
[deleted]
zenocon 13y ago
Awesome -- finally an online (supposedly free) alternative to Gliffy!
- progx 13y ago
  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.
  - davidjgraph 13y ago
    No, it's been free since 2010 and will stay that way. It's our primary marketing tool for the underlying library.
alistair3408 13y ago
Would recommend LucidChart over this unfortunately.
lessnonymous 13y ago
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.
nadaviv 13y ago
For simple UML diagrams, I really like http://yuml.me/ http://yuml.me/. It has a simple textual notation, very easy and quick to use and the diagrams looks pretty neat.
- darkFunction 13y ago
  I love yUML, and implemented a tool to generate yUML code from objective-c. https://github.com/darkFunction/DFGrok https://github.com/darkFunction/DFGrok
gren 13y ago
This is cool. Unfortunately I think it miss something important: the way to change the rendering style (see for instance http://www.websequencediagrams.com/ 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.
- Squonk42 13y ago
  You can export to SVG and "post-process" into Inkscape, don't you?
- davidjgraph 13y ago
  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.
gpsarakis 13y ago
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.
CamperBob2 13y ago
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.
- Squonk42 13y ago
  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?
  - davidjgraph 13y ago
    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 http://jgraph.github.io/mxgraph/javascript/index.html [2] http://jgraph.github.io/mxgraph/javascript/examples/wires.html http://jgraph.github.io/mxgraph/javascript/examples/wires.ht...
  - kens 13y ago
    I noticed the logic gates are mislabeled - "or" is called "exclusive or" and "and" is called "or".
- compumike 13y ago
  Like https://www.circuitlab.com/ https://www.circuitlab.com/ ? (Developer)
  - CamperBob2 13y ago
    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 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.
txutxu 13y ago
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).
- ChrisClark 13y ago
  You can drag them out of the toolbox directly to the position you'd like.
  - jasonkostempski 13y ago
    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.
- crazygringo 13y ago
  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.
Technomaniacz 13y ago
sumo.fm used to be my go to solution for drawing online. This is simpler! Sometimes simple works!
truncate 13y ago
What is the UI library (for menu, toolbar, accordion..) being used here? I tried to look into source, couldn't figure out.
- davidjgraph 13y ago
  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.
davidjgraph 13y ago
While we're getting free publicity, I'd just like to point out the Dropbox integrated version we launched this month https://db.draw.io https://db.draw.io. The www site can either be launched stand-alone or link up with your Google Drive. The db sub-domain is the same idea with Dropbox. 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 https://jgraph.freshdesk.com/categories/27298/forums/107935
- jnardiello 13y ago
  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.
- gpsarakis 13y ago
  Nice to know about the Dropbox integration. Really good work, keep it up!
LogicX 13y ago
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 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.
- F_J_H 13y ago
  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.
Lily23 13y ago
just as Jeremy implied I am impressed that you can get paid $7702 in 4 weeks on the internet. Read Full Article ............ http://bit.ly/1aL7N9L http://bit.ly/1aL7N9L Open HOME tab for more details
rtpg 13y ago
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
Navarr 13y ago
Is it weird that the first thing I thought when I opened this up was "Woah.. this looks like Google"
- davidjgraph 13y ago
  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.
  - unwind 13y ago
    Whoa, first time I see a TLA for http://en.wikipedia.org/wiki/Look_and_feel 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.
iconfinder 13y ago
Nice to see Draw.io using our API for images :-)
- davidjgraph 13y ago
  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 :).
aboodman 13y ago
draw.io is by far the best web-based diagramming app IMO. I use it frequently.
michaelbuddy 13y ago
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.
winter_blue 13y ago
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.
- saiki 13y ago
  You could checkout Sketchboard to sketch UML, https://sketchboard.me https://sketchboard.me. Though that requires constant connectivity due to realtime collaboration. I am author of the tool.
NemesorZandrak 13y ago
This is pretty cool. I like t ad use it since July. I would like to say kudos to author.

237 points by gpsarakis 13y ago

ananth99 13y ago

Thank you for the info! Was searching for an online tool draw mockups and schema diagrams.

frozenport 13y ago

Feature Request: textural search for shapes

scottfr 13y ago

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 http://www.jgraph.com/mxgraph.html [2] Insight Maker - http://InsightMaker.com http://InsightMaker.com

deleted 13y ago

[deleted]

zenocon 13y ago

Awesome -- finally an online (supposedly free) alternative to Gliffy!

progx 13y ago
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.
- davidjgraph 13y ago
  No, it's been free since 2010 and will stay that way. It's our primary marketing tool for the underlying library.

alistair3408 13y ago

Would recommend LucidChart over this unfortunately.

lessnonymous 13y ago

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.

nadaviv 13y ago

For simple UML diagrams, I really like http://yuml.me/ http://yuml.me/. It has a simple textual notation, very easy and quick to use and the diagrams looks pretty neat.

darkFunction 13y ago
I love yUML, and implemented a tool to generate yUML code from objective-c. https://github.com/darkFunction/DFGrok https://github.com/darkFunction/DFGrok

gren 13y ago

This is cool. Unfortunately I think it miss something important: the way to change the rendering style (see for instance http://www.websequencediagrams.com/ 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.

Squonk42 13y ago
You can export to SVG and "post-process" into Inkscape, don't you?
davidjgraph 13y ago
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.

gpsarakis 13y ago

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.

CamperBob2 13y ago

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.

Squonk42 13y ago
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?
- davidjgraph 13y ago
  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 http://jgraph.github.io/mxgraph/javascript/index.html [2] http://jgraph.github.io/mxgraph/javascript/examples/wires.html http://jgraph.github.io/mxgraph/javascript/examples/wires.ht...
- kens 13y ago
  I noticed the logic gates are mislabeled - "or" is called "exclusive or" and "and" is called "or".
compumike 13y ago
Like https://www.circuitlab.com/ https://www.circuitlab.com/ ? (Developer)
- CamperBob2 13y ago
  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 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.

txutxu 13y ago

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

ChrisClark 13y ago
You can drag them out of the toolbox directly to the position you'd like.
- jasonkostempski 13y ago
  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.
crazygringo 13y ago
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.

Technomaniacz 13y ago

sumo.fm used to be my go to solution for drawing online. This is simpler! Sometimes simple works!

truncate 13y ago

What is the UI library (for menu, toolbar, accordion..) being used here? I tried to look into source, couldn't figure out.

davidjgraph 13y ago
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.

davidjgraph 13y ago

While we're getting free publicity, I'd just like to point out the Dropbox integrated version we launched this month https://db.draw.io https://db.draw.io. The www site can either be launched stand-alone or link up with your Google Drive. The db sub-domain is the same idea with Dropbox. 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 https://jgraph.freshdesk.com/categories/27298/forums/107935

jnardiello 13y ago
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.
gpsarakis 13y ago
Nice to know about the Dropbox integration. Really good work, keep it up!

LogicX 13y ago

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

F_J_H 13y ago
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.

Lily23 13y ago

just as Jeremy implied I am impressed that you can get paid $7702 in 4 weeks on the internet. Read Full Article ............ http://bit.ly/1aL7N9L http://bit.ly/1aL7N9L Open HOME tab for more details

rtpg 13y ago

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

Navarr 13y ago

Is it weird that the first thing I thought when I opened this up was "Woah.. this looks like Google"

davidjgraph 13y ago
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.
- unwind 13y ago
  Whoa, first time I see a TLA for http://en.wikipedia.org/wiki/Look_and_feel 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.

iconfinder 13y ago

Nice to see Draw.io using our API for images :-)

davidjgraph 13y ago
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 :).

aboodman 13y ago

draw.io is by far the best web-based diagramming app IMO. I use it frequently.

michaelbuddy 13y ago

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.

winter_blue 13y ago

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.

saiki 13y ago
You could checkout Sketchboard to sketch UML, https://sketchboard.me https://sketchboard.me. Though that requires constant connectivity due to realtime collaboration. I am author of the tool.

NemesorZandrak 13y ago

This is pretty cool. I like t ad use it since July. I would like to say kudos to author.