文档章节

ASCII Art:使用纯文本流程图

ME_ROBOT
 ME_ROBOT
发布于 2016/04/04 10:58
字数 1685
阅读 364
收藏 1

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

ASCII Art:使用纯文本流程图

我们使用纯文本写代码,有了Markdown又可以使用纯文本写文档,那么对于更直观的信息表达方式——图片,能不能使用纯文本描述呢?

另外,你是否见到过这样的注释:


ASCII art图像

没错,这种逼格极高的ASCII图片注释方式就是我们要讨论的话题。

使用纯ASCII文本表达图像的方式有什么好处呢?大致有下面几点:

  1. 装B;没啥好解释的。

  2. 可以在代码注释里面用图像充分表达信息;没图say个jb?一图胜千言。迄今为止好像没有什么IDE可以支持直接在代码编辑里面放图片的,在另外一些纯文本的场合也是如此。比如RFC的文档都是txt,里面很多图都是纯ASCII表达。

  3. 你以为仅仅是一个纯文本图片这么简单?它可以转换为普通的诸如png格式的真正的图片,还支持SVG矢量图!

好了,也许有人说markdown的一些拓展格式不也是支持流程图的吗?它使用的flowchart.js 确实可以很好滴完成一些漂亮的流程图,还有 plantuml和图片DSL语言 dot及它的软件包graphviz等;没错,它们可以使用纯文本表达图像,但它们不是真正的图像;无法嵌入文本代码中,只有在经过渲染之后才能直观地看到图。

又有人说,我知道 asciiflow 这个网站,可以绘制这种流程图,完美解决我的需求。但是,你在手动绘制的时候,是不是要考虑图像的各种细节?大小,放置位置,对齐方式?我们关注的应该是图像本身,而不是如何绘制这个图。markdown为什么这么易用?就是因为我们不用关心文档的格式,不用考虑什么字体,几级标题等等繁琐的格式,可以专注于创作本身。

姑且你已经认同了这种使用ASCII表达图像方式的优点,但是...这种图难道要使用手一个个字符地敲出来吗??如果真的这么做,简直不要太麻烦!光在前面添加一个空格,后面的所有行都需要改;我们需要一个自动化工具。

Graph::Easy

Graph::Easy 就是今天要介绍的主角;它是 perl的一个软件包,可以使用perl代码直接描述图像;当然,我们肯定不会为了画个图专门去学习perl;

这个软件包的强大之处在于: 它定义了一套非常简单易用的专门用来描述图像的DSL(领域专用语言),我们可以像写代码一样表达我们需要描述的图像(放心,这个语法非常简单);不用关心图像里面如何布局;这种语言经过处理可以得到ASCII图像,直接放在代码注释中;如果需要还可以转换成png或者矢量图等格式。

先举个简单的例子,感受一下:

[ Bonn ] --> [ Koblenz ] --> [ Frankfurt ] --> [ Dresden ][ Koblenz ] --> [ Trier ] { origin: Koblenz; offset: 2, 2; }
  --> [ Frankfurt ]

这种DSL经过渲染之后得到的ASCII图是这样的:

+------+     +---------+                   +-----------+     +---------+| Bonn | --> | Koblenz | ----------------> | Frankfurt | --> | Dresden |+------+     +---------+                   +-----------+     +---------+
               |                             ^
               |                             |
               |                             |
               |             +-------+       |
               +-----------> | Trier | ------+
                             +-------+

安装

  1. 首先需要安装 graphviz 软件包,可以在graphviz官网下载;mac用户可以 brew install graphviz;其他linux发行版参考官网

  2. 安装perl;mac和linux用户可以略过;一般系统自带,没有的话和windows一起去perl官网查询如何安装; 据说windows下有傻瓜包activeperl;请自行搜索。

  3. 安装cpan; 这个是perl的软件包管理,类似npmpipapt-get; mac下直接在命令行输入 cpan 命令,一路next即可。其他系统参考cpan官网

  4. 安装Graph::Easy ;这一步就很容易了;在命令行输入cpan进入cpan shell;然后输入 install Graph::Easy即可。

使用

使用分为两步

  1. 使用Graph::Easy DSL的语法描述图像,存为文本文件,比如 simple.txt

  2. 使用 graph-easy 命令处理这个文件: graph-easy simple.txt

最简单的使用方式就是这样;当然,Graph::Easy 不仅仅支持自己的DSL语法,它还支持诸如dot 这种较为通用的图像描述语言;可以直接读取dot 格式的输入,产生其他的诸如 ascii,png,svg格式的图像。

语法

注释

注释用 # 表达;注意 # 之后,一定需要加空格;由于历史原因;Graph::Easy的颜色也使用了 # ,不加空格会解析失败。

############################################################### 合法的注释###############################################################有问题的注释node { label: \#5; }      # 注意转义!edge { color: #aabbcc; }  # 可以使用颜色值

空格

空格通常没有什么影响,多个空字符会合并成一个,换行的空字符会忽略;下面的表述是等价的。

[A]->[B][C]->[D]
[ A ] -> [ B ][ C ] -> [ D ]

节点(Node)

用中括号括起来的就是节点,我们简单可以理解为一些形状;比如流程图里面的矩形,圆等;

[ Single node ][ Node A ] --> [ Node B ]

可以用逗号分割多个节点:

[ A ], [ B ], [ C ] --> [ D ]

