■ はじめに
https://dk521123.hatenablog.com/entry/2023/06/15/004815
の続き。 今回は、DOT言語の使えそうな文法について、 ちょこちょこ書き溜めていく なお、以下のPlayground で触りながらやるのが一番わかりやすい
Playground
http://magjac.com/graphviz-visual-editor/
目次
【０】使用上の注意 【１】コメントアウト 【２】Rank １）rankdir ２）rank 【３】Node/Edgeのレイアウト １）shape ２）style ３）color ４）label 【４】graph １）layout ２）nodesep ３）ranksep ４）margin ５）splines 【５】subgraph １）compound
【０】使用上の注意
* 基本、「先勝ち」で先頭のものから順に反映される => 反映されない、もしくは、意図した反映にならない等があった場合は 反映したものを前後させてTry＆Errorしてみるといいかも。
【１】コメントアウト
//コメント /*コメント*/ #コメント
【２】Rank
* 以下のサイトが分かりやすい
https://qiita.com/miyase256/items/c3954bb51aa23a3ad13a
* 「【４】graph」の「３）ranksep」も参照しておいたほうがいい
１）rankdir
* グラフの向き
https://graphviz.org/docs/attrs/rankdir/
digraph { // TB:Top to bottom / LR: Left to right / RL: Right to left rankdir="TB" a -> b -> c; }
２）rank
* Nodeの位置（ランク）を設定 + rank="min" / rank="source" + rank="same" + rank="max" / rank="sink"
https://graphviz.org/docs/attrs/rank/
digraph { ranksep=0.3; nodesep=0.7; A; B; C; D; E; {rank = source; A; C;} {rank = same; B; D;} A -> B -> C; D -> E; B -> D; }
【３】Node/Edgeのレイアウト
１）shape
* Node（節）の見た目の形を指定
https://graphviz.org/doc/info/shapes.html
例
a1[shape="ellipse"]; // box/circle/box3d/note/cylinder/component etc
２）style
* Node（節）/ Edge（線）のスタイルを指定
https://graphviz.org/docs/attr-types/style/
* どんな種類があるかは、以下の公式ドキュメントを参照 => e.g. bold（太字）、dashed（点線）、invis（invisible=非表示） etc
https://graphviz.org/docs/attr-types/style/
例
t1[shape = box, style = "dashed,rounded,filled"];
３）color
* Node（節）/ Edge（線） の色を指定
https://graphviz.org/docs/attrs/color/
* どんな種類があるかは、以下の公式ドキュメントを参照 => e.g. darkorange1 etc.
https://graphviz.org/doc/info/colors.html
例
t1[shape = box, color = "#9BD4A3"]; t2[shape = box, style = "dashed,rounded,filled" color="lightpink"];
４）label
* 表示文字列の指定
https://graphviz.org/docs/attrs/label/
https://graphviz.org/doc/info/shapes.html#record
例
http://magjac.com/graphviz-visual-editor/
digraph { node [shape=Mrecord]; a1 [label="<f0> left|<f1> mid\ dle|<f2> right"]; a2 [label="<f0> one|<f1> two"]; a3 [label="hello\nworld |{ b |{c|<here> d|e}| f}| g | h"]; a1:f1 -> a2:f0; a1:f2 -> a3:here; }
【４】graph
https://graphviz.org/docs/graph/
１）layout
graph{ graph[layout=<レイアウト>] # e.g. dot, osage ... ... } # 以下のサイト参照。
http://www.yosbits.com/wordpress/?page_id=4845
２）nodesep
* Node間の最小余白 * type: double, default: 0.25, minimum: 0.02
https://graphviz.org/docs/attrs/nodesep/
３）ranksep
* ランク間の幅を指定
https://graphviz.org/docs/attrs/ranksep/
digraph { ranksep=0.3; nodesep=0.7; A; B; C; D; E; {rank = source; A; C;} {rank = same; B; D;} A -> B -> C; D -> E; B -> D; }
４）margin
* マージン（余白の設定）
５）splines
* Node間のEdgeの表現の仕方 cf. spline(スプライン) = 薄く細長い一片 => 以下の公式ドキュメントの例を見るのが一番早い
https://graphviz.org/docs/attrs/splines/
【４】subgraph
digraph { subgraph cluster0 { a -> b } subgraph cluster1 { A -> B } }
https://hackmd.io/@maxy8821/HkO3cjzQr#subgraph-cluster%E2%97%8B%E2%97%8B
１）compound
* Edge（線）がクラスタ（subgraph）に繋げるかどうか
https://graphviz.org/docs/attrs/compound/
例
http://magjac.com/graphviz-visual-editor/
digraph G { compound=true; # 上のURLのPlayGrandでtrue/falseを切り替えればわかる node [ shape = "Mrecord" ]; subgraph cluster_0 { style = rounded; label = "Zero"; Node_0_0 -> Node_0_1; }; subgraph cluster_1 { style = rounded; label = "One"; Node_1_0 -> Node_1_1; }; subgraph cluster_2 { style = rounded; label = "Two"; Node_2_0 -> Node_2_1; }; NodeA [ style = rounded ]; NodeA -> Node_0_0 [lhead = cluster_0]; NodeA -> Node_1_0 [lhead = cluster_1]; NodeA -> Node_2_0 [lhead = cluster_2]; }
関連記事
DOT言語 ～ 基礎知識編 ～
https://dk521123.hatenablog.com/entry/2023/06/15/004815
DOT言語 ～ 環境設定編 ～
https://dk521123.hatenablog.com/entry/2023/07/18/120407
DOT言語表示ツール ～ d3-graphviz ～
https://dk521123.hatenablog.com/entry/2023/06/18/102448
Python + DOT言語で図作成するには
https://dk521123.hatenablog.com/entry/2023/06/14/174104
Python で d3-graphviz を使ってアニメーション表示ツールを作る
https://dk521123.hatenablog.com/entry/2023/06/24/000000
sqlparser-rs ～ SQL Parser for Rust ～
https://dk521123.hatenablog.com/entry/2023/06/12/000000
