Create diagrams in the browser

https://www.draw.io/

by gpsarakis • 13 years ago

237 42 13 years ago

draw.io

ananth99• 13 years ago

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

frozenport• 13 years ago

Feature Request: textural search for shapes

scottfr• 13 years 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 [2] Insight Maker - http://InsightMaker.com

zenocon• 13 years ago

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

progx• 13 years 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.

davidjgraph7• 13 years ago

No, it's been free since 2010 and will stay that way. It's our primary marketing tool for the underlying library.

lessnonymous• 13 years 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• 13 years ago

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.

darkFunction• 13 years ago

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

gren• 13 years 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/ ).

Such aesthetic feature is significant IMO,.. I tend to always make my schema myself with Inkscape because most software missed that "post-processing" touch.

Squonk422• 13 years ago

You can export to SVG and "post-process" into Inkscape, don't you?

davidjgraph7• 13 years 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.

gpsarakis2• 13 years 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.

CamperBob22• 13 years 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.

Squonk422• 13 years 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?

davidjgraph7• 13 years 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

[2] http://jgraph.github.io/mxgraph/javascript/examples/wires.ht...

kens• 13 years ago

I noticed the logic gates are mislabeled - "or" is called "exclusive or" and "and" is called "or".

compumike• 13 years ago

Like https://www.circuitlab.com/ ? (Developer)

CamperBob22• 13 years 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 ). 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• 13 years 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• 13 years ago

You can drag them out of the toolbox directly to the position you'd like.

jasonkostempski• 13 years 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• 13 years 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• 13 years ago

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

truncate• 13 years ago

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

davidjgraph7• 13 years 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.

davidjgraph7• 13 years 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. 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

jnardiello• 13 years 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.

gpsarakis2• 13 years ago

Nice to know about the Dropbox integration. Really good work, keep it up!

LogicX• 13 years 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 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• 13 years 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.

rtpg• 13 years 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• 13 years ago

Is it weird that the first thing I thought when I opened this up was

"Woah.. this looks like Google"

davidjgraph7• 13 years 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• 13 years ago

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.

iconfinder• 13 years ago

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

davidjgraph7• 13 years 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• 13 years ago

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

michaelbuddy• 13 years 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• 13 years 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• 13 years ago

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.

NemesorZandrak• 13 years ago

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

Create diagrams in the browser

Related Stories