零基础学编程029:程序员作图不用笔

现在写专业文章离不开图,有些图非常复杂但非常有规律,用PowerPoint或Visio画都很吃力,这时候会编程就轻松多了,比如下面这张状态转换图:

再比如这张数据结构图:

再比如英文小说《欺骗的女儿》中的人物关系图:

再比如这张超复杂的网络结点图:

有些图看起来简单,可能用PowerPoint画也费不了多少时间,但如果这种图需要频繁调整,那工作量可就大了去了。比如程序员经常画的流程图、类图、数据结构图等,公司里经常画的组织结构图、工作流图等。

对于这类非常有规律的图,还有一个强大的工具,它就是GraphViz。上面举的几个例图都是摘自它的官网:http://www.graphviz.org。这个GraphViz不仅仅是一个工具,而且还对应了一种画图的语言,称为DOT Language

安装与运行

到官网上点击Download链接,可以看到各种平台的下载安装包,支持Linux、Windows、Mac,我下载的是Windows平台的graphviz-2.38.msi安装包,安装过程一路默认下一步即可。完成之后,从开始菜单中找到gvedit.exe,运行它出现主界面。

Hello World

任何语言都有个Hello World,DOT Language也不例外。从File菜单中点击New,会新建一个子窗口,名称为graph1.gv,所有GraphViz的文件的扩展名都为.gv,刚才的gvEdit.exe的意思也明白了吧?

在文本编辑窗口中输入以下代码:

digraph G {
    hello -> world
}

再点击Graph菜单中的Layout,或者直接按F5键,弹出一个View窗口,一张简单的图就画出来了。

简单解释一下:

  • digraph表示有向图,是Directed Graph的缩写形式,什么是有向图?请参考《图论》
  • G是图的名称
  • 花括号{ }内是图形的描述语句
  • hello 和 world是两个节点node
  • -> 表示左边指向右边的一个边edge

类与对象图

在《零基础学编程028:面向对象编程OOP》里我画了一张图,实际上就是用GraphViz生成的。

图并不复杂,直接看代码:

digraph G {
    node[shape=box]
    Stock[style=filled]
    Stock -> {google; amazon; facebook; apple}
}

花括号内的代码就三行,记得按F5看看运行效果,解释一下:

  • node[ ... ]表示对图中的所有结点统一进行设置
  • [ ] 中设置一些属性,称为attr
  • shape=box把结点设置为矩形
  • Stock是结点的名称,由于前面已经设置了shape=box,所以也为矩形
  • stype=filled,填充的矩形
  • Stock -> {google; amazon; facebook; apple}相当于以下四句 Stock -> google Stock -> amazon Stock -> facebook Stock -> apple

小结:

  • GraphViz的语法挺简单,里面主要是结点node边edge
  • -> 表示一条有向边
  • 最复杂的是Attr,里面可以设置填充、排列、颜色、链接等等,详细内容以后再说,也可以参考官网的Documentation链接,长达N页的全英文详细说明,点击“阅读原文”慢慢看吧

--- END ---

原文发布于微信公众号 - 申龙斌的程序人生(slbGTD)

原文发表时间:2017-03-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

dedecms利用addfields body在首页调用文章内容

  开源程序比较好的一点是可以进行二次开发,比如ytkah想要开发一个专家出诊表的功能模块,如下图所示,每天的专家都不一样,可以用到内容模型,但是相对比较复杂;...

3296
来自专栏phodal

如何设计完善的构建系统,为日常开发提速一倍

在搭建开发环境的构建系统时,我们关注二点: 提高效率,对于大部分事务的自动化,如自动编译代码、自动重启服务。 代码质量,编码完成时,我们则转而关注于代码的质量。...

1747
来自专栏FreeBuf

Paypal的一个Dom型XSS漏洞分析

前言 DOM xss也称为第三种类型的xss或者类型0。现在DOM型的xss越来越多了,除了因为各种JS库比如YUI,Jquery,Jquery mobile...

1895
来自专栏编程

python3百度指数抓取

分类:python 作者:TTyb文章发表于 2016-11-12 百度指数抓取,再用图像识别得到指数前言: 土福曾说,百度指数很难抓,在淘宝上面是20块1个关...

20510
来自专栏代码GG之家

IDA Pro 工具介绍

*转载请注明来自游戏安全实验室(GSLAB.QQ.COM) 原文地址:http://gslab.qq.com/article-112-1.html ? IDA ...

5567
来自专栏小樱的经验随笔

深入理解USB流量数据包的抓取与分析

在一次演练中,我们通过wireshark抓取了一个如下的数据包,我们如何对其进行分析?

1032
来自专栏coding

听说,撸代码,ide与vim更配哦vim折腾记vim常用命令

在选择编辑器上面,我是一个纠结的人,曾经年少的我执着地追求一款万能的编辑器,可以支持所有编辑语言,灵活可定制,可纯粹用键盘操作。符合这种条件的编辑器,非vim莫...

652
来自专栏Bug生活2048

告别单调工作系列——利用python再次拯救漂亮妹子

记得帮妹子搞定自动提交表单之后的第三天,妹子端着奶茶乐呵呵的来找我,和我一番畅谈理想,又指点江山之后,终于切入了正题。

522
来自专栏转载gongluck的CSDN博客

SAPI SDK的介绍

我们都使用过一些某某词霸的英语学习工具软件,它们大多都有朗读的功能,其实这就是利用的Windows的TTS(Text To Speech)语音引擎。它包含在Wi...

3417
来自专栏守候书阁

用vue一个计算属性,实现一个常见表单交互效果

vue.js是现在用的非常火热的一个前端框架,表单又是网站基本不会缺少的一环。用vue操作表单。表单的操作方式也是多种多样。今天我说的,就是我项目那里做的这一种...

491

扫描关注云+社区