How Sausage is Made: Developing New UML Features in Gliffy

A few months ago I got a fun and open ended task: Improve the UML use case for Gliffy. This post is about the thought process behind the features we implemented, and how Clint Dickson and I snuck in a bunch of improvements across the entire project (not just UML). Don’t tell the boss.

The Endgame

Below is the mostly finished product. I say mostly because we’re constantly collecting feedback and analytics from users collecting analytics and feedback from users. Because we’re “in the cloud”, we can constantly add tweaks to improve the experience.
These features are now available in Gliffy Online and the Gliffy 6.0 for Confluence plugin.

New UML 2.0 Compliant Shapes

newshapes

UML Cardinality

Any UML line you drag out on to the stage can now have cardinality added with a single click:

blog0

Unlimited Connection Points

You can connect anywhere on the edge of a UML shape:

blog1

Moving Text on a Line

You can click and drag text anywhere along a line:

blog2

Multiple Texts on a Line

You can double click anywhere on a line to add a new text:

blog3

From The Beginning

Earlier, I said I was given the nebulous task of improving UML. I had an upset feeling at the pit of my stomach–I had dosed off in my UML class in college and hadn’t used it since.

But–we’re in the mid-2010′s, and Google can do all the work for me! So I studied up on UML, but was that enough? Could I honestly say I knew the major things that customers wanted when I was a total UML n00b?

Gathering Information

No. I couldn’t legitimately say that I was a UML guru. So now it was time for help from the users.

First, I went to our feature request forum to find out what had been suggested for UML. UML 2.0 shapes were a no brainer, but what else?

Next, I gathered some email addresses. I found everyone on our support forums that had mentioned UML. Then I had our system admin run a query across existing diagrams on Gliffy Online to find the users that had created 10 or more diagrams with UML shapes, and had logged in within the past 6 months.

I now had a list in hand of about 100 names of users that were passionate about UML.

We created a targeted survey of about 10-15 questions about how we could improve UML. A bunch of the questions were to confirm our hyothesis about what users wanted, and a few of them were open ended to help us with expected implementation.

Developing the Features

We eventually decided upon our current feature set: new UML shapes, new UML templates, and the ability to easily add cardinality to the ends of UML lines.

The new UML shapes and new UML templates were fairly straightforward. Clint handled both of these features. A programmer by trade, he created most of the shapes by hand, painstakingly creating SVG’s and adding our Gliffy special sauce–default texts in the right place and proper scaling when text is added. He also set up helpful new UML templates using common design patterns. The trickiest part about the templates was going back and touching them up in unison with the other UML features that were being added.

Of course, programmers are notorious for creating graphics that are a little rough around the edges, so he worked together with our designer, May Woo on cleaning these up.

Adding UML cardinality was a bit more involved. I could have taken the easy route, and made special case lines with text on either end for the cardinality, but I wanted to be a bit sneaky and implement new features that would lead up to cardinality.

Cardinality is essentially two pieces of text at the end of lines. So I took a three step approach leading up to this feature:

  • Allow users to move text on lines
  • Allow users to create mulitple texts on lines
  • Adding cardinality essentially becomes a shortcut for creating two specialized texts at the end of a line.

At each step along the way, I uploaded my changes to a staging server, and provided a short Survey Monkey survey that I *forced* everyone at Gliffy to fill out. This helped:

  • Find bugs and inconsistencies
  • Get suggestions on “low hanging fruit”–small features or tweaks that radically improve the user experience.
  • Acquire long term suggestions to place in the backlog of our issue tracker for when we decide to revisit UML shapes.

Releasing

The final step was to get this out to our customers. We have two major products where we rolled these out the Gliffy Confluence Plugin and Gliffy Online. Gliffy for Confluence is a downloadable product that we release approximately every six weeks. Gliffy Online is updated weekly.

So we incrementally rolled these features out one at a time to Gliffy Online, and saved them up for a big release in Confluence.

The incremental release cycle:

  • Gets features out to customers quickly.
  • Forces me (the programmer) to clean up all loose ends, and not acquire technical debt.
  • Allows us to use analytics to determine if anyone is actually using the new features. If users are using the feature, we will further iterate. If they’re not, we know to focus our energy elsewhere.

And That’s How it’s Done

Well there it is, a little insight as to how we design and implement features here at Gliffy. It is an ongoing process that we’re constantly trying to improve.

And that’s how the sausage is made.

sausage

Me at Taylor Sausage Company in Cave Junction, OR.

Categories: Uncategorized

2 Comments

  • Tim Fry says:

    Can you disclose when these features will be available in the Confluence plug-in? They are sorely needed — at the moment Gliffy is not really worth using for UML diagramming.

    Also, will this release include connections to Sequence diagram elements (lifelines, messages etc.)?

    Thanks

  • Rocco Balsamo says:

    These features have been available in Confluence since Gliffy 6.0. If you’re having trouble accessing them, please email support@gliffy.com and we’ll get you set up.