Styling Graphviz with CSS

submited by

Style Pass

2024-11-17 01:00:03

Here is a nice SVG of a graph:gourdgourdpumpkinpumpkingourd->pumpkinsquashsquashpumpkin->squashdecorationdecorationsquash->decorationA directed, acyclic gourd.

Since Decorative Gourd Season is coming to an end, motherfuckers, this fine graph will soon lose its relevance until next year. So it goes.

Since I sometimes use Graphviz for articles, and now that I’m trying to make this site respect light and dark mode preferences smoothly, I wanted to get my graphs to do so as well. In the past, I’ve assumed light mode only, and so my graphs look bad in dark mode — they’re a sudden flash of bright in an otherwise dark page.

To see it in action: If you’re in dark mode, switch to light, and vice-versa. (On macOS, for example, you can do this in System Settings → Appearance.) If it’s not easy for you to switch back and forth betwixt the modes, here are screenshots:Light mode: Like the text, the graph is dark on a light background.Dark mode: Like the text, the graph is light on a dark background.

It took me longer than it should have to figure out how to get this to work, so I thought I’d write it down. These are the key things to know:Graphviz can indeed produce Scalable Vector Graphics (SVG) files. Woo hoo!You can indeed style SVGs with CSS. (SVG is an application of XML, so things work as you’d hope.) As always, Mozilla Developer Network’s documentation is good.You can embed SVG directly into HTML (!) — you don’t have to use an img tag.To get this to work easily and consistently, you really want to do the direct embedding.