I really like keeping things simple. And I also like generating figures from code using Graphviz. And since there was no Graphviz plugin for pelican I wrote my own one.

Using liquid tags I wanted to get my graphviz code rendered and automatically included as a base64 encoded image in my HTML code. I’ve created a pull request but you can find a fork at dorneanu-pelican.

Basically the tags works as follows:

1
2
3
4
5

{% graphviz 
	<program> {
		<DOT CODE>
	}
%}

program could be dot, neato, twopi, circo etc. The DOT CODE is simply sent to the binary utility and the output (PNG data) is saved into the document.

This is some minimal example:

1
2
3
4
5
6
7
8
9

{% graphviz 
	dot { 
			digraph graphname { 
				a -> b -> c; 
				b -> d; 
				e -> f;	
			} 
		}
%}

which will be rendered to:

Graphviz code dot { digraph graphname { a -> b -> c; b -> d; e -> f; } }

example1

You could then use neato instead of dot:

1
2
3
4
5
6
7
8
9

{% graphviz 
neato { 
        digraph graphname { 
            a -> b -> c; 
            b -> d; 
            e -> f;	
        } 
    }
%}

…which will be rendered to:

Graphviz code neato { digraph graphname { a -> b -> c; b -> d; e -> f; } }

example2

Some other examples:

Graphviz code 
dot {
	digraph g {
		node [fontname=Verdana,fontsize=12]
		node [style=filled]
	 	node [fillcolor="#EEEEEE"]
	 	node [color="#EEEEEE"]
	 	edge [color="#31CEF0"]
		node [shape = record,height=.1];
		node0[label = " | G| "];
		node1[label = " | E| "];
		node2[label = " | B| "];
		node3[label = " | F| "];
		node4[label = " | R| "];
		node5[label = " | H| "];
		node6[label = " | Y| "];
		node7[label = " | A| "];
		node8[label = " | C| "];
		"node0":f2 -> "node4":f1;
		"node0":f0 -> "node1":f1;
		"node1":f0 -> "node2":f1;
		"node1":f2 -> "node3":f1;
		"node2":f2 -> "node8":f1;
		"node2":f0 -> "node7":f1;
		"node4":f2 -> "node6":f1;
		"node4":f0 -> "node5":f1;
	}
}

example3

Graphviz code 
dot {
	digraph G {
		node [fontname=Verdana,fontsize=12]
		node [style=filled]
	 	node [fillcolor="#EEEEEE"]
	 	node [color="#EEEEEE"]
	 	edge [color="#31CEF0"]

		subgraph cluster_0 {
			label = "hello world";
			a -> b;
			a -> c;
			color = hot_pink;
		}

		subgraph cluster_1 {
			label = "MSDOT";
			style= "dashed";
			color=purple;
			x -> y;
			x -> z;
			y -> z;
			y -> q;
		}

		top -> a;
		top -> y;
		y -> b;
	}
}

example4

Graphviz code 
neato {
	graph G
	{

	  node [color=Red]

	  r01
	  r02

	  r03

	  r04
	  r05

	  r06
	  r07
	  r08
	  r09

	  r10
	  r11

	  node [color=Blue]

	  p01
	  p02

	  p03

	  p04
	  p05
	  p06

	  p07
	  p08
	  p09
	  p10
	  p11

	  p12
	  p13

	  r01 -- r02
	  r01 -- p01
	  r01 -- p02
	  r02 -- p01
	  r02 -- p02
	  p01 -- p02

	  r03 -- p03

	  r04 -- r05
	  r04 -- p04
	  r04 -- p05
	  r04 -- p06
	  r05 -- p04
	  r05 -- p06
	  p04 -- p05
	  p04 -- p06

	  r06 -- r07
	  r06 -- r08
	  r06 -- r09
	  r06 -- p07
	  r06 -- p08
	  r06 -- p09
	  r06 -- p10
	  r06 -- p11
	  r07 -- r08
	  r07 -- r09
	  r07 -- p07
	  r07 -- p08
	  r07 -- p09
	  r07 -- p10
	  r07 -- p11
	  r08 -- r09
	  r08 -- p07
	  r08 -- p08
	  r08 -- p09
	  r08 -- p10
	  r08 -- p11
	  r09 -- p07
	  r09 -- p08
	  r09 -- p09
	  r09 -- p10
	  r09 -- p11
	  p07 -- p08
	  p07 -- p09
	  p07 -- p10
	  p07 -- p11
	  p08 -- p09
	  p08 -- p10
	  p08 -- p11
	  p09 -- p10
	  p09 -- p11
	  p10 -- p11

	  r10 -- r11
	  r10 -- p12
	  r10 -- p13
	  r11 -- p12
	  r11 -- p13
	  p12 -- p13
	}
}

example5

Graphviz code 
neato {
	graph ER {
		node [shape=box]; course; institute; student;
		node [shape=ellipse]; {node [label="name"] name0; name1; name2;}
			code; grade; number;
		node [shape=diamond,style=filled,color=lightgrey]; "C-I"; "S-C"; "S-I";

		name0 -- course;
		code -- course;
		course -- "C-I" [label="n",len=1.00];
		"C-I" -- institute [label="1",len=1.00];
		institute -- name1;
		institute -- "S-I" [label="1",len=1.00];
		"S-I" -- student [label="n",len=1.00];
		student -- grade;
		student -- name2;
		student -- number;
		student -- "S-C" [label="m",len=1.00];
		"S-C" -- course [label="n",len=1.00];

		label = "\n\nEntity Relation Diagram\ndrawn by NEATO";
		fontsize=20;
	}
}

example6

Graphviz code 
twopi {
	digraph G
	{
	        center = v21;

	        center -> v11;
	        center -> v12;
	        center -> v13;

	        v11 -> v21;
	        v11 -> v22;
	        v11 -> v23;

	        v21 -> v22;
	        v22 -> v23;
	        v23 -> v21;

	        v21 -> v31;
	        v21 -> v32;
	        v21 -> v33;

	        v32 -> v41;
	        v32 -> v42;
	        v33 -> v43;
	}
}

example7

Graphviz code 
circo {
	digraph g1 {
	    node [shape = doublecircle]; N4 N6;
	    node [shape = circle];
	    edge[label="{1,0}"];
	    N0 -> N1 -> N2 -> N3 -> N4 -> N5 -> N6 -> N0;
	}
}

example8

Graphviz code 
dot {
	digraph G {
	 node [fontname=Verdana,fontsize=12]
	 node [style=filled]
	 node [fillcolor="#EEEEEE"]
	 node [color="#EEEEEE"]
	 edge [color="#31CEF0"]
	 
	 main -> parse -> execute
	 main -> init
	 main -> cleanup
	 execute -> make_string
	 execute -> printf
	 init -> make_string
	 main -> printf
	 execute -> compare
	}
}

example9