推荐一个制做「ASCII 流程图」工具——Graph Easy

我不止一次看到相似「知乎」网站那种 Console 上直接输出这种「ASCII 文本」。

上一次我在借鉴一篇高大上的文章《Serverless实战：打造我的阅读追踪系统》 http://insights.thoughtworks.cn/serverless-combat/ 时，
里面就有个流程图：

当时就想本身能不能也画一个「ASCII 文本流程图」，而且能够直接放到代码里，做为代码注释，提高下「逼格」呢？

上网一搜，还真有这种经过代码或者命令行就能实现的工具，而且还能够直接复制粘贴使用，彻底符合我等程序猿的装逼需求 —— Graph Easy

Graph Easy

Graph::Easy 是一个处理图形DSL的Perl模块，它有以下功能：

1. 提供了一种易懂，可读性很强的图形描述语言

2. 一种支持 ASCII Art 的基于网格的布局器

3. 能够导出为 Graphviz, VCG (Visualizing Compiler Graphs), GDL (Graph Description LAnguages) 和 GraphML 格式。

4. 能够从 Graphviz, VCG 和 GDL 导入图像。

摘自：https://www.gitbook.com/book/weishu/graph-easy-cn/details

总之，Graph Easy 是一个很 geek 的一个绘图工具。它基于 Command Line，能够轻松的绘制 ASCII 字符图，同时还能导出成 HTML，SVG 等多种格式。

安装 Graph Easy

自用 Mac 笔记本，因此安装起来简单，只须要三条命令：

// 1. 
brew install graphviz

// 2. 安装 cpan，一路「回车」
cpan

// 3. 安装 Graph Easy
sudo cpan Graph:Easy

使用 Graph Easy

1. 来点简单的：

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

输出：

+---+ +---+
| a | --> | b |
+---+ +---+

2. 来点长链：

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

输出：

3. 来个分支：

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

输出：

4. 来个闭环：

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

输出：

5. 来个合流：

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

输出：

6. 流程之间须要文字说明的

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

输出：

如：结点 b 到结点 c 须要加个条件说明等。

7. 固然，咱们有时候须要从上至下的画流程图

% graph-easy <<< 'graph{flow:south;}[上]->[中]->[下]'

输出：

8. 若是流程图复杂点的时候，咱们能够将内容存于文件中，而后读文件画流程图

% graph-easy ../test.txt

咱们看看「test.txt」的内容：

9. 最后让咱们实现下上文的流程图

test.txt 内如：

[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}

总结

由于时间关系，没能很好的调整每一个节点的相对位置和大小，并无彻底和上文一致的效果；但至少能够画出「ASCII 流程图」了，

试着复制到代码编辑器中，看看注释效果：

感受还不错，你也能够试试哦~~~

「完」

---

coding01 期待您继续关注

---

也很感谢您能看到这了