Can you build reusable styles in GraphViz?

Question

I'm using graphviz to create flow charts. I change the styles every time by setting node and edge attributes:

node[shape="box",       style="filled, rounded",       fillcolor=lightyellow,       fontname="Verdana",       fontsize=9,       penwidth=.5,       color="gray83"]    start, end; 

It's a bit painful to include this and other similar declarations for parallelograms, rectangles, diamonds, etc.

I'd like to be able to reference a re-usable style document instead of copying and pasting into each .dot file.

Is there a standard way to do this? I could potentially build a shell script or a python script that would do this for me, but it seems like the functionality should already be there.

Answer 1

"Sometimes the answer is 'no'."

So, no. GraphViz lacks the notion of "named styles" seen in word processors like Microsoft Word and LibreOffice, and lacks the style "class" notion from HTML and CSS. Its formatting attributes are more primitive and, in many cases, must be explicitly stated.

You can set some defaults, as in its finite state machine example:

node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8; node [shape = circle]; 

Here you get defaulting to the shape of a circle (the last shape defined), with explicit calling out of a handful of nodes that are previously declared under a previous default (doublecircle). This is a convenience for some designs, but it requires a good degree of preplanning (e.g. of the order items are declared). You can sometimes use the subgraph feature to help organize defaults by group, as this Stack Overflow answer shows.

But defaults are a small comfort to those of us used to expressive, simple type mechanisms. A look at the rest of the documentation confirms that, while you can use some HTML-styling elements for text, e.g., they are restricted to HTML tags such as <b> and <i>. This is primitive HTML styling circa 2001, prior to the spread of quality CSS.

Don't be fooled by the stylesheet attribute, either; it's only for SVG output, and is disappointingly much less general and valuable than it first seems.

So, long story short, "no." GraphViz has no built-in reusable style elements. If you want that, you will have to build that separately using a program, a macro-preproessor, or the like. Sorry!

Answer 2

Yes it does.

Use the class attribute in nodes or edges. Use the stylesheet attribute in the graph (or pass -Gstylesheet=whatever.css in the CLI.

The stylesheet is normal CSS. Classes wok just like in HTML.

You do need very latest graphviz for this to work.

Example:

https://ralsina.gitlab.io/boxes-book/part3/git_3.svg

If you look at the source you will see it loads https://ralsina.gitlab.io/boxes-book/styles/forest.css which has all the styles.

It works for SVG output (which is the good output ;-)