FloMoJo - Convert Text to Flowchart

By Josh Wright on December 2011 in projects


Yesterday I created a proof of concept site that converts text to a flow chart. See it at http://flomojo.com

Going Postal

Yesterday I went at the post office because I needed one stamp. 20 minutes later I walked out with $10 worth of stamps. Their machine was out. Over a dozen people were in line while 1 clerk helped us & two other clerks literally stood there doing nothing.

All that to say, I thought it'd be funny to make a flow chart sharing my continuous frustration with the Postal Service.

Spoiler alert, here's the flow chart I ended up making about the postal service.


Flow Charts Are Helpful

I guess I'm a flowchart guy. When I'm designing apps & websites, I like to use flow charts. Who doesn't like a good flowchart?

I've used omnigraffle but I don't like designing flow charts - it's too much drag this, resize that, move these over here. Not enough focusing on my process.

So lots of times I'll write the flowchart out in plain text using line indention for hierarchies, etc. This even lets me design flow charts on my iPhone or iPad (I use Nebulous Notes). I literally have 13 text files right now that are basically flow charts for app ideas.

A Little jQuery Magic

So yesterday I spent a few hours making a proof of concept website called Flo Mo Jo. I used jQuery & jsPlumb. You write in plain text following some simple rules and the flowchart is generated automatically. Here's an example:

The Script

Rate Your Day
  Did you go to the Post Office?
    Yes: Did someone offer to go for you?
      Yes: Perfect!!!
      No: Horrible!!!
    No: Do you need to go soon?
      No: Perfect!!!
      Yes: Horrible!!!

The Result

Wrap It Up

The proof of concept works better than I expected, but it doesn't handle large graphs very well. The hardest part is placing each node close to related nodes but also in the familiar top to bottom style. I guess I need to read up on layered graph drawing but that seemed fruitless & boring.