Lovely Charts “Next”

Lovely Charts is a diagramming solution that helps you create great looking diagrams, even if you don’t have the slightest design skill. It’s available on the web, desktop and iPad.

Here’s what the next version could look like :

Given the latest version (iPad) was released in late 2011, a new version has long been overdue. Ahem, sorry. I’m working on it, but it’s nowhere near ready, so I decided to make this page to show the world where this was all going.

Please bear in mind this is all a “work in progress” and the UI hasn’t really been properly designed yet beyond a few general IA decisions.

You think, we draw.

This has been Lovely Charts’ baseline since its very beginnings.

I came up with this baseline because I believe one of the reasons that make creating diagrams complex is that it requires you to both think about what you are trying to represent and about how the f#@! am I going to draw this?

Doing both simultaneously is difficult. And it is even harder when creating diagrams on a laptop or desktop device, as most diagramming software require you to constantly switch between input methods : drag & drop, type in a label with the keyboard, move and resize with the mouse, back to keyboard, mouse, etc. It is complex, and messy.

Lovely Charts for iPad made the process a lot simpler and more direct, via simple gestures and a single input tool called… “finger” : shapes are drawn and erased directly with the finger, resized with the finger, linked with fingers, and labelled with the same finger. Amazing tool, that “finger”!

Obviously, this kind of simple and direct manipulation is not really applicable to desktop devices: graphics editing with a keyboard is a power user thing, and entering text with a mouse or touchpad is just plain absurd. So doing both at once with a single tool will probably never be an option.

But what if the authoring tool made it easy and natural to dissociate the drawing phase from the brain dumping phase? You would :

1. Dump the structure straight from your brain with the keyboard.
2. Let the app take care of cumbersome tasks such as laying things out and picking symbols.
3. Fine tune graphical details with the mouse and a GUI.

Sounds like a cool workflow, right? I think so too. So here’s how I went about implementing it.

Learning from the past

Lovely Charts Desktop had this cool little feature that would let you import tabbed text files to generate tree diagrams. You’d type something like this in a text editor…

… Drop it into the app, and boom, get a nice little tree diagram.

It was a cool little feature, but it always felt limited:

• It worked quite well for simple hierarchical structures, but definitely not for flows or circular structures.
• The fact that 2 different apps were involved always made the process feel a bit convoluted and unnatural.

But nevertheless, I have always liked the idea and felt it was worth exploring more in future versions. So when I started thinking about making a new version of Lovely Charts, one of the first things I did was build a little prototype taking the same idea of a tabbed text outline to generate a tree structure, but in real time this time, within a single view.

It was just a very rough proof of concept prototype, but it was enough for me to play with the idea and get convinced it had legs.
Being able to visualize what you are describing, and edit the structure without your hands ever leaving the keyboard were massive improvements.

Real time visualization and tab delimiters made it a lot easier to apprehend the syntax and figure out what adding or removing tabs actually did, turning a voluntarily simplistic syntax into something quite powerful and flexible.

Designing a human-readable syntax

Generating diagrams from simple text files was not a new idea. But the challenge here was to come up with a syntax that was both flexible and simple. Something that would let users describe pretty much any kind of diagrams, but wouldn’t require a CS degree to figure out.

After playing with the initial prototypes, I decided tabs worked well for expressing both hierarchy and sequence. While I initially thought the resulting text itself was probably slightly less expressive when describing flows, the prototypes made me realize it was definitely not a show-stopper, and convinced me that having a single interaction (“press TAB”) to move items one level deeper or further actually worked quite well.

1. Parent
2. — Child
3. — — Grandchild

1. Start
2. — Step 1
3. — — Step 2

After settling this, I worked on labelling links, and decided to go with what I thought resulted in the most legible text, using a colon:

1. Is the user logged in?
2. — Yes: Do this
3. — No: Do that

Last but not least, I had to figure out a way to represent links that were not direct parent-child relationships. While I didn’t want to introduce any kind of keywords initially, I eventually gave in and went with GOTO #, as a nerdy reference to old-school programming languages.

1. Is the user logged in?
2. — Yes: Do this
3. — No: GOTO 1

It is nerdy, but it is pretty darn expressive, and I think the “nerdiness” of the solution could at some point be compensated with a little help from the UI. That being said, I’m still not totally sure about the GOTO syntax, it’s justthe best solution I’ve found so far. Time will tell if this sticks. Please add comments if you have alternative ideas :)

Layout + rules + stylesheet = Blueprint

Having step one of my ideal workflow covered, I then worked on what I’d refer to as the “convenience step”, during which the app would take care of a few tedious tasks.

Basically, what I wanted was to offer blueprints that would minimize the user’s efforts to the bare minimum. A user would pick a blueprint, type in a plain text outline, done ! What did we need for this to become reality?

Automatic layouts were pretty much a given, something I knew from the beginning was going to be part of the workflow: you describe a structure, and the resulting diagram gets all properly laid out, as you type.

But I wanted a little more magic… So I defined blueprints to be not only about layouts, but a combination of 3 components: a layout (tree, radial, flow…), a set of rules, and a stylesheet.

Rules

The original version of Lovely Charts had a feature I had called “automatic symbol switching”. Basically it was a set of hardcoded rules that specified things such as “if there’s more than 2 outgoing connections, this is a decision node, use a diamond shape”.

It worked pretty well for demos but turned out to be not so useful in reality, essentially because the rules were applied blindly without taking the context into account, and worse, because the user had no way to understand what was going on since everything was just hardcoded, so I dumped the feature in the next version I worked on.

With Lovely Charts Next, I’ve decided to re-introduce the idea, but to give users a lot more control.

When starting a diagram, users pick a blueprint, which comes with a set of rules that automate symbol selection, based on an item’s attributes.

The rules are visible, and editable.

Obviously, the rules UI isn’t finalized :)

Style sheets

Each diagram is associated with a CSS stylesheet, making it easy to apply consistent styling by editing good old standard CSS.

Not only can users define general styles for links, labels and symbols, but they can also target specific elements of the structure, based on their position in the hierarchy.

A distinct style for each level of the hierarchy and a specific color for Section 2, automatically!

When combined, these features really go a long way in helping users create good looking diagrams with minimal drawing efforts. See how easy creating a flowchart is with a blueprint combining automatic layout, rules and stylesheet :

Creating a flowchart in seconds. Just describe the process, we take care of the rest!

Last but not least…

You don’t actually have to use any of this. You can pick a blank template, turn auto-layout off, drag & drop items from the library, create and connect items using simple drag & drop actions, align items, resize, edit individual items manually, etc.

It is flexible enough to let you work the way YOU want to work.

Maybe you want everything to be automatic. Maybe you want to pick symbols yourself and position everything manually. Maybe you want to automate some part of the workflow but control the rest. As you wish.

Anyway, enough writing, I need to get back to work if I want this to ever see the light of day :)