This is a guest blog post by Nick Foster, Co-Founder and COO of Creately, an online diagramming plugin for Confluence which lets you create and add all kinds of diagrams like flowcharts, wireframes, UML diagrams and mindmaps for your wiki pages and blogs. Creately is a sponsor at Atlassian Summit 2012.

Good tools and process is a key part to building good software fast. Being a company that makes a diagram tool for a living, we are biased towards diagrams. Below, I explain how they are crucial to helping keep a great product development process going.


To provide a quick overview, our software product cycle consists of roadmap planning sessions about every three months, feature/update brainstorming, detailed specs on what to do, wireframes and design docs, coding, testing and deployment. A release cycle is about one month long.

We use Confluence and Jira internally for this purpose along with our own Creately Diagram Add On for Confluence and Jira. Dogfooding FTW!


We usually kick things off with a few quick objectives listed out then go into brainstorming mode on the plan. A wiki page with the objectives and it’s followed after with a mind map that we create during the brainstorming session itself. Having the mind map here is really important as it captures the little things that usually don’t make it to the written list that goes into the body of the wiki page. Thus things we might have missed otherwise are captured in context helping us avoid pitfalls and retain future ideas down the line.

We occasionally come back to the mind map and new opportunities present themselves, along with gaps and alternate priorities due to its free-flow, visual form.

Putting down a plan

Having remote teams working on a project is a challenge and a clear plan is crucial. We prioritize by color coding a further detailed version of the mind map, and then create a Gantt chart to figure out timelines at a very high level.

You’d be surprised how much having a free form Gantt chart and a rough idea of timelines has helped us prioritize and ship effectively!

The details!

A wiki page structure is created, mapping key feature/implementation areas. Then the team goes into the details of the plan by describing expected functionality in text along with mockups and flowcharts. Usually these things get revised quite a bit–we keep iterating on them on the wiki itself. Usually this includes referencing and linking to previous docs and diagrams so that when development starts everyone knows where to look.

It’s sometimes easy to just keep expanding in text and typing on what we think about; however, having the UI mockups in there and the user flowcharts defined helps us really optimize the user experience and work through scenarios before we go in and start writing a lot of code.

Dev spec

As the team starts to implement the plan, new artifacts are created including DB schema changes (usually we use the existing schema and highlight the key changes in a different color) using our Database Diagram templates. UML diagrams are created for situations that require it, usually a class structure and some sequence diagrams. Although for complex changes use cases are also created.

We don’t overdo the dev specs, but we do document things so it’s easy to keep everyone on the same page and help newcomers to the team quickly learn about key pieces in the framework.

When needed, especially when dealing with current issues, we attach mockups, UML, DB diagrams, flowcharts or site maps to Jira issues as well.

Little touches that increase collaboration

One thing that’s important in using the diagrams in our process is that the content must flow really well inside the pages. The site structure is diligently curated to ensure good navigability. Diagram content is embedded onto the page using our Creately Viewer. It helps keep the large diagrams automatically resized to match page width and enables users to zoom/pan and navigate via contextual links from inside the diagram image itself.

Coming full circle, we usually link key pages in the project to a mind map on the homepage so there is a really flexible non-linear navigation method available for everyone on the project. Links can be viewed and navigated on page with the Creately Diagram Viewer.

That’s how we run our projects internally at Creately. We are diagram intense, but it really has helped cut down on miscommunication and get things done faster. Everyone is always looking at the same picture! We are thrilled to be amping up Confluence collaboration at Creately.

Come to Atlassian Summit 2012 to visit Creately and 34 other sponsors. It’s going to be our largest user conference yet!

(Guest Blog) How Diagrams Help Us Build Better Sof...