# How to Use the Consultant 2×2 Quadrant Variant with Named Cells

> Learn to use the consultant 2x2 quadrant variant with named cells for scenario planning. This matrix uses named scenarios, double-ended axes, and numbered tags for clear visualization.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: how-to-guide
- Published: 2026-08-15

---

**The consultant 2×2 quadrant variant renders a scenario-planning matrix where each cell contains a named scenario with a title and description, using double-ended axes and numbered corner tags instead of individual data points.**

The cathrynlavery/diagram-design repository provides a specialized diagramming skill that supports multiple quadrant layouts. The consultant 2×2 quadrant variant transforms the standard point-cloud quadrant into a strategic scenario matrix commonly used in BCG or McKinsey-style frameworks, where cells hold named future states rather than scattered data points.

## What Is the Consultant 2×2 Quadrant Variant?

The consultant variant is a specialized form of the standard quadrant diagram defined in [`type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-quadrant.md). It swaps the point-cloud layout for a scenario-matrix layout, where each quadrant cell holds a **named scenario** (title + short description) and the axes represent **ranges** rather than single measurements. This layout is explicitly designed for strategic planning exercises where the output should present four distinct, named futures rather than a distribution of individual items.

## Key Architectural Differences From Standard Quadrants

The consultant 2×2 quadrant variant diverges from the standard implementation in several specific ways:

- **Axes**: Standard quadrants use single-ended arrows with a 1 px stroke. The consultant variant uses **double-ended arrows** with a 1.2 px stroke, placing markers at both ends to indicate ranges.
- **Cell Content**: Standard cells contain small labeled dots (`r=4`). Consultant cells contain **named scenarios** with a title and 1–3 line description.
- **Corner Tags**: Standard tags use short labels like *DO FIRST*. Consultant tags use a **numbered format** with axis combinations, such as `02 · REMOTE / AI`.
- **Focal Accent**: Standard layouts apply coral tint to a single item. The consultant variant applies coral to an **entire quadrant** via tinted background and coral stroke to highlight the "headline bet."
- **Background**: Both variants use the house skin (warm paper with 10% dot pattern). Removing this pattern for plain white backgrounds is explicitly flagged as an anti-pattern in the specification.

## When to Use the Consultant Variant

Deploy the consultant 2×2 quadrant variant when you need:

- A **scenario-planning matrix** where readers walk away with four named futures rather than a scattered set of points.
- To map **independent drivers** (e.g., *Remote vs In-Person* and *Human vs AI*).
- To highlight **one quadrant** as the primary strategic recommendation using the coral focal accent.

## How to Configure Named Cells

### Required Front-Matter Structure

The diagram-design skill consumes markdown front-matter to configure the diagram. To invoke the consultant variant, set `type: quadrant` and add `variant: consultant`. The skill will generate HTML according to the rules defined in [`type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-quadrant.md).

```yaml
---
type: quadrant
variant: consultant
title: Workplace 2030
axes:
  - name: REMOTE
    range: "Low → High"
  - name: AI
    range: "Human → Automated"
focal: 2
cells:
  - id: 1
    label: "REMOTE / HUMAN"
    title: "Distributed humans"
    description: |
      Async-first, global hiring,
      Slack-heavy. Human-centric
      workflows, low AI leverage.
  - id: 2
    label: "REMOTE / AI"
    title: "Agent teams"
    description: |
      Humans orchestrate; AI
      handles the routine layer.
      Small, high-leverage teams.
  - id: 3
    label: "IN-PERSON / HUMAN"
    title: "Office classic"
    description: |
      Return-to-office mandates,
      manual work. Techlash
      prolongs the status quo.
  - id: 4
    label: "IN-PERSON / AI"
    title: "In-person + AI"
    description: |
      Smart offices, AI-augmented
      staff. Physical presence is
      the moat, AI is the lever.
---

```

### Styling Constraints and Anti-Patterns

The consultant variant enforces strict formatting rules to maintain the professional scenario-matrix aesthetic:

- **Axis Labels**: Must be **one word**, uppercase, rendered in Geist Mono 9 px, and placed *beyond* the arrow tips. Do not use "HIGH / LOW" glyphs.
- **Corner Tag Format**: Must follow the exact pattern `NN · DIMENSION-A / DIMENSION-B` where the dimension words match the axis labels exactly.
- **Focal Restriction**: Only **one** quadrant may receive the coral accent. Applying the tint to multiple quadrants violates the consultant variant anti-patterns.
- **Background Preservation**: Maintain the warm paper and dot pattern. Replacing it with plain white defeats the consultant style and is considered an anti-pattern per the repository specifications.

## Rendering the Diagram via CLI

After creating a markdown file with the consultant variant front-matter (e.g., [`scenario.md`](https://github.com/cathrynlavery/diagram-design/blob/main/scenario.md)), pass it to the skill using the `export-diagram` command documented in [`export-diagram.md`](https://github.com/cathrynlavery/diagram-design/blob/main/export-diagram.md):

```bash
diagram-design export-diagram scenario.md --output diagram.html

```

The command reads [`scenario.md`](https://github.com/cathrynlavery/diagram-design/blob/main/scenario.md), detects `type: quadrant` with `variant: consultant`, and writes the fully-styled HTML. The resulting output matches the reference implementation found in [`example-quadrant-consultant.html`](https://github.com/cathrynlavery/diagram-design/blob/main/example-quadrant-consultant.html) within the repository assets.

## Summary

- The consultant 2×2 quadrant variant renders strategic scenario matrices with named cells rather than data points.
- Configure the diagram by setting `variant: consultant` in the markdown front-matter processed by the diagram-design skill.
- Use double-ended axes (1.2 px stroke), numbered corner tags in the format `NN · AXIS / AXIS`, and Geist Mono typography for axis labels.
- Restrict the coral focal accent to a single quadrant only.
- Generate the final diagram using the `diagram-design export-diagram` CLI or the web UI.

## Frequently Asked Questions

### How is the consultant variant different from a standard quadrant diagram?

Standard quadrants plot individual items as small labeled dots inside quadrants. The consultant variant creates a 2×2 scenario matrix where each cell contains a **named scenario** with a title and multi-line description, using double-ended axes and numbered corner tags as specified in [`type-quadrant.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-quadrant.md).

### Can I apply the coral accent to multiple quadrants?

No. The specification explicitly restricts the focal coral accent to **one quadrant only**. Applying the tint to multiple cells violates the consultant variant anti-patterns and breaks the visual hierarchy intended for highlighting a single "headline bet."

### What format must the corner tags follow?

Corner tags must use the exact format `NN · DIMENSION-A / DIMENSION-B` where `NN` is the cell ID and the dimension words match the axis labels exactly. This format is enforced in the reference implementation [`example-quadrant-consultant.html`](https://github.com/cathrynlavery/diagram-design/blob/main/example-quadrant-consultant.html) and required for proper rendering.

### How do I generate the diagram from the markdown file?

Use the CLI command `diagram-design export-diagram filename.md --output diagram.html` as documented in [`export-diagram.md`](https://github.com/cathrynlavery/diagram-design/blob/main/export-diagram.md), or process the markdown through the diagram-design web UI. Both methods parse the front-matter and emit the styled HTML/SVG according to the consultant variant rules.