How to Use the Consultant 2×2 Quadrant Diagram in diagram-design: A Complete Guide

The Consultant 2×2 quadrant diagram in diagram-design is a specialized scenario matrix that displays four named strategic futures using double-ended axes, single-word labels, and a single coral-tinted focal quadrant.

This guide walks you through creating publication-ready 2×2 matrices in the cathrynlavery/diagram-design repository. The Consultant variant differs from standard quadrant plots by replacing scattered data points with four named scenario cells, making it ideal for strategic frameworks like BCG-style portfolio analysis or futures planning.

What Makes the Consultant 2×2 Different

The Consultant 2×2 is defined in references/type-quadrant.md as a layout token that modifies the base Quadrant type. According to the skill definition in SKILL.md【/cache/repos/github.com/cathrynlavery/diagram-design/main/skills/diagram-design/SKILL.md#L95-L99】, selecting this variant triggers three structural changes:

• Double-ended axis markers (marker-start + marker-end) replace single-headed arrows
• Scenario cells (<rect> + <text> blocks) replace individual plotted items
• Corner tag format (NN · DIMENSION-A / DIMENSION-B) identifies each quadrant

The visual style remains consistent with the house system—fonts from Google Fonts (Geist, Instrument Serif, Geist Mono) and tokens from style-guide.md—but applies a thicker axis stroke (1.2px) and reserves the coral accent for exactly one focal cell.

Step-by-Step: Creating a Consultant 2×2 Diagram

Step 1: Select the Visual Type

Open SKILL.md and locate the visual-type table. Choose Quadrant as the base type, then specify the Consultant special variant. This ensures the system loads the correct layout reference file【/cache/repos/github.com/cathrynlavery/diagram-design/main/skills/diagram-design/SKILL.md#L95-L99】.

Step 2: Load the Layout Reference

Read references/type-quadrant.md, specifically the Consultant special section (lines 26–44). This defines:

• Axis positioning and marker requirements
• Cell geometry and content rules
• The focal coral tint application【/cache/repos/github.com/cathrynlavery/diagram-design/main/skills/diagram-design/references/type-quadrant.md#L26-L44】

Step 3: Start from a Template

Copy either the minimal scaffold or the full editorial template from assets/:

# Option A: Minimal scaffold

cp skills/diagram-design/assets/template.html my-consultant-2x2.html

# Option B: Pre-built Consultant example (recommended)

cp skills/diagram-design/assets/example-quadrant-consultant.html my-consultant-2x2.html

The example file at assets/example-quadrant-consultant.html contains every required element pre-configured【/cache/repos/github.com/cathrynlavery/diagram-design/main/skills/diagram-design/assets/example-quadrant-consultant.html#L1-L7】.

Step 4: Configure the SVG Structure

The Consultant 2×2 requires five specific SVG elements, detailed in lines 60–128 of the example file【/cache/repos/github.com/cathrynlavery/diagram-design/main/skills/diagram-design/assets/example-quadrant-consultant.html#L60-L128】:

Double-Ended Axis Markers

<defs>
  <marker id="axis-start" markerWidth="9" markerHeight="7" refX="1" refY="3.5" orient="auto">
    <polygon points="9 0,0 3.5,9 7" fill="var(--color-ink)"/>
  </marker>
  <marker id="axis-end" markerWidth="9" markerHeight="7" refX="8" refY="3.5" orient="auto">
    <polygon points="0 0,9 3.5,0 7" fill="var(--color-ink)"/>
  </marker>
</defs>

Axis Lines with Double Markers

<line x1="200" y1="300" x2="800" y2="300"
      stroke="var(--color-ink)" stroke-width="1.2"
      marker-start="url(#axis-start)" marker-end="url(#axis-end)"/>

Note the stroke-width="1.2"—this is the Consultant-specific rule from type-quadrant.md lines 42–44.

Single-Word Axis Labels

Place labels beyond the arrow tips, using single words with no glyphs:

<text x="500" y="48" fill="var(--color-ink)" font-size="9"
      font-family="var(--font-mono)" text-anchor="middle" letter-spacing="0.18em">REMOTE</text>
<text x="500" y="560" fill="var(--color-ink)" font-size="9"
      font-family="var(--font-mono)" text-anchor="middle" letter-spacing="0.18em">IN-PERSON</text>
<text x="188" y="300" fill="var(--color-ink)" font-size="9"
      font-family="var(--font-mono)" text-anchor="end" dominant-baseline="middle"
      letter-spacing="0.18em">HUMAN</text>
<text x="812" y="300" fill="var(--color-ink)" font-size="9"
      font-family="var(--font-mono)" text-anchor="start" dominant-baseline="middle"
      letter-spacing="0.18em">AI</text>

Scenario Cells with Corner Tags

Each cell requires a numbered corner tag in the format NN · DIMENSION-A / DIMENSION-B:

<rect x="140" y="120" width="300" height="160" rx="6"
      fill="rgba(45,49,66,0.04)" stroke="rgba(79,93,117,0.28)" stroke-width="1"/>
