What one thing does this app need for you to dump Visio for it?(diagram.ly)
diagram.ly
What one thing does this app need for you to dump Visio for it?
http://diagram.ly/
20 comments
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.
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...
Yup, good idea. Startup screen will contain explaination of basics in next release.
Ok...
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.
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 and edge loops, both very good, moved up the todo list.
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.
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 :).
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.
Apart from that, this app is really awesome. I also like how it automatically choses my language.
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.
.
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.
.
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.
Do you have a link to examples of these stencil sets?
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.
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.
I'm not sure if this is technically possible, but an import/export to Visios format would be killer
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.
Nice work!
Nice work!
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
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
This is a very good app. Will you support multi-user editing too?
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.
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.
I've clicked nearly everything and mashed the keyboard and haven't been able to create any image. I must be thick.
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...
Yeah, I think a splash screen explaining the basic would solve 90% of issues like this.
Ability to handle LaTeX would be useful (at least for my possibly twisted needs :) )
That really is twisted. What exactly would that involve?
Reverse engineering database diagrams (which Visio Pro can do via an ODBC driver)
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.
[deleted]
[deleted](1)
if it had UML or database shapes that supported additional attributes that would be really nice. I would pay for something like that.
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?
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.
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.
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 :).
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 :).
[deleted]
Don't see an option to actually display the grid (minor point but I kind of like it).