Gliffy is an online tool for creating all sorts of diagrams, charts, plans, wireframe mockups and the like. This Flash-based RIA offers a slew of tools that make it easy to create any kind of visualization using their online interface and subsequently allows you to export it in a number of formats.
While Gliffy is a subscription-based service, they offer a free “Basic” version of the application that allows one to create up to 5 public diagrams and upload up to 2MB of images. The diagramming features provided are the same as for those with “Premium” accounts though.
The Gliffy UI
Gliffy offers a familiar UI with panels on the right and left of the interface, menu along the top-left of the interface, a toolbar and a tab bar for loading multiple projects at the same time.
On loading Gliffy, depending on whether you are logged in or not, you will see a dialog that allows you to pick one from many of their ready-made templates. However these aren’t really templates, but more like sample documents that you may use as a guide while making your own project.
The panel on the left of the interface is the library of objects that can be used in your projects. The library is quite extensive since it offers item for creating anything from a UML diagram for modelling class hierarchies, to Venn diagrams to floor-plans for houses.
The panels have an border with an arrow, and you may expect it serves to collapse the panel, however it instead offers a way to freely resize the panels.
There are no different modes for creating different types of diagrams, the entire library is available regardless of the kind of diagram you are creating. However the library panel uses an accordion UI, such that only items from a particular class of objects is visible at a time. Within each category of library objects is further subdivision of object types. For example, the flowchart objects offer the boxes with two skins, the “User Interface” category has further subcategories for “Forms and Components”, “Content” and “Miscellaneous”.
 |
 |
There is an additional option to hide some of the categories from the library panel via “manage library” button. This way you can focus on a subset of the library objects if the the others are irrelevant to the project at hand.
The panel on the right is the properties panel that displays the properties of the selected object, or if no item is selected, the properties of the document itself. For objects that contain text, you can set the properties of the object by selecting the object, and can select the text area(s) inside the object by double-clicking them directly.
The toolbar across the top offers a number of generic tools and objects that can come in handy with any kind of composition. These include tools for panning and zooming the interface, and moving shaped to the front or back. Additionally it has tools for adding text, adding an ellipse or rectangle, drawing connectors between shapes, and drawing lines.
In the center of it all of course is the canvas. The default canvas is a large scrollable area of 5000×5000 pixels, so you are unlikely to run out of space.
Working with objects
Gliffy uses a drag and drop approach to composing diagrams. While one might expect that clicking on an item in the library will allow one to draw that shape on the canvas, this is not the case. You need to drag and drop items in the library to the canvas to add them to your diagram.
After you do so the object directly goes into editing mode, allowing for quick entry of some text.
Subsequently objects can be resized, rotated and otherwise manipulated by selecting them and using the resize and rotate handles.
Once nice thing about this mechanism is that it provides constant feedback about the parameters being manipulated. So as you move an object on the canvas, you will see its x and y ordinates change. This way you can be sure objects are aligned even if they are not all not in view at the same time. Similarly while resizing you get feedback about the current dimensions of the object and while rotating you get the angle of rotation.
 |
 |
 |
| Moving an object (coordinates visible) |
Resizing an object (dimensions visible) |
Rotating an object (Angle of rotation visible) |
Creating connectors is also quite simple. When you select the connector tool, a number of locations around objects on the canvas get marked with plus signs. These are hotspots that the connector can snap to making it easier to construct flowcharts and connected diagrams. The lines themselves can be of different types arrows, dotted, slashed etc. Freeform lines can also be drawn that don’t connect to an objects in particular.
Like any desktop application, Gliffy has a few important context menu options. When clicking on the canvas one can see an option to paste copied objects or to zoom the canvas to different levels (or to fit objects to the screen).
Object context menus allow cut / copy / paste operations and options to lock the shape or move it to back / front. If you multiple objects are selected you can even group them.
Sharing, Exporting and Collaboration
Being an online application, it is almost customary to offer some kind of option for sharing content you create. If you’ve created a public document, you can publish it to get a number of links for your project as an image or web page. An embeddable viewer code is also available.
For premium customers, it is also possible to keep a document private. However it is possible to collaborate on a document with others in which case they will be to edit it as well.
Since Gliffy uses versioning, it is possible to easily roll back on changes made by yourself or others.
While the usual JPEG, and PNG options for exporting documents are available, it is also possible to save documents as SVG, a standard format for vector graphics, that will offer better edit-ability than the other raster formats. Gliffy’s own XML based format is also available as a candidate for exporting documents. It unlikely to be supported by other tools, however it does offer a way to backup a Gliffy project such that it can be imported back without loss of information.
Conclusion
In addition to a rich interface Gliffy offers good integration with existing solutions. It is available as a Google Apps add-on such that it can be added as a tool to your Google Apps account. There are versions of Gliffy available that integrate with JIRA or the Confluence Enterprise Wiki and store Gliffy’s data withing JIRA and Confluence themselves respectively.
Overall Gliffy is a very polished solution for diagramming and a one that can be integrated with existing solutions. Thanks to an API it is possible for developers to integrate it with custom solutions of their own.
It doesn’t depart much from the UI for a normal desktop application and its visual indicators make it quite clear how to perform any task you may need to. It uses conventions such as application menus, context menus, and drag-drop. Unfortunately, some interaction such as scrolling using the mouse scroller and zooming with the mouse scroller are not supported. Gliffy is a fast performer, and dragging the canvas feels “light” and lag-free despite being a 5000×5000 pixel area. The application manages to be powerful while still being easy to use.
You can try out Gliffy from it’s website: https://www.gliffy.com/
Additionally, Gliffy is available on the Google Chrome Web Store, so if you use the Google Chrome browser you can install it from there.