使用Graph Easy来做炫酷的Ascii字符图

1
2
3
4
5
6
7
8
9
10
11
➜ graph-easy foo.txt
+--------+ +----------+ +------+
| 看电影 | <-- | 写完论文 | --> | 吃饭 |
+--------+ +----------+ +------+
|
|
v
+----------+
| 守望先锋 |
+----------+

使用Graph Easy能帮助你绘出geek风满满的Ascii字符流程图。

入门实例

上面看到的一个简单流程图,用的代码仅仅是下面一行:

1
[写完论文] --> [守望先锋],[吃饭],[看电影]

使用ASCII字符图的好处很多:

  • 在项目说明README中避免了图例不能插入到文档中
  • 有效减少文档的大小
  • 便于进行版本控制
  • 效果很炫目很骚(´▽`)

如何使用Graph::Easy生成ASCII字符图

Graph Easy 的安装流程有些许繁杂,放在后面叙述。[不行,我要马上跳转去看!]

使用

直接把代码写在一个txt文件中,然后用终端graph-easy foo.txt调用即可。

基本语法

基本款图

代码:[a] -> [b] -> [c] -> [a]
效果如下:

1
2
3
4
5
+-------------------+
v |
+---+ +---+ +---+
| a | --> | b | --> | c |
+---+ +---+ +---+


带注释的基本款图

代码:[a] - text -> [b] - Or2.in -> [c]
效果如下:

1
2
3
+---+ text +---+ Or2.in +---+
| a | ------> | b | --------> | c |
+---+ +---+ +---+

注意要有空格噢!


各种样式的边

graph-easy支持这几种风格:

1
2
3
4
5
6
7
8
-> 实线
=> 双实线
.> 点线
~> 波浪线
- > 虚线
.-> 点虚线
..-> 点点虚线[手动微笑]
= > 有空格的实线


高阶语法

高阶语法的关键在于引入了属性这个概念,从而进一步个性化显示。
属性在代码中用键值对{attribut:value}来表示,面将介绍几个我认为比较常用的属性设置。

设置边的流向

方法是{flow:south},方向可以是north/south/east/west(北/南/东/西),也可以是left/right/up/down(左/右/上/下),任君选择~
代码是[a]{flow:south}->[b]->[c]
效果如下:

1
2
3
4
5
6
7
8
9
+---+
| a |
+---+
|
|
v
+---+ +---+
| b | --> | c |
+---+ +---+

边流向可以设置针对某一个框图发出的边做设置,也可以设置全局边流向,代码是在文件第一行输入graph{flow:south;}


设置款图的“宽度”

方法是{rows:3}
代码是[a]{rows:3}->[b]->[c]->[a]
效果如下:

1
2
3
4
5
6
+---+ +---+ +---+
| | --> | b | --> | c |
| a | +---+ +---+
| | |
| | <---------------+
+---+

如果被设定的款图实际上用不到这么多的宽度,他就不会如愿变成你想要的大小噢,你可以自己动手尝试[a]{rows:3}->[b]->[c]


设置用于分组的环绕线框图

方法是(backend: [a]->[b])
代码是

1
2
(backend: [a]->[b])
[b]->[c]

效果图如下:

1
2
3
4
5
6
7
8
+ - - - - - - - - - - -+
' backend: '
' '
' +--------+ +---+ ' +---+
' | a | --> | b | ' --> | c |
' +--------+ +---+ ' +---+
' '
+ - - - - - - - - - - -+


设置无边框的框图

方法是{border:none}
代码是[a]{border:none}->[b]->[c]{border:none}
效果如下:

1
2
3
+---+
a --> | b | --> c
+---+


设置虚线框图

方法是{border:1px dotted black}
代码是[a]->[b]{border:1px dotted black}->[c]
效果如下:

1
2
3
+---+ ..... +---+
| a | --> : b : --> | c |
+---+ :...: +---+


注意点

  1. 属性中flowrows不能同时使用,不然会失效
  2. 兼容的使用多属性,每个属性需要用;隔开,如[a]{rows:3;border:1px dotted black}
  3. Graph::Easy的语法其实有点类似HTML,会忽略空格。所以高阶方法3与后面这段代码等效=>(backend: [a]->[b])[b]->[c]
  4. 一对多的情况下,多方的每一方排列顺序,用户无法决定,他是按照多方中每一方的首字母顺序来排列,所以这是下面实例多方的每一方前头加数字的原因(本人能力有限,似乎没有找到更好的解决方法)

来一个高阶实例

描述一下OAuth2.0的授权认证流程图。
代码如下:

1
2
3
4
5
6
7
8
[ Client ]{rows:8;} -- (A) Authorizatoin Request --> [ 1.Resource Owner ]{rows:2;}
[ 1.Resource Owner ] -- (B) Authorizatoin Grant --> [ Client ]
[ Client ] -- (C) Authorizatoin Request --> [ 2.Authorizatoin Server ]{rows:2;}
[ 2.Authorizatoin Server ] -- (D) Access Token --> [ Client ]
[ Client ] -- (E) Access Token --> [ 3.Resource Server ]{rows:2;}
[ 3.Resource Server ] -- (F) Protected Resource --> [ Client ]

效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
+--------+ (A) Authorizatoin Request +------------------------+
| | ---------------------------> | |
| | | 1.Resource Owner |
| | (B) Authorizatoin Grant | |
| | <--------------------------- | |
| | +------------------------+
| | (C) Authorizatoin Request +------------------------+
| | ---------------------------> | |
| Client | | 2.Authorizatoin Server |
| | (D) Access Token | |
| | <--------------------------- | |
| | +------------------------+
| | (E) Access Token +------------------------+
| | ---------------------------> | |
| | | 3.Resource Server |
| | (F) Protected Resource | |
| | <--------------------------- | |
+--------+ +------------------------+


Graph::Easy输出中文格式有误解决方案

有大神道出了输出中文格式有误的原因:

UTF8 中,汉字是 3 字节,而对于显示来说,等宽字体的汉字是 2 倍普通字母宽。这样在排版时,你必须知道一个字符串在视觉上是多宽,才可能用 ascii 字符拼接出正确的方框和连线。
——云风

具体方法是在编译前修改@app/lib/Graph/Easy.pm&&@app/lib/Graph/Easy/Node.pm这2个文件给它打上补丁。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
diff --git a/lib/Graph/Easy.pm b/lib/Graph/Easy.pm
index 0ae40fd..b67bacc 100644
--- a/lib/Graph/Easy.pm
+++ b/lib/Graph/Easy.pm
@@ -1570,7 +1570,9 @@ sub as_ascii
# select 'ascii' characters
$self->{_ascii_style} = 0;
- $self->_as_ascii(@_);
+ my $asc = $self->_as_ascii(@_);
+ $asc =~ s/(\x{FFFF})//g;
+ $asc;
}
sub _as_ascii
diff --git a/lib/Graph/Easy/Node.pm b/lib/Graph/Easy/Node.pm
index b58f538..6d7d7c7 100644
--- a/lib/Graph/Easy/Node.pm
+++ b/lib/Graph/Easy/Node.pm
@@ -1503,6 +1503,9 @@ sub label
$label = $self->_un_escape($label) if !$_[0] && $label =~ /\\[EGHNT]/;
+ # placeholder for han chars
+ $label =~ s/([\x{4E00}-\x{9FFF}])/$1\x{FFFF}/g;
+
$label;
}

要了解更多,请直接围观云风博客相关文章


Graph::Easy安装方法

主要介绍在MacOS系统上安装方法,本文模拟安装Graph::Easy版本为0.76。

  1. 首先在Graph::Easy的官方镜像点CPAN下载下载安装包Graph-Easy-0.76.tar.gz
  2. 解压安装包=>tar -xzf Graph-Easy-0.76.tar.gz
  3. 进入到解压的目录中cd Graph-Easy-0.76
  4. 如果要解决中文输出问题,请把上面提到的patch文件更新到包中的指定文件中。
  5. 运行perl Makefile.PL来创建make文件,同时执行make test来运行测试套件。
  6. 如果所有的测试都PASS通过了,以超管理员权限执行编译:sudo make install
  7. 完成安装了。可以创建一个写好的foo.txt并使用命令graph-easy foo.txt来测试效果。

[回头了解Graph::Easy更多有趣用法?]


还有没有傻瓜一点的方法?

有的有的,你可以使用一个可视化的ASCII字符图制作网站,这个网站也是个厉害得飞起的神奇。

asciiflow

我在了解这款Graph::Easy之前就是一直使用asciiflow来制作字符图的,可以说相当容易上手和保存。

但是不得不说,用过了Graph::Easy之后就对它爱不释手了,原因不仅仅因为熟悉语法后制图速度更快,最讨我欢喜的是Graph::Easy能够帮我自动排版布局,个性化设置也符合程序员思维,让我更加专注在内容的编辑上。希望你也会喜欢哈哈哈


参考