Digramly - build diagrams online with great ease for free
diagram.ly
diagram.ly
You're describing the UI for drawing/connecting the lines (optionally with arrows) which is very nice. What's strange is that every other shape if you click on it produced an item in the top left which you can drag to the required position and size. But, at least for me, the lines don't do this, you need to drag from the palette onto the screen then drag the ends onto boxes or where you want them. Seems strange to me.
if you define 'painful' to be 'under powered, needlessly complex, and over priced.' then yes.
Single biggest feature asked for an NEVER delivered, 'solid way to export a schematic to web-useful format' (PNG, GIF, JPG, or SVG).
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.
http://www.diagram.ly (based on mxGraph, a javascript lib)
http://www.gliffy.com/ (requires flash)
http://www.umlet.com/ (download)
http://docs.google.com (drawings not diagrams)
gojs.net (still in private alpha)
I'd add that I've tried:
http://www.cacoo.com (flash)
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.
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.
As featured on Fowler's blog a while back: http://martinfowler.com/bliki/UmlAsNotes.html
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.
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.
- 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?
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.
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!
Would love the ability to upload my own vectors for use, and to create a custom group of vectors.
..And it exports in almost every format that matters. I'll definitely be using this next time I need to put a diagram together.
May lack some sharing functionality but some really neat objects available and really easy to user.
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' ...
Talk about expensive libraries.
- 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.
We are also in private alpha for GoJS (gojs.net), which is the same library ported to HTML5 Canvas.
If you are interested in seeing GoJS once it is released as a more public alpha or beta please email me (see profile)
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!
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.