Create a Flowchart using Graphviz Dot

Prashant Mhatre
Jul 12, 2022

--

I will keep this simple. Below is the template/example I use to create a simple flowchart using dot language. Customize as you wish.

Create a Flowchart using Graphviz Dot

Sample Code for a Simple Flowchart

digraph D {
splines=true;
rankdir=TB;
node [width=1.5, fontname = “helvetica”, shape = plaintext, fontsize=”11", fontcolor=black, style=”filled”, fillcolor=”#e9e9e9"];
edge [arrowhead=normal,arrowtail=dot,color=”#20B2AA”,style=solid];

subgraph clusterX {
color=lightgrey;
penwidth=0.2;
labelloc=bottom;
labeljust=center;
fontcolor=“#20B2AA”;
fontname=“Courier New”;
fontsize=“9";

label=“✓[ 𝑫𝒂𝒕𝒂 𝑭𝒍𝒐𝒘 𝑫𝒊𝒂𝒈𝒓𝒂𝒎 ]”;
A;
B;
C;
D;
}

A [label=“► Step A”];
B [label=“► Step B”];
C [label=“► Step C”];
D [label=“► Step D”];

A -> B -> C
A -> D
}

Save the code as input.dot file.

Generate SVG Output

dot -Tsvg input.dot > output.svg

--

--