---
title: "Graphviz Intro"
whom: Winnie soon
tags: graphviz, flowcharts, diagrams, computation,tutorial
link: https://hackmd.io/@siusoon/graphvizIntro
license: CC BY-SA 4.0
---

### Graphviz

Developed in the early 1990's, [Graphviz](https://graphviz.gitlab.io/) is a free and open source graph visualization software. Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks.

More info [here](http://graphviz.gitlab.io/documentation/EGKNW03.pdf) [Ellson, John, Emden R. Gansner, Eleftherios Koutsofios, Stephen C. North, and Gordon Woodhull. "Graphviz and dynagraph—static and dynamic graph drawing tools." In Graph drawing software, pp. 127-148. Springer, Berlin, Heidelberg, 2004.]

### Key features

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/UnitedStatesGraphViz.svg/2560px-UnitedStatesGraphViz.svg.png">

- Work on Linux, Windows and Mac (download [here](https://graphviz.gitlab.io/download/))
- Coding language: [The DOT language](https://www.graphviz.org/doc/info/lang.html)
- Based on node, edge and graph attributes
- Output different file formats e.g PNG, SVG
- Learn from reading code:
- *https://graphviz.gitlab.io/gallery/
- http://graphviz.it/#/gallery/clust.gv (sdh, abstract)

### start()

:::success
**Intro**
1. Go to: https://dreampuf.github.io/GraphvizOnline/ or http://graphviz.it/#/new
2. Directional graph: `diagraph G {}`
4. relations (end with a semi-colon): `a -> b;`
5. More complex words: `"Artistic" -> "Practice";`
6. Overlapping connection: `a -> "Artistic Practice";`
7. Change direction (default top to bottom): `rankdir = LR;`
8. Comment line: `//comment anywhere`
9. edge: `b -> c [label="link"];`
10. different shapes & fontsize: `node[shape=box, fontsize="7"];`
//diamond, box, etc, https://graphviz.org/doc/info/shapes.html
10. line break (\n) of the text: `"Flowcharts" -> "flow\nof the\ncharts" -> b;`
11. positioning and ranking:`{rank=same; "a", "c"};`

==SAVE your code/image==

**Styling:**
1. styling e.g background color - first line: `bgcolor="yellow"`
1. styling e.g node color: `node[color=darkgoldenrod1];` //https://graphviz.org/doc/info/colors.html
3. styling e.g style: `style="dashed";` //filled
4. setting edge: `edge [arrowsize=3.5];`
5. cutomize individual nodes:

D [label="Diagram?" shape=diamond];
D -> D [label="no"];
D -> c [label="yes"];

6. setting directional edge:

D:s -> D:n [label="no"];
D:s -> c:n [label="yes"];

7. styling the connection (arrows):

D:s -> c:n [label="yes" color=blue penwidth=2.0 arrowhead=obox]; 

//https://www.graphviz.org/doc/info/arrows.html

**Advanced:**

1. layout mode:

layout=twopi //radial layout
layout=circo //circular layout
layout=neato //draw undirected graphs

2. create clusters (need to disable other layout mode):

subgraph cluster01 {
    graph[style=dashed];
    node[style=dashed];
    f -> e;
    D -> f -> "Flowcharts";    
}

:::

---

### Ref/Resource

- Graphviz: https://graphviz.gitlab.io/
- Gallery | Graphviz: https://graphviz.gitlab.io/gallery/

**Tutorial**
- A quick introduction to graphviz: https://www.worthe-it.co.za/blog/2017-09-19-quick-introduction-to-graphviz.html
- https://docs.deistercloud.com/content/Axional%20development%20libraries.20/Studio%20J2EE%20Server.4/Processors.12/Graphviz.30.xml?embedded=true
- https://manpages.debian.org/testing/graphviz/dot.1.en.html

**Graphviz web coding environment:**

- The live online graphviz editor “Graphviz it! - fiddle with diagrams”: http://graphviz.it/#/new
- Graphviz Web Editor: https://graphviz.herokuapp.com/

---

### Other examples - based on the text below:

>the diagram is a way of repositioning existing frameworks and of working out possible relations as well as divergences

(1) one whole paragraph

digraph G {
the diagram is a way of repositioning existing frameworks and of working out possible relations as well as divergences
}

digraph G {
the diagram is a way of repositioning existing frameworks and of working out possible relations as well as divergences
}

(2) break into words with connections

digraph G {
"the" -> "diagram" -> "is" -> "a" -> "way" -> "of" -> "repositioning" -> "existing" -> "frameworks" -> "and" -> "of" -> "working" -> "out" -> "possible" -> "relations" -> "as" -> "well" -> "as" -> "divergences";
}

digraph G {
"the" -> "diagram" -> "is" -> "a" -> "way" -> "of" -> "repositioning" -> "existing" -> "frameworks" -> "and" -> "of" -> "working" -> "out" -> "possible" -> "relations" -> "as" -> "well" -> "as" -> "divergences";
}

(3) rank direction

digraph G {
rankdir=LR;
"the" -> "diagram" -> "is" -> "a" -> "way" -> "of" -> "repositioning" -> "existing" -> "frameworks" -> "and" -> "of" -> "working" -> "out" -> "possible" -> "relations" -> "as" -> "well" -> "as" -> "divergences";
}

digraph G {
rankdir=LR;
"the" -> "diagram" -> "is" -> "a" -> "way" -> "of" -> "repositioning" -> "existing" -> "frameworks" -> "and" -> "of" -> "working" -> "out" -> "possible" -> "relations" -> "as" -> "well" -> "as" -> "divergences";
}

(4) layout as circo

digraph G {
layout=circo;
"the" -> "diagram" -> "is" -> "a" -> "way" -> "of" -> "repositioning" -> "existing" -> "frameworks" -> "and" -> "of" -> "working" -> "out" -> "possible" -> "relations" -> "as" -> "well" -> "as" -> "divergences";
}

digraph G {
layout=circo;
"diagram" -> "is" -> "a" -> "way" -> "of" -> "repositioning" -> "existing" -> "frameworks" -> "and" -> "of" -> "working" -> "out" -> "possible" -> "relations" -> "as" -> "well" -> "as" -> "divergences";
}

(5) label (edge) + rank (break it down)

digraph G {
"the" -> "diagram" ;
"is" -> "a" -> "way" -> "of";
"repositioning" -> "existing";
"frameworks" -> "and" -> "of" ;
"working" -> "out" -> "possible" ;
"relatons" -> "as" -> "well" -> 
"as" -> "divergences" [label="force"];

"repositioning" -> "divergences" [dir=both];
"relations" -> "possible" [dir=both];
"diagram" -> "repositioning" [dir=both];

{rank=same; "repositioning", "working"};
}

digraph G {
"the" -> "diagram" ;
"is" -> "a" -> "way" -> "of";
"repositioning" -> "existing";
"frameworks" -> "and" -> "of" ;
"working" -> "out" -> "possible" ;
"relatons" -> "as" -> "well" -> 
"as" -> "divergences" [label="force"];

"repositioning" -> "divergences" [dir=both];
"relations" -> "possible" [dir=both];
"diagram" -> "repositioning" [dir=both];

{rank=same; "repositioning", "working"};
}

(6) arrows, clustering (more complex)

digraph G {
"the" -> "diagram" ;
"is" -> "a" -> "way" -> "of";
"repositioning" -> "existing";
subgraph cluster1{
graph[label="cluster 1"];
node[style=dashed];
"frameworks" -> "and" -> "of" ;
"working" -> "out" -> "possible" ;
"relatons" -> "as" -> "well" -> 
"as" -> "divergences";
}
"repositioning" -> "divergences" [dir=none];
"relations" -> "possible" [dir=both];
"diagram" -> "repositioning" [dir=both];

{rank=same; "repositioning", "working"};
}

digraph G {
"the" -> "diagram" ;
"is" -> "a" -> "way" -> "of";
"repositioning" -> "existing";
subgraph cluster1{
graph[label="cluster 1"];
node[style=dashed];
"frameworks" -> "and" -> "of" ;
"working" -> "out" -> "possible" ;
"relatons" -> "as" -> "well" -> 
"as" -> "divergences";
}
"repositioning" -> "divergences" [dir=both];
"relations" -> "possible" [dir=both];
"diagram" -> "repositioning" [dir=both];

{rank=same; "repositioning", "working"};
}

(7) multiple words, clusters and coloring

digraph G {
"the diagram" -> "is a way of" ->
"repositioning" -> "existing";
subgraph cluster1{
graph[label="cluster 1" style=dashed];
node[style=filled color=lightblue];
"frameworks" -> "and of" ;
"working" -> "out" -> "possible" ;
"relatons" -> "as well" -> 
"as" -> "divergences";
}
subgraph cluster2{
"repositioning" -> "divergences" [dir=both];
"relations" -> "possible" [dir=both];
"diagram" -> "repositioning" [dir=both];
}
{rank=same; "repositioning", "working"};
}

digraph G {
"the diagram" -> "is a way of" ->
"repositioning" -> "existing";
subgraph cluster1{
graph[label="cluster 1" style=dashed];
node[style=filled color=lightblue];
"frameworks" -> "and of" ;
"working" -> "out" -> "possible" ;
"relatons" -> "as well" -> 
"as" -> "divergences";
}
subgraph cluster2{
"repositioning" -> "divergences" [dir=both];
"relations" -> "possible" [dir=both];
"diagram" -> "repositioning" [dir=both];
}
{rank=same; "repositioning", "working"};
}

(8) Other example

digraph G { //bgcolor="yellow" 
    //rankdir =LR;
    //layout=circo;
    node[shape=box;
    fontsize="10" style=filled fillcolor=darkgoldenrod1 width=1.25,height=.375];
	edge [arrowsize=0.5 fontsize="7"];
	D [label="Diagram?" shape=diamond];
    D:s -> D:n [label="no"];
    D:s -> c:n [label="yes" color=blue  penwidth=2.0  arrowhead=obox]
	a -> b;
    "Artistic Practice" -> "Critical Design";
    a -> "Artistic Practice";
    b -> c [label="link"];
    "Flowcharts" -> "flow\nof the\ncharts";
    subgraph cluster01 {
        graph[style=dashed];
        node[style=dashed];
        f -> e;
        D -> f -> "Flowcharts";   
    }
    {rank=same; "a", "c"};
}

Source:

digraph G { //bgcolor="yellow" 
    //rankdir =LR;
    //layout=circo;
    node[shape=box;
    fontsize="10" style=filled fillcolor=darkgoldenrod1 width=1.25,height=.375];
    edge [arrowsize=0.5 fontsize="7"];
    D [label="Diagram?" shape=diamond];
    D:s -> D:n [label="no"];
    D:s -> c:n [label="yes" color=blue  penwidth=2.0  arrowhead=obox]
    a -> b;
    "Artistic Practice" -> "Critical Design";
    a -> "Artistic Practice";
    b -> c [label="link"];
    "Flowcharts" -> "flow\nof the\ncharts";
    subgraph cluster01 {
        graph[style=dashed];
        node[style=dashed];
        f -> e;
        D -> f -> "Flowcharts";   
    }
    {rank=same; "a", "c"};
}

** Copy the code to somewhere, as the web won't save your code. You can export it as images.

** If you use an installation version, run the sketch with the command `dot -Tsvg input.dot -o output.svg`

---

[Drawing graphs with graphvis (2012)](https://www.graphviz.org/pdf/oldlibguide.pdf) Emden R. Gansner