Quick, text-based flowcharts for developers

Trevor Ewen
Aug 22, 2017 · 3 min read
Image for post
Image for post
Image from ellladee

I’m a developer. I like text editors. I like code. I like markup.

Like many 90s kids, my early skills were forged in the fires of Adobe Dreamweaver, Microsoft FrontPage, and GeoCities. Finding the right mix of WYSIWYG (What you see is what you get) web development seemed to be the theme of the decade. Since then, the consensus for UI work has moved aggressively towards written markup.

On one hand, we have Wix and Squarespace Inc. doing great things with WYSIWYG. Despite that, most developers choose to write their own user interfaces. The elegance, the speed, the simplicity, the hotkeys. For my part, I just don’t like dragging and dropping things with unsteady hands.

It’s for this reason that I experimented recently with the goal of text-based, browser-rendered flowcharts. A web search brought me to a number of sophisticated WYSIWYG tools like LucidChart, Creately, and Draw.io. For founders and creatives alike, I don’t doubt the power of these tools. It’s just that I wanted the developer-friendly solution. I wanted text input, default colors, and default layout.

Image for post
Image for post

Enter flowchart.js. This was the library I wanted. It had a simple, text-based data schema that could be consumed by the JavaScript library. The sample routine on the flowchart.js site looks something like this:

st=>start: Start
e=>end
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

And it produces:

Image for post
Image for post

I was extremely happy with the outcome. No more drawing lines, no more determining how to draw a shape, no more deciding relative size and distance.

Learning the specifics of the data schema takes a few minutes. It’s elegant and sophisticated enough for my use cases. Here is a more complicated example from the flowchart.js site:

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

With the configuration styles, it produces:

Image for post
Image for post

Flowcharts are an incredibly powerful way to model user experience and product flow. Developers should keep a process like this handy in order to dispel present or future arguments. Product people and designers should consider the possibility of moving to text-based flowcharts.

Flowchart.js provides loads of configuration options for colors and appearance. While I encourage you to explore these, they are outside of my use case. My job is building products and stopping arguments. Haven’t seen a case where black & white couldn’t do the job.

For anyone attempting to create a quick, text-based flowchart, I have created a simple web application at textflowcharts.com. I was using the seed project locally, so it made sense to open up the use case.

For anyone attempting to replicate the project, I have assembled a seed project here. Clone or download the repo. Run a quick npm install or yarn, then npm start and you’ll be off to the races. The project pulls data from the data/sample.txt file. You should edit that to match your flow.

I welcome any contributions to the project. It’s very simple, and I’d like the keep it that way. My hope is that developers, designers, and product people find a use case for the seed.

Special thanks Adriano Raiano, creator of flowchart.js. It’s a very awesome project and I am glad he built it.

HackerNoon.com

#BlackLivesMatter

Sign up for Get Better Tech Emails via HackerNoon.com

By HackerNoon.com

how hackers start their afternoons. the real shit is on hackernoon.com. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Trevor Ewen

Written by

Software developer & investor. Opinions are my own.

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Trevor Ewen

Written by

Software developer & investor. Opinions are my own.

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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