Excalidraw Exec Charts

The Minimalism Rule: If removing an element doesn't weaken the argument, remove it. Executive charts use negative space as a design element — white space signals clarity of thought.

The Hierarchy Rule: The most important element is the largest, highest, or most saturated. The eye should be led, not left to wander.

When to Use This Skill

Use when:

• The audience is C-suite, board, or senior leadership
• The deliverable is a single slide or one-pager
• The goal is to frame a decision, not present raw data
• You need pyramid, MECE, pain/solution, 2×2, funnel, or before/after layouts
• The message must land in under 5 seconds

Don't use when:

• Detailed data visualization is needed (use mckinsey-style-visualization instead)
• Technical architecture diagrams (use excalidraw-diagram instead)
• Multi-slide narrative decks
• The audience needs granular numbers, not framing

Chart Types

1. Pyramid Diagram

Use for: Priority hierarchies, strategic layering, capability maturity models, Maslow-style need stacks.

Structure:

• 3–5 horizontal tiers, widest at bottom, narrowest at top
• Each tier is a single rectangle with centered text
• Optional: right-side annotations explaining each tier
• Top tier = highest priority / aspiration / outcome
• Bottom tier = foundation / prerequisites

Layout rules:

• Tiers stack vertically, centered on x-axis
• Each tier is 60–80px shorter in width than the one below
• Consistent height per tier (60–80px)
• 4px vertical gap between tiers
• Use color saturation gradient: most saturated at top (Primary), least at bottom (Tertiary)
• Title text above the pyramid, left-aligned
• Annotation text to the right of each tier, connected by subtle dotted lines

Example prompt: "Create a pyramid showing our AI maturity levels: Experimentation → Pilot → Scaling → Embedded → Autonomous"

2. MECE Breakdown

Use for: Problem decomposition, market segmentation, strategic option mapping, issue trees.

Structure:

• Root node at top or left (the question or problem)
• First-level branches: mutually exclusive categories
• Optional second-level branches: sub-categories
• Each branch is a rectangle; lines connect parent to children
• A subtle label "MECE" or "Mutually Exclusive, Collectively Exhaustive" as a small annotation

Layout rules:

• Top-down tree layout preferred for 3–5 branches
• Left-to-right for 2–3 branches with deep sub-categories
• Equal width for sibling nodes at same level
• Root node uses Decision color (amber fill)
• Branch nodes use Primary/Secondary/Tertiary fills
• Leaf nodes use lighter fills
• Structural lines (not arrows) connect parent to children
• Consistent 40px vertical spacing between levels

Example prompt: "Break down our revenue streams MECE: Product (SaaS, On-Prem, Marketplace), Services (Consulting, Training, Support), Partnerships (Resellers, OEM)"

3. Pain vs. Solution

Use for: Problem framing, value proposition articulation, before/after transformation, sales narratives.

Structure:

• Two-column layout: left = pain/problem, right = solution/benefit
• Center divider: vertical line or arrow showing transformation
• Each column has 3–5 short bullet items as text blocks
• Color contrast: pain side uses Warning/Error colors, solution side uses End/Success colors
• Optional: center label "→" or "Our Approach" on the divider

Layout rules:

• Canvas divided 45% / 10% / 45% (pain / divider / solution)
• Pain column header: "Today" or "Pain Points" or "Challenges"
• Solution column header: "Tomorrow" or "Our Solution" or "With [Product]"
• Header text uses Title color, body text uses Body/Detail color
• Pain items use Warning fill rectangles with rounded corners
• Solution items use End/Success fill rectangles with rounded corners
• Vertical center alignment between corresponding pain/solution pairs
• Single thick arrow in center pointing left-to-right

Example prompt: "Show pain vs solution: Pain — manual deployments take 3 days, 40% rollback rate, no audit trail. Solution — automated CI/CD in 15 min, 2% rollback rate, full compliance log"

4. 2×2 Matrix

Use for: Prioritization (effort/impact), competitive positioning, risk assessment, strategic quadrant mapping.

Structure:

• Four equal quadrants formed by two axis lines
• X-axis label at bottom, Y-axis label at left
• Each quadrant has a title and optional 2–3 items
• Quadrant shading varies by strategic implication (e.g., top-right = "Do First" = green)

Layout rules:

• Total matrix: 600×600px
• Two structural lines: one horizontal, one vertical, crossing at center
• Axis labels as free-floating text at ends of each axis
• Quadrant titles: bold, positioned at center-top of each quadrant
• Items inside quadrants: smaller text, listed vertically
• Color coding:
  • Top-right (high-high): End/Success fill
  • Top-left: Decision fill (amber)
  • Bottom-right: Secondary fill
  • Bottom-left: Inactive/Disabled fill