<text x="156" y="144" fill="var(--color-muted)" font-size="8"
      font-family="var(--font-mono)" letter-spacing="0.18em">01 · REMOTE / HUMAN</text>
<text x="156" y="180" fill="var(--color-ink)" font-size="16" font-weight="600"
      font-family="var(--font-sans)">Distributed humans</text>

Focal Coral Tint

Apply the coral accent (#eb6c36 as var(--color-accent)) to exactly one quadrant:

<rect x="500" y="80" width="400" height="220" fill="rgba(235,108,54,0.04)"/>

The stroke-and-fill combination signals the "headline bet" or priority scenario.

Step 5: Validate with the Pre-Output Checklist

Before export, verify your diagram passes the taste-gate defined in SKILL.md §9 (lines 27–33)【/cache/repos/github.com/cathrynlavery/diagram-design/main/skills/diagram-design/SKILL.md#L27-L33】:

• Type fit: Confirms Consultant 2×2 conventions are met
• Geometry: 4-px grid alignment, correct proportions
• Connector rules: All axis markers present and bidirectional
• Coral usage: Exactly one focal quadrant tinted
• Accessibility: ARIA attributes (role="img", aria-labelledby), sufficient contrast

Step 6: Export to SVG or PNG

Run the export command documented in commands/export-diagram.md【/cache/repos/github.com/cathrynlavery/diagram-design/main/commands/export-diagram.md#L11-L13】:

export-diagram my-consultant-2x2.html --svg-only

For PNG output, omit the --svg-only flag. The command reads your HTML, re-runs the taste-gate, and writes the standalone file beside your source.

Complete Working Example

Here is a minimal, runnable Consultant 2×2 template derived from example-quadrant-consultant.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Strategic Futures Matrix · REMOTE × AI</title>
  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    :root{
      --color-paper:#f5f5f5; --color-ink:#2d3142; --color-accent:#eb6c36; --color-muted:#4f5d75;
      --font-sans:'Geist',sans-serif; --font-serif:'Instrument Serif',serif; --font-mono:'Geist Mono',monospace;
    }
    body{font-family:var(--font-sans);background:var(--color-paper);color:var(--color-ink);}
  </style>
</head>
<body>
  <svg viewBox="0 0 1000 660" role="img"
       aria-labelledby="quadrant-title quadrant-desc">
    <title id="quadrant-title">Strategic Futures Matrix · REMOTE × AI</title>
    <desc id="quadrant-desc">Four strategic scenarios across Remote-to-In-Person and Human-to-AI drivers.</desc>

    <defs>
      <marker id="axis-start" markerWidth="9" markerHeight="7" refX="1" refY="3.5" orient="auto">
        <polygon points="9 0,0 3.5,9 7" fill="var(--color-ink)"/>
      </marker>
      <marker id="axis-end" markerWidth="9" markerHeight="7" refX="8" refY="3.5" orient="auto">
        <polygon points="0 0,9 3.5,0 7" fill="var(--color-ink)"/>
      </marker>
    </defs>

    <rect width="100%" height="100%" fill="var(--color-paper)"/>

    <!-- Focal quadrant: top-right (AI + REMOTE) -->
    <rect x="500" y="80" width="400" height="220"
          fill="rgba(235,108,54,0.04)" stroke="var(--color-accent)" stroke-width="1"/>

    <!-- Cell 01: REMOTE / HUMAN -->
    <rect x="140" y="120" width="300" height="160" rx="6"
          fill="rgba(45,49,66,0.04)" stroke="rgba(79,93,117,0.28)" stroke-width="1"/>
    <text x="156" y="144" fill="var(--color-muted)" font-size="8"
          font-family="var(--font-mono)" letter-spacing="0.18em">01 · REMOTE / HUMAN</text>
    <text x="156" y="180" fill="var(--color-ink)" font-size="16" font-weight="600"
          font-family="var(--font-sans)">Distributed teams</text>

    <!-- Cell 02: IN-PERSON / HUMAN -->
    <rect x="140" y="380" width="300" height="160" rx="6"
          fill="rgba(45,49,66,0.04)" stroke="rgba(79,93,117,0.28)" stroke-width="1"/>
    <text x="156" y="404" fill="var(--color-muted)" font-size="8"
          font-family="var(--font-mono)" letter-spacing="0.18em">02 · IN-PERSON / HUMAN</text>
    <text x="156" y="440" fill="var(--color-ink)" font-size="16" font-weight="600"
          font-family="var(--font-sans)">Office culture</text>

    <!-- Cell 03: REMOTE / AI (focal cell content) -->
    <rect x="560" y="120" width="300" height="160" rx="6"
          fill="rgba(235,108,54,0.06)" stroke="var(--color-accent)" stroke-width="1"/>
    <text x="576" y="144" fill="var(--color-accent)" font-size="8"
          font-family="var(--font-mono)" letter-spacing="0.18em">03 · REMOTE / AI</text>
    <text x="576" y="180" fill="var(--color-ink)" font-size="16" font-weight="600"
          font-family="var(--font-sans)">Autonomous agents</text>

    <!-- Cell 04: IN-PERSON / AI -->
    <rect x="560" y="380" width="300" height="160" rx="6"
          fill="rgba(45,49,66,0.04)" stroke="rgba(79,93,117,0.28)" stroke-width="1"/>
    <text x="576" y="404" fill="var(--color-muted)" font-size="8"
          font-family="var(--font-mono)" letter-spacing="0.18em">04 · IN-PERSON / AI</text>
    <text x="576" y="440" fill="var(--color-ink)" font-size="16" font-weight="600"
          font-family="var(--font-sans)">Cobot workplaces</text>

    <!-- Axes -->
    <line x1="200" y1="300" x2="800" y2="300"
          stroke="var(--color-ink)" stroke-width="1.2"
          marker-start="url(#axis-start)" marker-end="url(#axis-end)"/>
    <line x1="500" y1="60" x2="500" y2="540"
          stroke="var(--color-ink)" stroke-width="1.2"
          marker-start="url(#axis-start)" marker-end="url(#axis-end)"/>

    <!-- Labels -->
    <text x="500" y="48" fill="var(--color-ink)" font-size="9"
          font-family="var(--font-mono)" text-anchor="middle" letter-spacing="0.18em">REMOTE</text>
    <text x="500" y="560" fill="var(--color-ink)" font-size="9"
          font-family="var(--font-mono)" text-anchor="middle" letter-spacing="0.18em">IN-PERSON</text>
    <text x="188" y="300" fill="var(--color-ink)" font-size="9"
          font-family="var(--font-mono)" text-anchor="end" dominant-baseline="middle"
          letter-spacing="0.18em">HUMAN</text>
    <text x="812" y="300" fill="var(--color-ink)" font-size="9"
          font-family="var(--font-mono)" text-anchor="start" dominant-baseline="middle"
          letter-spacing="0.18em">AI</text>

    <!-- Legend -->
    <line x1="40" y1="604" x2="960" y2="604"
          stroke="rgba(45,49,66,0.10)" stroke-width="0.8"/>
    <rect x="40" y="616" width="16" height="16" rx="3"
          fill="rgba(235,108,54,0.06)" stroke="var(--color-accent)" stroke-width="1"/>
    <text x="64" y="628" fill="var(--color-muted)" font-size="8.5"
          font-family="var(--font-sans)">Strategic priority</text>
  </svg>
</body>
</html>

Key Source Files Reference

File	Purpose	Location
SKILL.md	Master skill definition, visual-type table, pre-output checklist	skills/diagram-design/SKILL.md
type-quadrant.md	Quadrant layout rules; Consultant special subsection	skills/diagram-design/references/type-quadrant.md
example-quadrant-consultant.html	Fully realized example with all required elements	skills/diagram-design/assets/example-quadrant-consultant.html
template.html	Minimal starting scaffold	skills/diagram-design/assets/template.html
style-guide.md	Design tokens (colors, typography)	skills/diagram-design/references/style-guide.md
export-diagram.md	Export command documentation	commands/export-diagram.md

Summary

• Consultant 2×2 quadrants in diagram-design are scenario matrices with named cells, not plotted points
• Required elements: double-ended axis markers (marker-start + marker-end), single-word labels, corner tags in NN · DIMENSION-A / DIMENSION-B format, exactly one coral-tinted focal quadrant
• Source of truth: references/type-quadrant.md lines 26–44 defines the layout; assets/example-quadrant-consultant.html shows the implementation
• Quality gate: Run the checklist in SKILL.md §9 before every export
• Export command: export-diagram <file> --svg-only produces standalone output

Frequently Asked Questions

What is the difference between a standard quadrant and the Consultant 2×2 in diagram-design?

A standard quadrant displays individual items plotted by two continuous variables. The Consultant 2×2 replaces points with four named scenario cells, uses double-ended axis markers to show spectrums rather than directions, and applies a distinctive coral tint to highlight one strategic priority. This makes it suitable for futures matrices and strategic frameworks rather than scatter plots.

Can I customize the colors in a Consultant 2×2 quadrant diagram?

Yes, but within the token system defined in references/style-guide.md. The Consultant variant draws from the same palette as other diagrams—paper, ink, accent (coral), and muted. You can redefine these CSS custom properties in your HTML file, though the accent color for the focal quadrant and the 1.2px axis stroke width are hard conventions that identify this as a Consultant 2×2.

How do I ensure my Consultant 2×2 passes accessibility requirements?

Include role="img" on the <svg> element and aria-labelledby pointing to <title> and <desc> elements with meaningful descriptions. The diagram-design taste-gate in SKILL.md §9 explicitly checks for these attributes plus color contrast ratios. The example file at assets/example-quadrant-consultant.html demonstrates the correct ARIA pattern.

What export formats does diagram-design support for quadrant diagrams?

The export-diagram command produces SVG (with --svg-only) or PNG (default) output. The SVG format preserves editability and accessibility metadata; PNG is suitable for slide decks or documents where vector rendering is unavailable. The export behavior is documented in commands/export-diagram.md【/cache/repos/github.com/cathrynlavery/diagram-design/main/commands/export-diagram.md#L11-L13】.

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