LUOAGE

Appearance

Dot Language ​

Dot language 是一种描述 图形的语言, graphviz 使用该语言开发了一系列的工具，包括顺序图，流程图，网络图，UML 等.

定义图 ​

图是一个块结构，使用大括号表示 {}, 定义图有两种方式，第一种是有向图, 使用 -> 链接, 其中 direction_graph 表示图名称, 可以使用引号或者不使用

digraph "direction_graph" {
  a -> b
}
dot
digraph "direction_graph" {
  rankdir=LR
  a -> b
}

第二种无向图，使用 -- 链接

graph "direction_graph" {
  a -- b
}
dot
graph "undirection_graph" {
  rankdir=LR
  a -- b
}

图结构 ​

属性遵循继承原则，子图像继承父类属性

  • node

    定义每个节点的情况，比如颜色，大小，形状等

node在连接符的两端, 结构是 [], 具体属性请参照上面的链接

dot
graph "G" {
  node [
    color=red
    fillcolor="#e9e9e9"
    style=filled
    shape=diamond
  ]
  A [label="ABC"]
  B [shape=square;fontsize=20;fontcolor=white]
}
  • edge

    对链接线的描述, 包括连接线形状，箭头形状，颜色等

线连接两个 node, 结构是 []

dot
graph "G" {
  rankdir=LR
  edge [
    style=dashed
  ]
  A -- B
  B -- C [style=dotted]
  C -- D [style=invis]
}
  • graph

    定义图的排列顺序, 背景色等

dot
graph G {
  bgcolor="orange"
  label="橘黄色背景"

  B1 -- C1
  A -- B1
  A1 -- B1
  A2 -- B1
}
dot
graph G {
  rankdir=LR
  B1 -- C1
  A -- B1
  A1 -- B1
  A2 -- B1
}

subgraph定义图片组, 其中必须以关键字 subgraph 定义，名字必须以 cluster 开头，比如 subgraph cluster1 或者 subgraph cluster_name, 如果名字不是以 cluster 开头， 就是普通的分组。

graph G {
  graph [
    bgcolor="#f3f3f3"
  ]
  subgraph cluster1 {
    bgcolor=red
    B1 -- C1
  }
  A [shape=square]

  A -- B1
  A1 -- B1
  A2 -- B1
  label="主题名"
}
dot
graph G {
  graph [
    bgcolor="#f3f3f3"
  ]
  subgraph cluster1 {
    bgcolor=red
    B1 -- C1
  }
  A [shape=square]

  A -- B1
  A1 -- B1
  A2 -- B1
  label="主题名"
}
  • 自定义块
dot
digraph G {
  T1 [
    color=green
    label="T1"
  ]
  T2 [
    color=orange
    label=<<table border="0" cellborder="1" cellspacing="0" cellpadding="4">
      <tr>
        <td>1234</td>
      </tr>
      <tr>
        <td>123</td>
      </tr>
    </table>>
    shape=square
  ]
  T1 -> T2 [color=orange]
}

史诗级 git 操作图 ​

https://graphviz.gitlab.io/Gallery/directed/git.html

dot
digraph git_basics {
	graph [
		label = "Basic git concepts and operations\n\n"
		labelloc = t
		fontname = "Helvetica,Arial,sans-serif"
		fontsize = 20
		layout = dot
		rankdir = LR
		newrank = true
	]
	node [
		style=filled
		shape=rect
		pencolor="#00000044" // frames color
		fontname="Helvetica,Arial,sans-serif"
		shape=plaintext
	]
	edge [
		arrowsize=0.5
		fontname="Helvetica,Arial,sans-serif"
		labeldistance=3
		labelfontcolor="#00000080"
		penwidth=2
		style=dotted // dotted style symbolizes data transfer
	]
	changes [
		color="#88000022"
		label=<<table border="0" cellborder="1" cellspacing="0" cellpadding="4">
			<tr> <td> <b>changes</b><br/>in the working tree </td> </tr>
			<tr> <td align="left"><i>To view: </i><br align="left"/>
			git diff
			<br align="left"/></td> </tr>
		</table>>
		shape=plain
	]
	staging [
		fillcolor="#ff880022"
		label=<<table border="0" cellborder="1" cellspacing="0" cellpadding="4">
			<tr> <td> <b>staging area</b><br/>(cache, index)</td> </tr>
			<tr> <td align="left"><i>To view: </i><br align="left"/>
			git diff --staged
			<br align="left"/></td> </tr>
		</table>>
		shape=plain
	]
	staging -> HEAD:push [label="git commit" weight=1000 color="#88000088"]
	stash [
		fillcolor="#0044ff22"
		label=<<table border="0" cellborder="1" cellspacing="0" cellpadding="4">
			<tr> <td> <b>stash</b></td> </tr>
			<tr> <td align="left"><i>To view:</i><br align="left"/>
			git stash list
			<br align="left"/></td> </tr>
		</table>>
		shape=plain
	]
	stash_push [
		label="git stash [push]"
		style=""
		shape=plain
		color="#00008844"
	]
	{
		edge [arrowhead=none color="#00008844"]
		changes ->  stash_push
		stash_push -> staging
	}
	changes -> stash [
		dir=back
		xlabel="git stash pop"
		color="#00000088" weight=0]
	stash_push -> stash [xdir=back color="#00008844" minlen=0]
	HEAD [
		fillcolor="#88ff0022"
		label=<<table border="0" cellborder="1" cellspacing="0" cellpadding="3">
			<tr> <td port="push" sides="ltr"> <b>HEAD </b>of</td> </tr>
			<tr> <td port="pull" sides="lbr"> the current branch</td> </tr>
			<tr> <td port="switch" align="left">
				<i>To view:</i>
				<br align="left"/>
				git show<br align="left"/>
				git log
				<br align="left"/>
			</td> </tr>
			<tr> <td align="left">
				<i>To change branch:</i><br align="left"/>
				git switch ...
				<br align="left"/>
				git checkout ...
				<br align="left"/>
			</td> </tr>
		</table>>
		shape=plain
	]
	remote [
		label="remote branch"
		shape=box
		color="#00000022"
		fillcolor="#00ff0022"
	]

	HEAD:push -> remote [label="git push" color="#88000088"]
	HEAD:pull -> remote [dir=back label="git pull" color="#00440088"]
	branches [
		fillcolor="#00888822"
		label=<<table border="0" cellborder="1" cellspacing="0" cellpadding="4">
			<tr> <td> <b>local branches</b> </td> </tr>
			<tr> <td align="left"><i>To view:</i><br align="left"/>
			git branch [--list]
			<br align="left"/></td> </tr>
			</table>>
		shape=plain
	]
	changes -> staging [label="git add ...    \ngit reset      " color="#88000088"]
	discard [shape=plaintext style=""]
	changes -> discard [label="git restore ..." color="#88000088"]
	{rank=same changes discard}
	// UML style aggregation
	HEAD:switch -> branches [
		dir=back
		style=""
		penwidth=1
		arrowtail=odiamond
		arrowhead=none
		color="#00000088"
	]
}
// © 2022 Costa Shulyupin, licensed under EPL

Reference ​