上面的代码图像如下:

+---+     +---+     +---+| A | --> | D | <-- | C |+---+     +---+     +---+
            ^
            |
            |
          +---+
          | B |
          +---+

边(Edges)

将节点连接起来的就是边;Graph::Easy 的DSL支持这几种风格的边:

        ->              实线
        =>              双实线
        .>              点线
        ~>              波浪线
        - >             虚线
        .->             点虚线
        ..->            dot-dot-dash
        = >             double-dash

可以给边加标签,如下:

[ client ] - request -> [ server ]

结果如下:

+--------+  request   +--------+| client | ---------> | server |+--------+            +--------+

属性(Attributes)

可以给节点和边添加属性;比如标签,方向等;使用大括号 {}表示,里面的内容类似css,attribute: value

[ "Monitor Size" ] --> { label: 21"; } [ Big ] { label: "Huge"; }

上面的DSL输入如下:

+----------------+  21"   +------+| "Monitor Size" | -----> | Huge |+----------------+        +------+

Graph::Easy提供了非常多的属性; 另外,Graph::Easy文档非常详细,建议通读一遍;了解其中的原理和细节,对于绘图和布局有巨大帮助。有时间的话我就翻译一下。

实例

语法是不是非常简单?有了这些知识,我们就可以建立自己的流程图了;Have a try!来个MVP模式的示意图试试~

  1. 新建文件,vi mvp.txt; 输入以下代码:

[ View ] {rows:3} - Parse calls to -> [ Presenter ] {flow: south; rows: 3} - Manipulates -> [ Model ]
[ Presenter ] - Updates -> [ View ]
  1. 保存然后退出;命令行执行 graph-easy mvp.txt, 输入效果如下:

+------+  Parse calls to   +--------------+
|      | ----------------> |              |
| View |                   |  Presenter   |
|      |  Updates          |              |
|      | <---------------- |              |
+------+                   +--------------+
                             |
                             | Manipulates
                             v
                           +--------------+
                           |    Model     |
                           +--------------+

两行代码就搞定了!自动对齐,调整位置,箭头,标签等等;我们完全不用管具体图形应该如何绘制,注意力集中在描述图像本身;还在等什么!赶紧试一试吧!!

原文:http://weishu.me/2016/01/03/use-pure-ascii-present-graph/


本文转载自:http://www.jianshu.com/p/1f0b295874eb

ME_ROBOT
粉丝 1
博文 11
码字总数 1107
作品 0
西安
程序员
私信 提问
Atom飞行手册翻译: 3.4 文本处理包

文本处理包 在我们写完第一个包之后,让我们看一看我们能写出来的其它包的例子。这一节会引导你创建一个简单的命令来将选中的文字替换为字符画(ascii art)。在你在单词“cool”选中的时候运...

apachecn_飞龙
2015/08/03
0
0
CSDN-markdown编辑器使用帮助

版权声明:本文为Cooevjnz原创文章,未经Cooevjnz允许也可以转载! https://blog.csdn.net/JacaJava/article/details/82749406 这里写自定义目录标题 欢迎使用Markdown编辑器 欢迎使用Markdow...

扩展的灰
2018/09/17
0
0
使用CSDN-markdown编辑器

欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变...

13期王小波
2018/09/28
0
0
yEd 3.9 发布,强大的流程图绘制工具

yed 是一个画流程图的工具,不是开源软件,但是可以让你摆脱 Microsoft Office Visio ,也有linux下的版本,整个程序是java开发的,确实比较强大。 yEd 3.0 引入一个新的 “SmartFree” 标签模...

红薯
2012/02/02
2.1K
2
程序猿必备的10款web前端开发插件五

  1.SVG实现的一组超华丽Loading加载动画   Loading动画我们已经分享过很多了,大部分都是基于纯CSS3的,或者有些也有jQuery协助完成。比如这个10组蓝色风格的纯CSS3 Loading动画图标就非...

爱前端
2017/11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mars-config 动态配置管理

mars-config 码云地址:https://gitee.com/fashionbrot/mars-config 介绍 spring mvc 、springboot 动态配置系统。http 轮训方式 更新 动态配置 软件架构 软件架构说明 后端使用技术 :sprin...

fashionbrot
40分钟前
9
0
女朋友玩吃鸡手游被开挂老哥骗炮,我见义勇为将骗子绳之以法

大家好,我是乔哥。 晚上10点以后下班后我回到自如出租房里面,开始处理公众号粉丝发来的消息,一条一条处理,突然看到了这么几条消息,吸引了我的眼球: 然后我就和这位女粉丝小红(化名)聊...

gzc426
45分钟前
4
0
两款软件

fadetop保护眼睛软件 Snipaste截图软件

伟大源于勇敢的开始
今天
7
0
06.全局锁和表锁

根据加锁的范围,MySQL里面的锁大致可以分成全局锁、表级锁和行锁三类。 全局锁 全局锁就是对整个数据库实例加锁。MySQL提供了一个加全局读锁的方法,命令是flush tables with read lock(FTW...

scgaopan
今天
7
0
图解安装CentOS8

最近正式发布了CentOS8!迫不及待地准备下载了CentOS8镜像,准备体验下,工作繁忙无暇理会。 今天抽空安装体验下~ 可从CentOS官网下载:https://centos.org/download/ 为了快速可以选择从国...

技术训练营
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部