More than once I have seen such “ASCII text” output directly from a Console like Zhihu.

Last time I was in reference to an article on the tall “Serverless combat: create personal reading tracking system” insights. Thoughtworks. Cn/Serverless -… There is a flow chart in it:

At that time, I thought I could draw an “ASCII text flow chart”, and can be directly put into the code, as a code comment, improve the “force grid”?

A search on the Internet, there really is this kind of code or command line can achieve the tool, and can also be directly copied and pasted to use, fully in line with my program ape installation force demand – Graph Easy

Graph Easy

Graph::Easy is a Perl module that handles graphical DSLS and has the following capabilities:

  1. Provides an easy to understand, highly readable graphical description language
  2. A grid-based layer that supports ASCII Art
  3. It can be exported to Graphviz, VCG (Visualizing Compiler Graphs), GDL (Graph Description LAnguages) and GraphML formats.
  4. You can import images from Graphviz, VCG, and GDL.

From: www.gitbook.com/book/weishu…

Graph Easy is a geeky drawing tool. Based on the Command Line, it can easily draw ASCII characters, and export them to HTML, SVG and other formats.

Install the Graph Easy

Mac laptop for your own use, so it’s easy to install with just three commands:

// 1. brew install graphviz // 2. Graph Easy sudo cpan Graph:EasyCopy the code

Use Graph Easy

5. 1. Smart refrigerator

$ graph-easy <<< '[a]->[b]'Copy the code

Output:

+—+ +—+

| a | –> | b |

+—+ +—+

2. Long chain:

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

Output:

3. Branch off:

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

Output:

4. Close the loop:

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

Output:

5. Have a confluence:

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

Output:

6. Text explanation is required between processes

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

Output:

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

7. Of course, sometimes we need to draw a flow chart from the top down

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

Output:

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

% graph-easy .. /test.txtCopy the code

Let’s look at the contents of “test.txt” :

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

Test. TXT in such as:

[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}Copy the code

conclusion

Due to time constraints, the relative position and size of each node were not well adjusted, and the effect was not completely consistent with the above. But at least you can draw an ASCII flowchart,

Try copying it to the code editor to see what the comment looks like:

It feels good. You can try it, too

“Finished”

Coding01 looks forward to your continued attention

qrcode

And thank you for seeing this

qrcode