7.9 KiB

Raw Blame History

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   for top padding
End with   for bottom padding
Use   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   and end with  
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   only)
Mix HTML tags (bold, italic) - keep plain text
Forget padding ( ) 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   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.

7.9 KiB Raw Blame History

Micro Instructions: Generate Mermaid Trigger Map Diagram

Format Requirements

1. Mermaid Configuration

2. Flowchart Direction

3. Node Content Formatting

4. Business Goals Nodes (Left Column)

5. Platform Node (Center)

6. Target Group Nodes

7. Driving Forces Nodes

8. Connections

9. Styling Classes

Complete Example Template

Emoji Selection Guide

Business Goals

Personas

Platform

Quality Checklist

Common Mistakes to Avoid

7.9 KiB

Raw Blame History