wordle/.claude/skills/wds-2-trigger-mapping/data/mermaid-formatting-guide.md

Micro Instructions: Generate Mermaid Trigger Map Diagram

Purpose: Create visually appealing, professional Mermaid flowchart diagrams for trigger maps

---

Format Requirements

1. Mermaid Configuration

%%{init: {'theme':'base', 'themeVariables': { 'fontFamily':'Inter, system-ui, sans-serif', 'fontSize':'14px'}}}%%

• Always use Inter/system-ui font
• Set fontSize to 14px
• Use base theme

2. Flowchart Direction

flowchart LR

• Always use left-to-right (LR) direction
• Business goals on left → Platform center → Target groups → Driving forces on right

3. Node Content Formatting

Every node must:

• Start with <br/> for top padding
• End with <br/><br/> for bottom padding
• Use <br/> for line breaks (not multiple spaces)
• Include emoji at the start of the title

Example node structure:

NodeID["<br/>🎯 TITLE<br/><br/>Line 1<br/>Line 2<br/>Line 3<br/><br/>"]

4. Business Goals Nodes (Left Column)

Structure:

BG1["<br/>🌟 WDS VISION<br/><br/>Point 1<br/>Point 2<br/>Point 3<br/><br/>"]
BG2["<br/>📊 CORE OBJECTIVES<br/><br/>Point 1<br/>Point 2<br/>Point 3<br/><br/>"]

Rules:

• Use BG0, BG1, BG2, etc. as node IDs
• Include relevant emoji (🌟 for vision, 📊 for objectives, 🚀 for growth, etc.)
• List 3-5 key points per goal
• Keep titles in ALL CAPS

5. Platform Node (Center)

Structure:

PLATFORM["<br/>🎨 PLATFORM NAME<br/><br/>Tagline or category<br/><br/>Transformation statement<br/>that spans multiple lines<br/>describing the core change<br/><br/>"]

Rules:

• Single node ID: PLATFORM
• Include platform emoji
• Show tagline/category
• Include transformation/value statement
• Break long text into multiple lines

6. Target Group Nodes

Structure:

TG1["<br/>🎯 PERSONA NAME<br/>PRIORITY LEVEL<br/><br/>Trait 1<br/>Trait 2<br/>Trait 3<br/><br/>"]

Rules:

• Use TG0, TG1, TG2, etc. as node IDs
• Include persona-specific emoji
• Show priority (PRIMARY TARGET, SECONDARY TARGET, etc.)
• List 3-4 key profile traits
• Keep persona name in ALL CAPS

7. Driving Forces Nodes

Structure:

DF1["<br/>🎯 PERSONA'S DRIVERS<br/><br/>WANTS<br/>✅ Positive driver 1<br/>✅ Positive driver 2<br/>✅ Positive driver 3<br/><br/>FEARS<br/>❌ Negative driver 1<br/>❌ Negative driver 2<br/>❌ Negative driver 3<br/><br/>"]

Rules:

• Use DF0, DF1, DF2, etc. matching TG IDs
• Use same emoji as corresponding persona
• Add "PERSONA'S DRIVERS" in ALL CAPS
• Section headers: "WANTS" and "FEARS" (no emojis on headers)
• ✅ emoji before each positive driver
• ❌ emoji before each negative driver
• Exactly 3 drivers per category (top 3 only)
• Blank line between sections

8. Connections

Required connections:

%% Business Goals to Platform
BG0 --> PLATFORM
BG1 --> PLATFORM
BG2 --> PLATFORM

%% Platform to Target Groups
PLATFORM --> TG0
PLATFORM --> TG1
PLATFORM --> TG2

%% Target Groups to Driving Forces
TG0 --> DF0
TG1 --> DF1
TG2 --> DF2

Rules:

• All business goals connect to platform
• Platform connects to all target groups
• Each target group connects to its driving forces
• Use simple arrows (-->), no fancy styling

9. Styling Classes

Required classes:

classDef businessGoal fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
classDef platform fill:#e5e7eb,color:#111827,stroke:#9ca3af,stroke-width:3px
classDef targetGroup fill:#f9fafb,color:#1f2937,stroke:#d1d5db,stroke-width:2px
classDef drivingForces fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px

Application:

class BG0,BG1,BG2 businessGoal
class PLATFORM platform
class TG0,TG1,TG2 targetGroup
class DF0,DF1,DF2 drivingForces

Rules:

