Kyle Judy; 4/30/2025

I've been using this excellent utility, graphviz, to construct directed graphs for my upcoming classlist at Mines, and I gotta say for throwing together a quick and dirty digraph there's really nothing like it. It comes to a head when you try to use it for convenience, for example yesterday I was working on updating it with new class choices. I wanted to adjust a few nodes and change their colors and other styling options around. Here's where my comfortableness with HTML+CSS comes to a head with graphviz' age.

This was a language designed before CSS was really a thing. Back then you had to style things in HTML by manually editing tags for nodes. For example, if you want a block of text to be centered, instead of:

p {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

you had to include align="center" in every <p> element you wanted centered. This is where graphviz feels like HTML 1.0, you can't assign classes to nodes and style based on classes. This means that for every node I wanted to style, I had to explicitly state the node and then the styling options. So, instead of:

{ CSCI210 CSCI220 CSCI341 CSCI403 } [fillcolor="grey"]

You need to specify fillcolor="grey" for each individual node. Not only does this muddy the code, it just is a real pain in the ass to use. No wonder GUI programs to take this over won out. So, if I were to contribute to the graphviz project, I'd like this to change. For fun, here's what I'd envision my extension to look like:

/* For nodes, you can set class="", which functions exactly like HTML classes. */
CSCI210 [class="planned"]

/* Then, later on in the digraph{}, you can specify a style section */
style {
   planned {
      fillcolor="lightgreen"
   }
}

/* Extremely fancy CSS stuff not planned, no child node inheriting the styling
   of the parent node (unless that's part of graphviz already, haven't really
   delved that deep.) */

So, yeah, that's my idea.