Over a million developers have joined DZone.

8 Things You Can Do With Kite9 Designer

DZone's Guide to

8 Things You Can Do With Kite9 Designer

Free Resource

The purpose of Kite9 Designer is to allow you to put together box and line diagrams really, really quickly.  This could be for class diagrams, system diagrams, workflows, process flows, whatever.   The main aim of Kite9 Designer is to make this much much faster than doing it in (say) Visio. 

This is because you concentrate on the content of the diagram, and Kite9 Designer will worry about making it look good - all the formatting and layout it taken care of. 

This article is going to take you though some of the features of Kite9 Designer, so that you are ready to go and use it on the your next diagram.  (By the way, you can try it right now)

1. Joining Stuff Up

You can drag on a few Glyphs (use Glyphs as objects or nouns in your diagram) and then join them up together.  To join glyphs, multiple-select two of them by holding down the CTRL key (flower on a mac) and press "Connect".   Kite9 will then add a connection between the two elements, and move the elements on the page to minimise both the length of any connections you have, and the crossings between them, like so:

Note that of course, you can add labels and arrows to the ends of each of these connections.  To set the properties of the connections, double click them.  You can drag a "Connection Body" onto the diagram for connections that need to join up multiple elements, like so.  

2.  Directed Connections

On to the next thing:  you can set the direction of connections within the diagram.  For example, in the image above, you might want to have "Head Office" at the top of the diagram.    This means that the "Head office" end must be at the top of a connection, whilst the "oversees" end must be at the bottom.  You can instruct Kite9 Designer to make sure this is always the case.

Double click the connection to view its properties, and then set "draw direction", as shown below:

The diagram will now redraw like so:

3.  Adding Explanatory Text

You can add as many lines of text as you like to a Glyph, to describe what it is for.  Double click a glyph and start adding text lines to it.  All of the elements in the diagram will move to accommodate the new text, so it's all still laid out correctly.

4.  Adding Contexts to Subdivide a Diagram

Although Kite9 Designer has a good stab at arranging things in a pleasing manner, sometimes you want to group together like elements within a diagram.  

This is done with Contexts.  Contexts are groups of related elements in the diagram.  Drag a Context from the palette onto the diagram, and then drag any of the other elements into the Context.   Like so:

Note that you can set the text for the context by double-clicking to edit it's properties.

5. Linking To Contexts

Connections can link to contexts as well as glyphs.   This can simplify diagrams a lot.  In the diagram below, it's easier to read when "John" is linked to the offices, rather that each department. 

6.  Changing the Context Layout

Contexts (and the main diagram) can have a layout.  In the one above, "London Office" has a horizontal layout.  You can change the order of the glyphs in in a horizontal or vertical layout by dragging and dropping them to the position you require.  Kite9 Designer will respect this ordering a bit, but overrule it to minimise connection lengths and crossings in the diagram.

But, sometimes you want to fix the ordering of the elements in the context.  Double click the context and set one of four bottom layout approaches.

Next, re-arrange the contents of the context using drag and drop.  Kite9 will ensure that the context is always laid out in the order and direction you specify.

This is really useful if there is a particular ordering that needs to be maintained in a part of the diagram.  In the example below, departments are shown by the floor they are on, so you would want to keep the floors in the correct order:

7.  Changing the Style

Once you are happy with your diagram, click "View/Publish" to view the final version.  At this point, you can choose from one of the built in colour schemes, and publish on the web.  For example, here's our diagram in the "Outline" theme: 

And here it is in the "Basic" theme:

You can then choose to share it with your friends on twitter or facebook or in a blog or email.

8. Try It Out

You can use Kite9 Designer for free, right now, in your browser.  Chrome, IE 8 and 9, Firefox and Safari are all supported. No sign up is required.  Click here to have a go.

We think it's going to save you a lot of time in the Connector-Hell that Visio can leave you in.

Alternatively, you could check out how you can embed diagrams on your website, or generating diagrams automatically from your code.


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}