What one thing does this app need for you to dump Visio for it?

If you press and drag the mouse right button out from near the center of any shape, the connection will appear. On the iPad, press and hold on a shape to start it.

Yeah, the grid, we had this discussion yesterday, it's actually "snap", so your shapes snap to a grid without it being visible. But yes, we're going to make the grid visible by default next release.

Thanks for the detailed reply. We're not actually looking to commercialize so unless Atlassian want to integrate (and they have a license for the core drawing component) I don't really want to set off down the charge-for route. I'll talk to Atlassian, see what they say.

UML and edge loops, both very good, moved up the todo list.

OK, UML stencils added to todo list, that shouldn't take long.

The app is just a div, could be placed anywhere, including a wiki. Certainly, worth a look, we give the Confluence folks a free license actually, not sure if they ever used it. Maybe you should give them a nudge :).

I second the request for UML.

Apart from that, this app is really awesome. I also like how it automatically choses my language.

I did some usability testing on the drawing layer that was added to Microsoft Word back in Word 6 -- so around 1992. One study specifically looked at the UI for resizing and moving objects. There were several interesting findings. The most important was that the conventions commonly used (grab objects by solid edges to move them, grab by "grow handles" to resize them) is not very intuitive. When naive users want to move objects, the grow handles seem like plausible candidates to many. And as you noted it often seems reasonable to click and drag in the middle of any region to move an object, though this isn't feasible with some objects. A second finding is that discovery of the "correct" methods is a surprisingly steep curve. Inadvertently resizing objects is frustrating and does not lead easily to deducing better interaction alternatives. It's a surprisingly hard UI problem calling for creative alternatives. On that point the third interesting finding is that creative alternatives may not be well received by design or development teams. At the time I did the testing, we compared results with the UI from Microsoft Publisher. In the Publisher UI the mouse cursor switched to a little moving van when the mouse moved over anything that could be used for dragging. This gave immediate feedback that the grow handles were not intended as a tool for moving objects. Ultimately the Word team decided the moving van didn't look professional enough, despite strong usability results. As an aside, some members of the Excel team resisted the idea of changing the arrow cursor for any reason, but lost to consistency within the Office apps. A fourth finding was that the strong difficulty with discoverability of the drag vs. resize UI that has been implemented for so long is not a function of age, education, or intelligence, though when educated geeks see such dramatic results in the usability lab they may be tempted to jump to these conclusions.

This study is obviously not comprehensive, especially regarding current UIs. I just want to encourage you to consider it an area for potential innovation, one where further study with a sizeable pool of novice users would be worthwhile.

.

Do you have a link to examples of these stencil sets?

Yeah, working on direct access to Google Docs accounts so people can save/load using that. Same for Dropbox, Jungle Disk,etc, will come later. Google Docs proving a bit tricker than we hoped, but we'll get there.

Don't really want to get into us storing the diagrams since we don't want to charge for this. But maybe we could look at storing just the raw XML, that would be pretty cheap on Amazon, even for a lot of diagrams.

Good point with the bookmarking, we want the tab to show the drawing name, but that BM isn't helpful. We'll look it that.

We already have import from Visio, it's going into the next release.

Real-time editing with other users is in development, probably released in 5-6 weeks.

You can technically put your own images in nodes currently, but the UI isn't explicit about how to do it. If you right click on a node, select format->style, the style string of the shape comes up. So pasting in "shape=image;image=http://www.jgraph.com/images/plug-image.png (not the quotes) puts a pretty plug in there.

But yes, you're quite right, we need to expose an easy way to do this on the UI

Yup, it's in development. You'll have a URL shown at the top of the screen that if you share with another user you'll both have each other's edits in real-time. That'll be out by end of March.

7th button from left on top toolbar is export. In the little window that appears offers the option of SVG export. PDF, yeah, working on that. Thing is, we want everything client-side and we have full PDF export in JavaScript except for images with alpha channels (which of course a lot of images have). But certainly PDF export will appear in next few months.

Did you try to select the shape and then click&drag to create it? I tried the same for some time. You have to drag the shape from the sidebar onto the work area. Could be improved probably...

That really is twisted. What exactly would that involve?

We did start a project like this to visualize within phpMyAdmin, but it never finished. You can see it at http://www.jgraph.com/demo/mxgraph/schema.html. It's kind of a semi-schema editor, but would need work on the parsing bit.

Noted

No no no. It's a free web application. We sell the technology to do this separately, that funds this application as our pet project. This is all about the application, which is free and will stay free.

UML coming very soon (seems very popular). There are a few database shapes under networking, do you have an example of which additional database shapes are needed?

Thanks very much.

1) ExtJS for the application bits, but that's only about 500 lines of code at the top. The drawing canvas is 25k lines raw JS using no framework.

2) It's Jetty, but the thing is, we barely need a backend. The whole idea of this was to do it all in the client so we have virtually zero server costs, see this <a href="http://mxgraph.blogspot.com/2011/01/mxgraphcom-business-mode....

3) We don't need to. We make a lot of money selling the drawing component, this is a project more for fun to create an online visio pretty much entirely on the client. We have the component and just thought how easy such an app would be to write and give away for free (storage is local, so doesn't cost us either). What you see took 2 weeks (OK, the component took 5 years...).

4) a) No b) No. Life's too short :).