我不止一次看到类似「知乎」网站那种 Console 上直接输出这种「ASCII 文本」。
上一次我在借鉴一篇高大上的文章《Serverless实战:打造个人阅读追踪系统》 http://insights.thoughtworks.cn/serverless-combat/ 时,
里面就有个流程图:
当时就想自己能不能也画一个「ASCII 文本流程图」,并且可以直接放到代码里,作为代码注释,提升下「逼格」呢?
上网一搜,还真有这种通过代码或者命令行就能实现的工具,并且还可以直接复制粘贴使用,完全符合我等程序猿的装逼需求 —— Graph Easy
Graph Easy
Graph::Easy 是一个处理图形DSL的Perl模块,它有如下功能:
提供了一种易懂,可读性很强的图形描述语言
一种支持 ASCII Art 的基于网格的布局器
可以导出为 Graphviz, VCG (Visualizing Compiler Graphs), GDL (Graph Description LAnguages) 和 GraphML 格式。
可以从 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 期待您继续关注
也很感谢您能看到这了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。