|
| 1 | +--- |
| 2 | +applyTo: "packages/graph/src/graphviz/**" |
| 3 | +--- |
| 4 | +# Graphviz Module Instructions |
| 5 | + |
| 6 | +## Overview |
| 7 | +The `src/graphviz/` module renders directed graphs using the Graphviz DOT layout engine. It converts a graph model (`Store`) into DOT language via `DotWriter`, lays it out with the Graphviz WASM engine, and renders the resulting SVG in a `Widget`. |
| 8 | + |
| 9 | +## Key Components |
| 10 | +- **Store** — Graph data model extending `Graph2<Vertex, Edge, Subgraph>`. Holds vertices, edges, and subgraphs. |
| 11 | +- **DotWriter** — Serializes the Store into Graphviz DOT language. |
| 12 | +- **Widget** — SVG-based rendering widget that displays the laid-out graph. |
| 13 | +- **types.ts** — Entity interfaces (`Vertex`, `Edge`, `Subgraph`) with optional `fill` and `stroke` properties. |
| 14 | + |
| 15 | +## Graphviz DOT Attributes |
| 16 | +Entity styling (`fill`, `stroke`) is applied in the DOT output via native Graphviz attributes: |
| 17 | +- `color` — Border/stroke color (maps to entity `stroke` property) |
| 18 | +- `fillcolor` — Fill color (maps to entity `fill` property) |
| 19 | + |
| 20 | +For the full list of Graphviz attributes, see: https://graphviz.org/doc/info/attrs.html |
| 21 | + |
| 22 | +## Styling Architecture |
| 23 | +- **CSS custom properties** defined in `Widget.css` control default colors (`--gv-bg`, `--gv-fg`, `--gv-border`, `--gv-select-stroke`, `--gv-select-fill`). |
| 24 | +- These use `light-dark()` for automatic light/dark mode support, inheriting `color-scheme` from the host document. |
| 25 | +- Per-entity colors are set via the `fill`/`stroke` fields on `Vertex`, `Edge`, and `Subgraph` interfaces and emitted as DOT `fillcolor`/`color` attributes by `DotWriter`. |
| 26 | +- Selection highlight colors are applied via inline styles in `Widget._selectionChanged()`. |
| 27 | + |
| 28 | +## Important Conventions |
| 29 | +- Do NOT use domain-specific concepts (e.g., status, started, completed) in the graphviz module — keep it generic. |
| 30 | +- Color values in the DOT output that match `"black"`, `"white"`, or `"whitesmoke"` are replaced with CSS custom property references during SVG rendering. |
0 commit comments