Lately, I have been testing Gliffy, a service that lets you create diagrams and flow charts online. I applied to beta test months ago and have been excited about it because flow charts, wireframes, and basic diagrams usually are created offline with expensive applications, but Gliffy offers the same basic functionality online using Flash. Not only that but Gliffy is also a collaborative application letting you create a diagram, share it with others, work on it together, and publish when complete. So, I’ve put it to the test, attempted to duplicate some flow charts I’ve come across online, and found that it accomplishes the task of creating diagrams very easily with great results.

First off, I have tested Gliffy by trying to recreate some diagrams that I’ve come across online. The diagram in the above screenshot is my attempted recreation of Poocs.net - The Adventures of Scaling diagram. It appeared to be a nice diagram to try making with Gliffy, so I gave it a shot.

Above is a screenshot of the Gliffy interface. Everything is entirely web-based and built using Flash so you can access and create diagrams anytime, anywhere. I was found it great how the look and feel of the interface is much like a normal offline application, making it very easy for one to get comfortable working with Gliffy. Along the top is the menu and tool selection, on the left are shape and symbol selections that you can use when creating a diagram, and on the right is your properties palette where you can change various options for specific objects and revision selection to view previous versions of a diagram. But the most important area, of course, is the workspace where you create the diagram itself.

Creating a diagram is very simple with Gliffy because of the preset symbols and drag and drop functionality. First, you specify the size of the document in the properties. You can add a background color and activate the grid as well, which helps you line up the objects in the diagram. Next, just click and drag a symbol on the left into the workspace. You can now select it, resize, add a border, drop shadow, background color, and even gradients to the symbol, much like your basic flow chart application. Then add some text using the text tool on the top. Next, just to give you an idea, you can select all the elements on the page and copy/paste to duplicate it. Place them near the other symbol and then select the connector tool, which is the icon on the top that has two points on the ends of a jagged line. You will see that corners will appear on the symbols and you can now click on one corner and draw a line to the other symbol, making a direct connection of the two. Congratulations, you’ve now got a two symbol diagram.

Now, maybe you want to get additional users working with you on a diagram. Simply select Share and then Collaborate from the top menu and send an invite to your friends that you would like to help with the diagram. As they make changes and save, you will see revisions to appear on the right column of Gliffy. You can select each revision, see who made the changes, and go back to any revision at any time if you wanted to start over on a past version. Once you and your collaborators have finished the diagram, publish it. Publishing will actually save your diagram as an image that you can easily pass to your friends. Although I have found that publishing isn’t the best in quality, it does work and allows for multiple shapes and sizes. Also, when using the dynamic url for the published image, any time a diagram is updated, the image will update as well. To get an example of a published diagram, you may take a look at the published test diagram I worked on.

Overall, Gliffy was not only very helpful for creating diagrams, but I also found it being a lot of fun to use. You get all of your basic functionality that you would in an offline diagram application but with a few extra bonuses like working online collaboratively and dynamic publishing of diagrams. I did run into some issues at times with modifying symbols and I also woudl like to see the connector tool allowing smooth diagonals instead of only straight lines because at times, the lines overlap and get mixed around a bit. For the most part though, everything functioned well and I was able to create some great diagrams and flow charts.

Be sure to checkout the Examples section at the Gliffy website to see what you can accomplish. Some of the diagrams are quite impressive like the above floor plan diagram.

View Gliffy - Draw and Share Diagrams Online.