Graphviz dot简明教程

graphviz是一个用特殊的文本语言来生成图片的应用,可以生成有向图和无向图。dot就是那个特殊的文本语言。

dot大概长这样:

graph {
    a -- b;
    c -- d;
}

生成图片:

$ dot -Tpng -o dot_demo.png dot_demo.dot

图片长这样:

dot demo

安装

$ sudo pacman -S graphviz

语法

首先我们要声明一个图,可以使用 graph,代表无向图,也可以使用 digraph 代表有向图。

graph graph_name {
    a -- b;
    c -- d;
}

graph_name 是可选的,如果没有,就是一个匿名图。其中,a, b, c, d 都是一个节点,可以使用 node 关键字来进行属性设定,例如上面的变成:

graph graph_name {
    node [color=Red];

    a -- b;
    c -- d;
}

生成的图片就会变成:

dot demo red node

这些关键字包括:

  • node: 修饰节点
  • edge: 修饰连线

而常见的可以修饰的属性包括下面这些:

  • bgcolor: 背景颜色
  • shape: 形状
  • size: 大小

详见:https://graphviz.gitlab.io/_pages/doc/info/attrs.html

标注和变量声明

有的时候我们需要在连线上做一些标注,或者是声明节点以便重复使用,看个例子就晓得了:

digraph graph_name {
    T [label="Teacher" color=Blue, fontcolor=Red, fontsize=24, shape=box]      // node T
    P [label="Pupil" color=Blue, fontcolor=Red, fontsize=24, shape=box]  // node P

    T->P [label="Instructions", fontcolor=darkgreen] // edge T->P
}

生成的图片是:

dot demo label

好了,就介绍这么多,其余的还是需要自己翻文档,不过这些知识已经够日常使用了。



更多文章
  • Linux高分屏支持
  • GCC默认的头文件搜索路径
  • 读《远见-如何规划职业生涯3大阶段》
  • 后端工程师学前端(五): SASS
  • 后端工程师学前端(四): CSS进阶(盒子模型)
  • 读《投资中最简单的事》
  • 后端工程师学前端(三): CSS进阶(特指度、单位和字体族)
  • 后端工程师学前端(二): CSS基础知识(规则与选择器)
  • Swift语法笔记
  • 读《管理的实践》
  • 后端工程师学前端(一): HTML
  • frp 源码阅读与分析(二):TCP内网穿透的实现
  • 五天不用微信 - 爽得很
  • frp 源码阅读与分析(一):流程和概念
  • 学习frp源码之简洁的在两个connection之间转发流量