# How to Use the Minimal Light, Minimal Dark, and Full‑Editorial Variants in Diagram‑Design > Learn to use minimal light, minimal dark, and full-editorial variants in diagram-design. Explore these static HTML templates to enhance your diagramming workflow. - Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design) - Tags: how-to-guide - Published: 2026-08-18 --- **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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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‑‑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`](https://github.com/cathrynlavery/diagram-design/blob/main/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: ```bash # 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`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html), `dark` uses [`template-dark.html`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/commands/import-drawio.md), the flag behavior mirrors the Mermaid command: ```bash # 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‑.html` (e.g., `example‑tree.html`) - **Dark**: `example‑‑dark.html` (e.g., `example‑tree-dark.html`) - **Full**: `example‑‑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`](https://github.com/cathrynlavery/diagram-design/blob/main/commands/export-diagram.md) (lines 12‑19), the tool reads the style definitions from the source HTML: ```bash # 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‑.html`, `example‑‑dark.html`, or `example‑‑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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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‑.html`, `example‑‑dark.html`, or `example‑‑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`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html) and [`template-dark.html`](https://github.com/cathrynlavery/diagram-design/blob/main/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‑‑full.html` pattern within the assets directory.