
Digramly - build diagrams online with great ease for free - zerop
http://www.diagram.ly/
======
ajb
Cute. Spent a bit of time trying to figure out how to get an arrow: It's not
obvious that you need to drag to get an arrow object, because if you just
click without dragging, all the other objects will create a new instance at
top left. I started out assuming that the UI would be select the object, then
click to make a new instance where you wanted it. So, once an object appeared,
I thought the intended UI was, click to get object, move it to where you
wanted. I think you need to either not create a new object unless the user
does drag, so they understand that something more is required (which is how
visio seems to do it) or make 'new instance at top left' work for all objects.

~~~
jrlatent
'Cute' is the right word for this -- it lacks basic functionality. I've been
using <http://www.lucidchart.com> for a while which is an amazing browser-
based experience.

~~~
rollypolly
Have you tried this one?

<http://www.gliffy.com/>

~~~
K2h
That requires flash

------
vasco
This is the easiest and best way I've ever found to draw electrical circuits.
Oh my god. So much components. I'm shaking in happiness for all the time I
won't have to waste trying to fight inkscape & friends. (Not even mentioning
latex packages to do this)

~~~
web_chops
Circuit lab (<https://www.circuitlab.com/>) is pretty good too.

~~~
compumike
(Note: I'm a developer of CircuitLab.) It used to surprise me to see just how
common it was for people to use general-purpose drawing/diagramming tools for
electronics. In fact, Inkscape plus copy+paste is the de-facto schematic tool
of choice for the Wikipedia project:
[https://en.wikipedia.org/wiki/Wikipedia:WikiProject_Electron...](https://en.wikipedia.org/wiki/Wikipedia:WikiProject_Electronics#Drawing_circuits)
! Nothing against Inkscape -- in fact, Inkscape is what we use to prepare
symbols for insertion into CircuitLab -- but it really says something about
how painful a lot of electronics-specific software must be that users will
jump to general purpose vector drawing tools instead.

~~~
jacobolus
Feature request: hold down the space bar to get a drag cursor that moves the
whole workspace around. (And ideally also hold spacebar + cmd to get a zoom in
cursor, spacebar + option for a zoom our cursor.) These controls are used by
every Adobe app (and have been widely adopted by other drawing/graphics
software) and they’re amazingly useful, because they make it lightning fast to
alternate between moving around the canvas and doing whatever else.

~~~
compumike
We've currently got Ctrl+Drag (or Cmd+Drag on OS X) for panning around the
workspace, and the mouse wheel up/down is mapped to zooming in/out. (Probably
need to better document these somewhere!) Compatibility with other
keyboard/mouse conventions is something I will pass on to the UI team.

Agree about "amazingly useful ... lightning fast" to switch between modes --
we just added a keyboard shortcut for re-running the last simulation, just so
we could eliminate the burden of explicit mode switching between schematic
capture and simulation.

------
jpalomaki
It would be nice to have "gist" like functionality. Users could embed the
diagrams to their blogs, others could fork their own copies.

------
johnnyg
This tool badly needs to generate a URL along that top that when shared loads
the diagram I just created...

~~~
davidjgraph
We've integrated it with Google Drive, so you can now share the document via
that.

------
rvavruch
Will give this a go next time. I have been using Lucidchart
<http://www.lucidchart.com/> which is one of the better diagramming tools I've
tried.

------
lsiebert
For future readers: Mentioned diagramming programs/apps

<http://www.diagram.ly> (based on mxGraph, a javascript lib)

<http://www.lucidchart.com/>

<http://www.gliffy.com/> (requires flash)

<https://www.circuitlab.com/>

<http://www.umlet.com/> (download)

<http://www.flowchart.com>

<http://docs.google.com> (drawings not diagrams)

gojs.net (still in private alpha)

I'd add that I've tried:

<http://www.lovelycharts.com>

<http://www.cacoo.com> (flash)

------
bsinger
This is one of the nicest browser-based drawing tools I've seen. While I can't
see it replacing Inkscape for most of my work, the ability to edit the mxGraph
markup is super cool, along with the SVG export option.

------
psawaya
I like this! I tried to bookmark it with Cmd+D, and noticed you trapped that
keyboard event for the duplicate function. It might be better to use shift
instead of meta to avoid colliding with copy, paste, etc.

------
LeafStorm
I am actually looking for a decent UML editor. So I create a class, click it,
expecting to get at the very least a couple of text areas labeled "Methods"
and "Fields." Instead, I get a WYSIWYG editor that looks like it came out of
the early 2000's. My immediate reaction was to jump back and shout "DAAAAAA!"
(I am not joking about that.)

Now, obviously I don't know exactly what your target audience for this is. But
in general, my experience is that if you provide a WYSIWYG editor, the users
will do horrible, horrible things to your content. They are usually prone to
glitching out in addition. And more specifically, for editing UML, a WYSIWYG
editor is just about worthless - it provides no structure to the data, and it
makes it incredibly easy to bork up the structure of the class. (Also, the
editor doesn't really mesh with your site's design very well.)

So, my advice would be to provide a bit more structure to the content of
individual diagram elements (at the very least, separate text boxes for Name,
Methods, and Fields in a UML class), and find a less obtrusive WYSIWYG editor
if you decide to continue going down that route.

~~~
radiowave
OTOH, I found adding properties and methods using the text editor to be much
quicker than the clicking/tabbing around in a dialog box which is the way it's
done in UML editors I've used. So I don't know what the right balance is.

What killed it for me, for UML, is that the properties and methods don't have
their own connector points for attaching an arrow to.

------
ahy1
I have to say that this is the easiest diagramming tool I have ever used. I am
impressed!

------
bestest
Interesting. There's no Facebook 'like' button, but there are Google Plus and
Twitter social networking widgets. Is this some kind of a transparent
statement or a rebellious move against Facebook as a non technical target
audience? ;]

~~~
davidjgraph
Neither of us that write diagramly have a facebook account, although we do
sometimes wish we had one so every person we know could invite us to take
their "10 questions about your rabbit" quiz. We're too old and out of date to
use this modern technology, it just gets us flustered.

------
veyron
The service is called 'Diagramly' not 'Digramly'

------
mojuba
Neat and very easy to use. This tool made me hate diagrams a bit less ;)

Obviously this is a missing component in Google Docs (and even done in the
same spirit). Good chance Google will acquire this... or build their own.

~~~
tuxychandru
Google docs does have drawing tools. Insert > Drawing...

~~~
mojuba
Except Google's Drawing is a simple drawing, not a diagram.

------
leeoniya
this is pretty sweet.

a feature that i have yet to see anywhere (which would be trivial to add,
btw), is labeling the actual connection endoints, like with IP or MAC
addresses in network diagrams.

also something that probably needs to be implemented in the mxGraph lib is
obstacle avoidance during connection routing, so that routes don't run into or
under other objects, this is non-trivial.

bonus would be allowing a connection re-route only to specific "alternate"
endpoints or ones that match some definable ruleset when a block is moved
around on the diagram.

------
blvr
A few things that would make me use this:

\- Shapes for user interface widgets (windows, buttons, text fields, etc.) for
desktop and mobile

\- A way to easily share my diagrams via a url (could be as easy as generating
a url in the form of <http://www.diagram.ly/?diagram=[hash> of the xml])

\- Direct uploading of exported images to a image sharing website (e.g.
imgur). Although you might be able to generate a little revenue by hosting
them yourself and serving them up alongside an ad?

------
dedene
Amazing tool! Well done :) Which company is behind this?

~~~
sashametro
Given that it is "powered by mxGraph," which is a product of jGraph, that
would seem to be the company.

------
K2h
Very very nice.

One observation, on the export it looked like it was trimming the result and
not including the entire lines. I had two circle shapes, one over the other
and at export it clipped the top of the top shape, and bottom from bottom.
Almost like the math is calculating from the center of the line shape and
forgot to account for the line thickness when calculating export cropping.

Thanks for making this tool.

------
alanbyrne
That is great, well done! I'll be using this a fair bit!

A thing that annoyed me, when I double clicked an object to type text it, it
seemed to type the text at the top, rather than the middle of the object. Once
I was done editing, it popped to the middle. Not a big deal, but the only
negative thing I could find!

------
lsiebert
Hmm... I might be able to us this for doing programming structure charts. I've
unfortunately yet to find a program or app that has all the things I want with
WYSWYG, much less groups them, but this has most of them.

Would love the ability to upload my own vectors for use, and to create a
custom group of vectors.

------
web_chops
Nice work.. I didn't expect it to be so responsive. Almost feels like using a
desktop application.

------
Karunamon
Impressive! I especially like the image search and how it jumps right into the
app without any preliminaries like a signup page or a plea for cash.

..And it exports in almost every format that matters. I'll definitely be using
this next time I need to put a diagram together.

------
sjs382
I love diagram.ly. I use it all the time to create sitemaps and flow diagrams.
My only complaint is that exporting diagrams doesnt always product the result
you wanted the first time, but it usually just takes some setting tweaks to
get it right.

~~~
davidjgraph
If you contact us at forum.jgraph.com, we'd be interested in the input that
produces the wrong output.

------
sparknlaunch12
Awesome!

May lack some sharing functionality but some really neat objects available and
really easy to user.

~~~
mtrimpe
+1 on the sharing functionality.

It's great that you're just dropped into the editor, but when you actually
cook up a quick little diagram there's nowhere to go but 'Export to' > 'Save
to disk' > 'Open Twitter' > 'Upload & share' ...

------
ww520
Very nicely done. I like how the menu work. Especially how the Open and Save
mapped to browser's upload and download. Excellent work!

------
aespinoza
This is very cool. But then I look at the maker of the Diagram Library and the
cost per license is $7,900 dollars ???

Talk about expensive libraries.

------
SpaceDragon
Very timely, since I'm getting ready to plan out a major project. This is
going to be prominently bookmarked. Thanks!

------
dserodio
I'm missing a simple UML dependency arrow, like the "uses" but without the
text (looks cleaner IMHO).

~~~
davidjgraph
Double click on the edge (or any cell) to edit the text. In this case, just
remove it.

------
nkh
Does anyone know of a library that you could use as a basis to build similar
functionality?

~~~
crazybuddha
\- If you want just drag and drop use jQuery UI.

\- If you want to connect divs use jsPlumb.

\- If you want flowcharts use jsPlumb + jQuery UI. jQuery to drag elements on
to the diagram div and jsPlumb to connect them.

You can achieve almost every thing what ever is being done here. I have used
it personally to create something very similar. jsPlumb is MIT License, so you
don't have worry about any thing.

------
momma-joe
nice, i've been using Flowchart.com which gives me collaboration.

------
daniel_iversen
VERY nice... will try and use that next time, well done!

------
Cieplak
It is very impressive that it works flawlessly in IE7.

------
blahbap
I'm impressed it works well on an IPad - good job!

------
momma-joe
nice, i've been using Flowchart.com which offers real time collaboration too!

------
pcd
It's awesome!! But why is it free? Seems like this is a pretty slick product
that you could be making money off.

Are you hoping to be bought? Are you just trying to help people out? Are you
already rich?

As I said, it's awesome, and I'm going to use it. But I just want to
understand the motivation!

~~~
davidjgraph
We don't like/understand or want to enter the market for selling to end users
(low cost, high volume, high earache, low clue). We sell the underlying
JavaScript diagramming library at higher cost in lower volume and I find the
more developers pay, the more polite they are to deal with.

This is simply the main example application that ships with the library. We
just deploy it on Google App Engine, it does all the availability and
scalability for us. Because it's pretty much entirely client-side, we pay
trivial costs for serving a little static bandwidth and it gives us free
marketing for the library.

So, it will stay fully featured for free and I don't want to pollute it with
ads and you'll be seeing a large number of new features added through this
year. We're also considering open sourcing the diagramly part (not the core
mxGraph, you'll be able to use that hosted Google Maps style) so people can
throw up their own custom diagramly sites.

