跳转至
本文阅读量 次

1. Graphviz 使用

1.1 概述

graphviz 支持的实体主要包括

  • nodes
  • edges
  • graphs
  • subgraphs
  • clusters

1.2 dot 语法简介

Note

在 dot 文件中，属性在某一行进行设置后，其后的相同元素均会自动应用该属性。

Note

当有多个属性时，通过空格 分隔不同的属性对

1.3 命令行

1.3.1 dot

示例 

dot -Tsvg input1.dot input2.dot -Kneato \
  -Gfontcolor=red -Glabel="My favorite letters" \
  -Nfontcolor=red -Nshape=rect \
  -Ecolor=red -Earrowhead=diamond

  • -G 设置 graph 默认属性
  • -N 设置 node 默认属性
  • -E 设置 edge 默认属性

1.3.2 nop

1.4 常用属性

名称 取值 文档地址 示例
bgcolor https://graphviz.org/docs/attrs/bgcolor/ ⧉
color https://graphviz.org/docs/attr-types/colorList/ ⧉
dir https://graphviz.org/docs/attrs/dir/ ⧉
https://graphviz.org/docs/attr-types/dirType/ ⧉
fontcolor https://graphviz.org/docs/attrs/fontcolor/ ⧉
fontname https://graphviz.org/docs/attrs/fontname/ ⧉
label https://graphviz.org/docs/attrs/label/ ⧉
layout https://graphviz.org/docs/attrs/layout/ ⧉
rank same
min
max
source
sink		 https://graphviz.org/docs/attrs/rank/ ⧉
rankdir TB
BT
LR
RL		 https://graphviz.org/docs/attrs/rankdir/ ⧉
shape https://graphviz.org/docs/attrs/shape/ ⧉
支持的 shape 列表 https://graphviz.org/doc/info/shapes.html ⧉
style https://graphviz.org/docs/attrs/style/ ⧉
https://graphviz.org/docs/attr-types/style/ ⧉
URL https://graphviz.org/docs/attrs/URL/ ⧉ 可以指定图形或边的点击链接地址

1.5 示例

1.5.1 图形或边上增加点击跳转

可以通过 URL 和 target 参数分别制定图形、边等点击时打开的跳转链接和跳转方式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
graph {
  label="Vincent van Gogh Paintings"
  URL="https://en.wikipedia.org/wiki/Vincent_van_Gogh"

  subgraph cluster_self_portraits {
    URL="https://en.wikipedia.org/wiki/Portraits_of_Vincent_van_Gogh"
    label="Self-portraits"

    "Self-Portrait with Grey Felt Hat" [URL="https://www.vangoghmuseum.nl/en/collection/s0016V1962"]
    "Self-Portrait as a Painter" [URL="https://www.vangoghmuseum.nl/en/collection/s0022V1962"]
  }

  subgraph cluster_flowers {
    URL="https://en.wikipedia.org/wiki/Sunflowers_(Van_Gogh_series)"
    label="Flowers"

    "Sunflowers" [URL="https://www.nationalgallery.org.uk/paintings/vincent-van-gogh-sunflowers"]
    "Almond Blossom" [URL="https://www.vangoghmuseum.nl/en/collection/s0176V1962" target=blank]
  }
}

1.6 注意事项

  • subgraph 必须是以 cluster 作为开始，才能在最终图形上展示 subgraph 的外框

1.7 最佳实践

  • 把 subgraph 定义和联通分开编写，先写定义，再写联通
  • 因为 subgraph 的 node 最终被包含在哪个 subgraph 是通过该 node 第一次出现的 subgraph 归属的；如果不先书写定义，则对于跨 cluster 的联通时，可能出现 node 出现在了引用方的 subgraph 的情况

1.8 参考