How to Use the Minimal Light, Minimal Dark, and Full‑Editorial Variants in Diagram‑Design

The three diagram‑design variants (minimal light, minimal dark, and full‑editorial) are static HTML templates that you select via the --variant flag when importing diagrams or by opening specific pre‑named HTML files directly in your browser.

The cathrynlavery/diagram‑design repository provides every visual type as self‑contained static files optimized for three distinct presentation contexts. These diagram‑design variants require no build step, JavaScript runtime, or external image dependencies, making them immediately deployable in documentation, slide decks, or editorial layouts.

Understanding the Three Diagram‑Design Variants

Each variant is defined by a specific HTML template and color scheme. All variants reside in skills/diagram-design/assets/ and can be opened directly in any browser.

Minimal Light

The minimal light variant features a clean, light‑paper background (#f5f5f5) with dark ink (#2d3142). This is the default style optimized for standard documentation and slide decks. The underlying scaffold is defined in skills/diagram-design/assets/template.html.

Minimal Dark

The minimal dark variant inverts the color scheme for dark‑mode compatibility, using a dark‑paper background (#2d3142) with light ink (#f5f5f5). This is ideal for night‑mode readers or dark‑theme presentations. The template source is skills/diagram-design/assets/template-dark.html.

Full‑Editorial

The full‑editorial variant maintains the same core layout as the minimal styles but adds richer typography, optional dotted backgrounds, and annotation primitives. Use this when a diagram accompanies long‑form articles or reports. These files follow the naming pattern example‑<type>‑full.html (e.g., example‑venn‑full.html) within the assets directory.

Selecting Diagram‑Design Variants via CLI Commands

When generating diagrams through the command line, you specify the desired style using the --variant flag. The implementation details for these flags are documented in commands/import-mermaid.md (lines 18‑24).

Mermaid Import

To render a Mermaid diagram in a specific variant, append the --variant flag to the import command:

# Minimal light (default behavior)

mermaid my-diagram.mmd --variant=light

# Minimal dark

mermaid my-diagram.mmd --variant=dark

# Full‑editorial

mermaid my-diagram.mmd --variant=full

The command maps each flag to its corresponding template: light uses template.html, dark uses template-dark.html, and full applies the full‑editorial styling.

Draw.io Import

The Draw.io importer supports identical variant selection. As documented in commands/import-drawio.md, the flag behavior mirrors the Mermaid command:

# Minimal dark theme

drawio my-diagram.drawio --variant=dark

# Full‑editorial styling

drawio my-diagram.drawio --variant=full

Working with Variant Files Directly

If you bypass the CLI generators, the variant is encoded directly in the filename. All example files are located in skills/diagram-design/assets/:

• Light: example‑<type>.html (e.g., example‑tree.html)
• Dark: example‑<type>‑dark.html (e.g., example‑tree-dark.html)
• Full: example‑<type>‑full.html (e.g., example‑tree-full.html)

Because these are static HTML files, you can open them directly in any browser without compilation or external dependencies.

Exporting Diagrams in Specific Variants

When converting generated HTML to static images, the export-diagram command preserves the variant’s embedded CSS and color schemes. According to commands/export-diagram.md (lines 12‑19), the tool reads the style definitions from the source HTML:

# Export a minimal dark diagram to SVG

export-diagram example-tree-dark.html --svg-only

# Export a full‑editorial diagram to PNG

export-diagram example-flow-full.html --png-only

The resulting images retain the specific background colors, typography, and spacing defined by the variant template.

Summary

• Three static variants: minimal light, minimal dark, and full‑editorial provide presentation‑ready styling without configuration.
• CLI selection: Use --variant=light|dark|full with mermaid or drawio import commands to generate diagrams in the desired style.
• Direct access: Open example‑<type>.html, example‑<type>‑dark.html, or example‑<type>‑full.html directly from skills/diagram-design/assets/ for immediate browser rendering.
• Zero dependencies: All variants are self‑contained HTML files with no external build requirements.
• Export preservation: The export-diagram tool maintains variant‑specific styling when producing SVG or PNG outputs.

Frequently Asked Questions

What is the default variant if I omit the --variant flag?

The default variant is minimal light. According to the commands/import-mermaid.md documentation, running the import command without the flag produces the same output as explicitly specifying --variant=light, utilizing the clean #f5f5f5 background defined in template.html.

Can I use diagram‑design variants without a build tool or runtime?

Yes. All three variants are fully static HTML files. As implemented in cathrynlavery/diagram‑design, you can open any example‑<type>.html, example‑<type>‑dark.html, or example‑<type>‑full.html file directly in a browser without Node.js, Python, or any other runtime dependency.

How do the color schemes differ between minimal light and minimal dark?

The minimal light variant uses a light‑paper background (#f5f5f5) with dark ink (#2d3142), while the minimal dark variant inverts this to a dark‑paper background (#2d3142) with light ink (#f5f5f5). These values are hardcoded in template.html and template-dark.html respectively.

Does the full‑editorial variant support additional diagram primitives?

Yes. While the minimal variants focus on clean presentation, the full‑editorial variant includes optional annotation primitives and richer font stacks designed for long‑form reading contexts. These additions are visible in any file matching the example‑<type>‑full.html pattern within the assets directory.

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