Add screenshot coverage

When adding a new rendering demo or introducing a new configuration/YAML option, always update the relevant Cypress integration/screenshot tests so the feature is exercised and captured automatically.

copy reviewer prompt

Prompt

Reviewer Prompt

When adding a new rendering demo or introducing a new configuration/YAML option, always update the relevant Cypress integration/screenshot tests so the feature is exercised and captured automatically.

How to apply:

  • Find the closest existing rendering/screenshot spec for the feature (e.g., the flowchart v2 rendering spec).
  • Add a new it(...) case (or extend an existing one) that uses a snapshot helper to render the diagram source plus the exact config/front-matter that the demo uses.
  • Ensure the test covers the new behavior/input (e.g., spacing options like nodeSpacing/rankSpacing, or new YAML config fields like themeVariables).

Example pattern (Cypress + snapshot):

it('Should render subgraphs with different nodeSpacing', () => {
  imgSnapshotTest(`---
title: Subgraph nodeSpacing and rankSpacing example
---
flowchart LR
  X --> Y
  subgraph X
    direction LR
    A
    C
  end
  subgraph Y
    direction LR
    B
    D
  end
`, {
    flowchart: { nodeSpacing: 1, rankSpacing: 1 },
  });
});

// And for new YAML config options:
imgSnapshotTest(`---
config:
  theme: base
  themeVariables:
    lineColor: yellow
---
flowchart LR
subgraph red
A --> B
end
`, {});

This keeps automated visual/regression coverage aligned with every user-visible change and every supported config surface.

Source discussions