Styling with CSS

Works only with strategy inline.

Basic idea: you can target with CSS any SVG node, something like this:

.some-diagram .node {
  /* styles */
}

But there are more tricks. If there are no classes that you can target, you can as well target attributes:

.graphviz {
  text {
    fill: var(--sl-color-white);
  }
  [fill="black"],
  [fill="#000"] {
    fill: var(--sl-color-white);
  }
  [stroke="black"],
  [stroke="#000"] {
    stroke: var(--sl-color-white);
  }
}

Graphviz and Vizdom allow to expose HTML classes, that can be used for further styling:

Grapviz

Vizdom

Markdown

```dot strategy=inline
digraph g {
  a -> b
  a[class="style-me"]
}
```

CSS

.graphviz .style-me path {
  fill: lightblue;
}
.vizdom .style-me :first-child {
  fill: lightblue;
}