• Arrow tips on axis lines pointing outward

Example prompt: "Create an effort vs impact matrix for our Q3 initiatives: Quick Wins (low effort, high impact): API caching, landing page redesign. Big Bets (high effort, high impact): platform migration. Fill-ins (low effort, low impact): docs update. Money Pit (high effort, low impact): legacy refactor"

5. Funnel Chart

Use for: Conversion flows, pipeline visualization, customer journey stages, process narrowing.

Structure:

• 3–6 horizontal rectangles, each narrower than the previous
• Centered on x-axis, stacked vertically
• Each stage labeled with name and optional metric
• Width reduction proportional to drop-off (or equal steps for conceptual funnels)

Layout rules:

• Top rectangle: full width (e.g., 500px)
• Each subsequent rectangle: 60–80px narrower
• Consistent height per stage (50–60px)
• 2px vertical gap between stages
• Color gradient from cool (top, Tertiary) to warm (bottom, Primary or Start/Trigger)
• Stage labels centered inside each rectangle
• Optional: right-side percentage annotations
• Title above the funnel

Example prompt: "Show our hiring funnel: Applications (2,400) → Phone Screen (800) → Technical (320) → Onsite (120) → Offer (45) → Accepted (32)"

6. Before/After Contrast

Use for: Transformation narratives, process improvement, modernization stories, ROI justification.

Structure:

• Side-by-side layout: left = "Before", right = "After"
• Each side contains a mini-diagram or stacked elements showing the state
• Center: large arrow or transformation indicator
• Visual weight should favor the "After" side (larger, brighter, cleaner)

Layout rules:

• Canvas divided 42% / 16% / 42%
• "Before" side: muted colors (Inactive/Disabled fills), slightly rough edges (roughness: 1)
• "After" side: vibrant colors (Primary/End/Success fills), clean edges (roughness: 0)
• Center arrow: thick (strokeWidth: 4), uses Primary stroke color
• "Before" header uses Body/Detail color; "After" header uses Title color
• Elements in "Before" can be slightly tilted or overlapping (controlled chaos)
• Elements in "After" are aligned, evenly spaced (order from chaos)

Example prompt: "Before: 5 manual steps, 3 handoffs, 2 day turnaround, frequent errors. After: 1 automated pipeline, zero handoffs, 15 min turnaround, built-in validation"

Design Principles

Color Palette

Pull all colors from references/color-palette.md. Key mappings for exec charts:

Typography

Spacing & Layout

• Minimum margin: 40px from canvas edge to any element
• Element gaps: 4px between stacked tiers, 20px between columns
• Aspect ratio: 16:9 landscape (1200×675 recommended)
• Alignment: Center-aligned by default; left-align only for annotations

Roughness

• Executive charts: Always roughness: 0 (clean, precise lines)
• Exception: "Before" state in Before/After can use roughness: 1 for contrast

Workflow

1. Identify the chart type from the user's request
2. Read references/color-palette.md for current brand colors
3. Determine the argument — what single point should the viewer take away?
4. Generate Excalidraw JSON following the layout rules for that chart type
5. Apply the 5-Second Test mentally — simplify if needed
6. Render & validate if render pipeline is available (see excalidraw-diagram skill)
7. Save as .excalidraw file

Quality Checklist

• Single clear takeaway visible in 5 seconds
• No more than 6 elements at any hierarchy level
• Colors pulled from color-palette.md, not hardcoded
• Title present and descriptive
• Consistent spacing and alignment
• Roughness: 0 for all exec charts (except Before state)
• Font sizes follow the typography table
• 16:9 aspect ratio
• No orphaned or overlapping elements
• The chart argues a point, not just labels boxes

Common Pitfalls

• Too many tiers/branches: If a pyramid has 7+ levels or a MECE tree has 8+ leaves, it's not executive-ready. Consolidate.
• Equal visual weight everywhere: The eye needs a focal point. Use color or size to create one.
• Data without framing: A funnel with just numbers isn't a chart — add the "so what" as a title or annotation.
• Decoration over clarity: Drop shadows, gradients, and 3D effects have no place in exec charts. Flat, clean, semantic.

Integration with Other Skills

• excalidraw-diagram: For complex technical diagrams that need the full Excalidraw methodology
• mckinsey-style-visualization: For data-heavy slides with charts, graphs, and detailed analytics
• smart-brevity: For the narrative text that accompanies these visuals

Version History