What Is the Difference Between Light, Dark, and Full-Editorial Variants in Diagram-Design?

Diagram-Design renders every diagram in three static variants—minimal light, minimal dark, and full-editorial—that share identical underlying data but differ in canvas background, colour token resolution, and editorial framing.

The cathrynlavery/diagram-design repository generates all 39 visual types from a single YAML source. The difference between light, dark, and full-editorial variants in diagram-design determines whether your embed uses a standalone chart on a neutral background or a fully wrapped editorial component with metadata and summary cards.

Overview of the Three Static Variants

According to README.md (lines 33-36), the repository ships every diagram in three required static renderings: minimal light, minimal dark, and full-editorial. These outputs derive from the same underlying data defined in skills/diagram-design/references/style-guide.md, ensuring that switching between them alters only the presentation layer while preserving chart geometry and data relationships.

Minimal Light Variant

The minimal light variant presents diagrams on a white (“light paper”) background using colour tokens optimized for high contrast on light surfaces.

• Colour resolution: The ink token resolves to near-black, while accent resolves to a vivid colour that stands out against the light canvas. Muted tones shift accordingly to maintain hierarchy.
• Canvas specifications: Fixed at 1000 × 520 px with no surrounding editorial frame, chrome, or additional UI elements.
• Usage: Deploy for quick, low-overhead embeds in documentation or articles that already use a light theme, where the diagram must appear as a clean, standalone graphic.

Minimal Dark Variant

The minimal dark variant inverts the colour logic for dark-themed presentations while maintaining the same geometric constraints.

• Colour resolution: The ink token becomes near-white, accent shifts to a lighter hue, and muted tones adjust for visibility against dark surfaces.
• Canvas specifications: Identical 1000 × 520 px canvas rendered on a dark (“dark paper”) background without editorial wrappers.
• Usage: Select this variant when the host page or presentation template uses a dark theme, ensuring native legibility without requiring additional CSS overrides.

Full-Editorial Variant

The full-editorial variant extends the minimal logic by embedding the chart within a comprehensive editorial layout suited for published articles and reports.

• Visual composition: Applies the same colour-token logic as the minimal variants (supporting either light or dark skins) but adds an editorial frame and summary cards containing titles, legends, and key metrics.
• Layout integration: While the chart canvas remains 1000 × 520 px, the variant places it inside a wider editorial wrapper that may include surrounding text blocks, navigation elements, and additional UI components.
• Geometry preservation: As documented in skills/diagram-design/references/type-polar.md (lines 68-70), the full-editorial implementation adds these wrapper elements without changing the underlying chart geometry or data mapping.

Technical Implementation and Verification

The variant system relies on a declarative rendering pipeline that processes a single YAML source from skills/diagram-design/references/style-guide.md. The engine swaps colour tokens based on the selected skin attribute (light or dark) and optionally injects the editorial wrapper for the full-editorial case.

Verification scripts enforce the three-variant requirement across the repository. For example, scripts/verify-sankey.py (line 43) validates that every diagram ships with minimal light, minimal dark, and full-editorial assets. You can toggle between light and dark skins in the generated HTML files (such as skills/diagram-design/assets/example-polar.html) by modifying the data-skin attribute value:

<!-- Minimal light -->
<div class="diagram" data-skin="light">...</div>

<!-- Minimal dark -->
<div class="diagram" data-skin="dark">...</div>

The full-editorial variant requires including the additional editorial wrapper markup that references the same chart component.

Summary

• All diagrams derive from a single YAML source defined in skills/diagram-design/references/style-guide.md.
• Minimal light uses a 1000 × 520 px white canvas with high-contrast dark ink tokens.
• Minimal dark uses the same canvas size with inverted tokens optimized for dark backgrounds.
• Full-editorial preserves the 1000 × 520 px chart geometry while adding editorial frames and summary cards.
• Verification scripts such as scripts/verify-sankey.py ensure every diagram type ships all three required variants.

Frequently Asked Questions

Do the three variants require separate data files?

No. All variants share the same underlying YAML source. The rendering pipeline swaps colour tokens and optionally adds the editorial wrapper based on the selected skin, ensuring the core data relationship remains identical across all three presentations.

How do I switch between light and dark skins in the HTML output?

Modify the data-skin attribute in the HTML asset (e.g., skills/diagram-design/assets/example-polar.html). Set the value to "light" for the minimal light variant or "dark" for the minimal dark variant. The full-editorial variant requires including the additional editorial wrapper markup.

Does the full-editorial variant alter the chart geometry?

No. According to skills/diagram-design/references/type-polar.md (lines 68-70), the full-editorial implementation places the chart inside an existing editorial frame and adds summary cards without changing the chart geometry or the 1000 × 520 px canvas specifications.

Which verification script ensures all three variants exist?

The repository uses test scripts such as scripts/verify-sankey.py (line 43) to enforce that every diagram ships with minimal light, minimal dark, and full-editorial renditions, validating the completeness of the asset pipeline.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}