• Always use these exact colors (light grays with dark text)
• Business goals: lightest gray (#f3f4f6)
• Platform: medium gray (#e5e7eb) with thicker border (3px)
• Target groups: near white (#f9fafb)
• Driving forces: light gray (#f3f4f6)
• Text color: dark gray (#1f2937 or #111827)
• Borders: light gray (#d1d5db or #9ca3af)

---

Complete Example Template

%%{init: {'theme':'base', 'themeVariables': { 'fontFamily':'Inter, system-ui, sans-serif', 'fontSize':'14px'}}}%%
flowchart LR
    %% Business Goals
    BG0["<br/>🌟 VISION<br/><br/>Vision statement line 1<br/>Vision statement line 2<br/>Vision statement line 3<br/><br/>"]
    BG1["<br/>📊 OBJECTIVES<br/><br/>Objective 1<br/>Objective 2<br/>Objective 3<br/><br/>"]
    
    %% Platform
    PLATFORM["<br/>🎨 PRODUCT NAME<br/><br/>Product category or tagline<br/><br/>Transformation statement<br/>describing the change<br/><br/>"]
    
    %% Target Groups
    TG0["<br/>🎯 PERSONA ONE<br/>PRIMARY TARGET<br/><br/>Profile trait 1<br/>Profile trait 2<br/>Profile trait 3<br/><br/>"]
    TG1["<br/>💼 PERSONA TWO<br/>SECONDARY TARGET<br/><br/>Profile trait 1<br/>Profile trait 2<br/>Profile trait 3<br/><br/>"]
    
    %% Driving Forces
    DF0["<br/>🎯 PERSONA ONE'S DRIVERS<br/><br/>WANTS<br/>✅ Positive driver 1<br/>✅ Positive driver 2<br/>✅ Positive driver 3<br/><br/>FEARS<br/>❌ Negative driver 1<br/>❌ Negative driver 2<br/>❌ Negative driver 3<br/><br/>"]
    
    DF1["<br/>💼 PERSONA TWO'S DRIVERS<br/><br/>WANTS<br/>✅ Positive driver 1<br/>✅ Positive driver 2<br/>✅ Positive driver 3<br/><br/>FEARS<br/>❌ Negative driver 1<br/>❌ Negative driver 2<br/>❌ Negative driver 3<br/><br/>"]
    
    %% Connections
    BG0 --> PLATFORM
    BG1 --> PLATFORM
    PLATFORM --> TG0
    PLATFORM --> TG1
    TG0 --> DF0
    TG1 --> DF1

    %% Styling
    classDef businessGoal fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
    classDef platform fill:#e5e7eb,color:#111827,stroke:#9ca3af,stroke-width:3px
    classDef targetGroup fill:#f9fafb,color:#1f2937,stroke:#d1d5db,stroke-width:2px
    classDef drivingForces fill:#f3f4f6,color:#1f2937,stroke:#d1d5db,stroke-width:2px
    
    class BG0,BG1 businessGoal
    class PLATFORM platform
    class TG0,TG1 targetGroup
    class DF0,DF1 drivingForces

---

Emoji Selection Guide

Business Goals

• 🌟 Vision
• 📊 Objectives/Metrics
• 🚀 Growth/Expansion
• 💰 Revenue/Business
• 🤝 Partnerships/Community
• 🎯 Goals/Targets

Personas

• 🎯 Strategic/Primary personas
• 💼 Business/Leadership personas
• 💻 Technical/Developer personas
• 👥 Team/Group personas
• 🎨 Creative/Designer personas
• 📱 User/Customer personas

Platform

• 🎨 Design/Creative products
• 💻 Software/Tech products
• 📱 Mobile/App products
• 🛠️ Tools/Utilities
• 📊 Analytics/Data products
• 🤖 AI/Automation products

---

Quality Checklist

Before finalizing diagram, verify:

• Mermaid config includes custom font and fontSize
• All nodes start with <br/> and end with <br/><br/>
• All titles are in ALL CAPS
• Each persona has matching emoji in both TG and DF nodes
• Exactly 3 positive drivers per persona (with ✅)
• Exactly 3 negative drivers per persona (with ❌)
• "WANTS" and "FEARS" headers have no emojis
• All connections are present (goals→platform→groups→forces)
• Light gray styling with dark text applied
• Platform has thicker border (3px)
• No syntax errors or missing brackets

---

Common Mistakes to Avoid

❌ Don't:

• Use multiple spaces for alignment (use <br/> only)
• Mix HTML tags (bold, italic) - keep plain text
• Forget padding (<br/>) at top and bottom
• Use colors other than light grays
• Add emojis to "WANTS" and "FEARS" headers
• Include more than 3 drivers per category
• Use lowercase in titles

✅ Do:

• Use <br/> for all line breaks
• Keep consistent spacing (blank lines between sections)
• Match emojis between personas and their drivers
• Use exactly 3 drivers per category
• Apply consistent styling to all nodes
• Test diagram renders correctly

---

This format creates professional, scannable trigger maps that clearly communicate strategic insights at a glance.