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](https://en.wikipedia.org/wiki/Adobe_Dreamweaver), [Microsoft FrontPage,](https://en.wikipedia.org/wiki/Microsoft_FrontPage) and [GeoCities](https://en.wikipedia.org/wiki/Yahoo!_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](https://hackernoon.com/tagged/markup).

On one hand, we have [Wix](https://medium.com/@Wix.com) and [Squarespace Inc.](https://medium.com/@squarespace) 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](https://www.lucidchart.com/), [Creately](https://creately.com/), and [Draw.io](https://www.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.

![](https://hackernoon.com/hn-images/1*p9jLPiJWDU3hNuYUYjiE4Q.png)

Enter [flowchart.js](http://flowchart.js.org/). This was the library I wanted. It had a simple, text-based data schema that could be consumed by the [JavaScript](https://hackernoon.com/tagged/javascript) library. The sample routine on the [flowchart.js](http://flowchart.js.org/) 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:

![](https://hackernoon.com/hn-images/1*EZpUKhPBYj22PqVdrPVUwg.png)

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](http://flowchart.js.org/) site:

st=>start: Start|past:>[http://www.google.com\[blank](http://www.google.com[blank)\]  
e=>end: End|future:>[http://www.google.com](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](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:

![](https://hackernoon.com/hn-images/1*e8seR6RPiRNR2_Z5nNlZfw.png)

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](http://flowchart.js.org/) 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](http://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](https://github.com/tewen/flowchart-seed). 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](https://twitter.com/adrirai), creator of flowchart.js. It’s a very awesome project and I am glad he built it.

Flow

Adobe

Google

Microsoft

Routine

Twitter

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Quick, text-based flowcharts for developers

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@tewen

RELATED STORIES