Recommend a tool for making “ASCII Flow Chart” – Graph Easy

Time:2019-4-14

Recommend a tool for making

More than once, I’ve seen this ASCII text output directly from Console, like Knowing.com.

Last time I was referring to a tall article, Serverless Actual Warfare: Building a Personal Reading Tracking System, http://insights.thoughtworks.cn/serverless-combat/
There is a flow chart:
Recommend a tool for making

At that time, I wondered if I could draw an ASCII text flow chart and put it directly into the code as a code comment to promote the “forced grid”?

A search on the internet, there are really such tools that can be achieved through code or command line, and can also be directly copied and pasted to use, fully in line with our program ape’s clothing needs – Graph Easy

Graph Easy

Graph:: Easy is a Perl module for processing graphics DSL. It has the following functions:

  1. It provides an easy to understand and readable graphic description language.

  2. A Grid-based Layout Supporting ASCII Art

  3. It can be exported to Graphviz, Visualizing Compiler Graphs, GDL and GraphML formats.

  4. Images can be imported from Graphviz, VCG and GDL.

Extracted from: https://www.gitbook.com/book/weishu/graph-easy-cn/details

In short, Graph Easy is a very geek drawing tool. It is based on Command Line and can easily draw ASCII character diagrams. It can also be exported to HTML, SVG and other formats.

Install Graph Easy

Self-use Mac notebook, so easy to install, only need three commands:

// 1. 
brew install graphviz

// 2. Install cpan and return all the way.
cpan

// 3. Install Graph Easy
sudo cpan Graph:Easy

Recommend a tool for making

Use Graph Easy

1.Simple:

$ graph-easy <<< '[a]->[b]'

Output:

+—+ +—+
| a | –> | b |
+—+ +—+

2.Let’s have a long chain.

% graph-easy <<< '[a]->[b]->[c]->[d]->[e]'

Output:

Recommend a tool for making

3.Next branch:

% graph-easy <<< '[a]->[b]->[c][b]->[d]->[e]'

Output:

Recommend a tool for making

4.A closed loop:

% graph-easy <<< '[a]->[b]->[c]->[b]->[d]->[e]'

Output:

Recommend a tool for making

5.Come to a confluence:

% graph-easy <<< '[a]->[b]->[c][d]->[e]->[b]'

Output:

Recommend a tool for making

6.Textual descriptions are required between processes.

% graph-easy <<< '[a]->[b]->{label:"true";}[c]->[d]->{label:"FeedBack";}[a]'

Output:

Recommend a tool for making

For example: node B to node C need to add a condition description, etc.

7.Of course, we sometimes need top-down flowcharts.

% graph-easy < <'graph {flow: south;} [top] - > [middle] - > [bottom]'

Output:

Recommend a tool for making

8.If the flow chart is complex, we can save the content in the file and read the file to draw the flow chart.

% graph-easy ../test.txt

Recommend a tool for making

Let’s take a look at “test.txt”:

Recommend a tool for making

9.Finally, let’s implement the flow chart above.

Recommend a tool for making

Test.txt includes:

[Instapaper] {size: 2,7;}
[RSS(Feedly)] -> [Instapaper]{ origin: RSS(Feedly); offset: 2,0;}
[WeChat] -> [Instapaper]{ origin: WeChat; offset: 2,-6;}
[Website] -> [Instapaper]
[IFTTT]{size: 1,7;}
[Instapaper] -> [Diigo]{ origin: Instapaper; offset: 2,-2;}
[Instapaper] -> [IFTTT]{ origin: Instapaper; offset: 2,0;}
[Instapaper] -> [Evernote]{ origin: Instapaper; offset: 2,2;}
[Webtask(Serverless)]{size: 2,7;}
[IFTTT] -> [Webtask(Serverless)]{ origin: IFTTT; offset: 2,0;}
[Webtask(Serverless)] -> [Github]{ origin: Webtask(Serverless); offset: 2,-2;}
[Webtask(Serverless)] -> [ZenHub]{ origin: Webtask(Serverless); offset: 2,2}

summary

Because of the time relationship, the relative position and size of each node can not be well adjusted, and the effect is not completely consistent with the above; but at least the “ASCII flow chart” can be drawn.

Try copying it into the code editor to see how annotations work:

Recommend a tool for making

It feels good. You can try it, too.~~~

“End”


Coding 01 looks forward to your continued attention

Recommend a tool for making


Thank you so much for seeing this.

Recommend a tool for making