Lovely Charts “Next”

You think, we draw.

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

  1. Let the app take care of cumbersome tasks such as laying things out and picking symbols.
  2. Fine tune graphical details with the mouse and a GUI.

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.
  • The fact that 2 different apps were involved always made the process feel a bit convoluted and unnatural.

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.

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.

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”.

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.

A distinct style for each level of the hierarchy and a specific color for Section 2, automatically!
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.

--

--

Product designer, father of two.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store