This is awesome. I can't think of anything it needs except, for your own sake, maybe a visible logo. I'm sold.
Questions:
(1) Are you using ExtJS, GWT, jQuery?
(2) What's on the backend?
(3) How will you make money from this?
(4) Since your source code is out in the open, do you have the (a) will and (b) resources to sue people in far corners of the world who will simply copy your js file, make a few tweaks and set up a competing business (assuming you have an answer to (3) above)?
Regardless of your answer to (4), I assume the problems inherent in that issue are the same reasons more people don't build businesses on the basis of a client-side js file.
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...).
I might have missed the option, but a way to import additional images / vectors would be nice. Either just an upload or a creative-commons image search. Also, real-time editing with other users would be superb.
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
Connections between shapes aren't obvious. I expect to be able to choose a connection, click and hold the mouse over one shape and drag to another. After 5 minutes, i still can't figure out how to connect shapes. Really nice clean design. I will definitely use this.
I can't figure out how do connections work. It worked twice for me when the connection types dropdown was open. Then it stopped working completely... or maybe I'm doing something different now. Anyways - the connections dropdown doesn't behave like a button (can't leave it pressed after I choose the type). The other connection button doesn't seem to do much either since I can drag items around when it's pressed.
Don't see an option to actually display the grid (minor point but I kind of like 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.
Ok - it works with left button for me... I wonder if it can be made more discoverable though :) or at least shown in some tips at the start, or something similar...
Export to some kind of vector format perhaps? I see it can already save to its own .xml representation, but something like .svg/.eps/.pdf would be great.
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.
Oops, excellent! For some reason I was expecting it to be an option under "save" rather than a separate "export", so missed it. But yeah that's all I need; once it's in SVG, I can convert to other formats via inkscape if needed.
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.
Looks good. One issue is that my intuition was to click on a shape, then click and drag in the middle of the white space in order to add it (like Microsoft autoshapes). Much clicking and double clicking later, I happened across the drag and drop concept you use, but I almost gave up assuming it was a bug.
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.
Where's the UML section? I need UML, I need flow diagrams, and I need to be able to link it to something like JIRA, Confluence or one of those types of products. If you can figure out a way to have whatever I produce hosted on an internal server so that I can link it to other software tools I'd love ya.
Currently, when using Visio, we have to up load, down load, and then recommit any changes. It's slow, frustrating, and makes my skin crawl.
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 :).
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...
In the company I used to work for we started using Atlassian Confluence for all our documentation purposes. Two plugins - Balsamiq Mockups and Gliffy really helped the adoption process of the whole ecosystem.
Your product looks nice, but here are two features that made Gliffy stand out (yes I am aware that the use case is different since one is a plug in and the other is a standalone product), references between diagrams - on one page you would lay out general architecture and comment on it, then on subpages you would work out the details. Gliffy allows the generated inline diagram to link to other pages/diagrams via generated imagemap. Another is UML support - yes UML sucks, but comes handy now and then.
And there is one more "feature" request that EVERYBODY working on this kind of tooling forgets about. When you draw a complex diagram, line connectors form spaghetti nightmare - its hard to see what goes where. So there would be two options - create loops where wire is passing over a wire (like in EC diagrams) or you could introduce nodes that would be used when wires are supposed to form a crossed node.
So my advice would be look into integrating this thing into some existing frameworks/extensible products.
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.
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?
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.
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.
I use Visio for drafting home renovation plans. It isn't the easiest tool to use for this purpose but the results are good enough to save me the expense of hiring an architect, and the city government hasn't complained. So a set of primitives for architecture would be appreciated and might get me to move off Visio. Related to the architecture primitives, a set of furniture and cabinetry primitives would also help, as they help to visualize how reasonable a building design may be.
When I try "furniture placement" on images.google.com I get a wide variety of levels of drawing fidelity, so I don't think I can recommend any particular one.
Have you considered file storage in the cloud? I note that some services like chart.ly are becoming very popular for sharing compelling visuals.
On a similar note, are you sure you want to use the Drawing1.xml as the default bookmark text? I don't know if that will help me remember the site a year from now. But diagram.ly/myusername/mydrawingname would be cool.
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.
45 comments
[ 5.4 ms ] story [ 131 ms ] threadQuestions:
(1) Are you using ExtJS, GWT, jQuery?
(2) What's on the backend?
(3) How will you make money from this?
(4) Since your source code is out in the open, do you have the (a) will and (b) resources to sue people in far corners of the world who will simply copy your js file, make a few tweaks and set up a competing business (assuming you have an answer to (3) above)?
Regardless of your answer to (4), I assume the problems inherent in that issue are the same reasons more people don't build businesses on the basis of a client-side js file.
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 :).
Nice work!
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
Don't see an option to actually display the grid (minor point but I kind of like 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.
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.
.
Currently, when using Visio, we have to up load, down load, and then recommit any changes. It's slow, frustrating, and makes my skin crawl.
Apart from that, this app is really awesome. I also like how it automatically choses my language.
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 :).
In the company I used to work for we started using Atlassian Confluence for all our documentation purposes. Two plugins - Balsamiq Mockups and Gliffy really helped the adoption process of the whole ecosystem.
Your product looks nice, but here are two features that made Gliffy stand out (yes I am aware that the use case is different since one is a plug in and the other is a standalone product), references between diagrams - on one page you would lay out general architecture and comment on it, then on subpages you would work out the details. Gliffy allows the generated inline diagram to link to other pages/diagrams via generated imagemap. Another is UML support - yes UML sucks, but comes handy now and then.
And there is one more "feature" request that EVERYBODY working on this kind of tooling forgets about. When you draw a complex diagram, line connectors form spaghetti nightmare - its hard to see what goes where. So there would be two options - create loops where wire is passing over a wire (like in EC diagrams) or you could introduce nodes that would be used when wires are supposed to form a crossed node.
So my advice would be look into integrating this thing into some existing frameworks/extensible products.
UML and edge loops, both very good, moved up the todo list.
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.