Building a Product Lifecycle Mindmap - Tutorial

What You'll Build

Mindmaps are perfect for brainstorming, exploring product concepts, and organizing ideas hierarchically. In this tutorial, you'll create a product lifecycle mindmap with:

Central topic node (the main concept)
Primary branches (major lifecycle stages)
Secondary branches (details within each stage)
Color-coded themes for visual organization

Product Lifecycle Mindmap Preview — The final product lifecycle mindmap you'll create

The Mindmap Pattern

Mindmaps radiate from a central idea. Each branch represents a related concept:

Stage	Color	Example Ideas
Ideation	Yellow	Brainstorming, research, validation
Development	Blue	Design, coding, testing
Launch	Green	Marketing, PR, go-to-market
Growth	Purple	Analytics, optimization, scaling
Maturity	Orange	Maintenance, updates, sunset

Step 1: Create the Central Node

The central node is the heart of your mindmap. Make it prominent and visually distinct.

Add the Central Concept

{
  "id": "center",
  "type": "ellipse",
  "x": 550,
  "y": 350,
  "w": 180,
  "h": 100,
  "options": {
    "stroke": "#0f172a",
    "strokeWidth": 4,
    "fill": "#fbbf24",
    "fillStyle": "solid"
  }
},
{
  "id": "center-label",
  "type": "text",
  "x": 550,
  "y": 385,
  "w": 180,
  "h": 30,
  "text": "🚀 Product\\nLifecycle",
  "fontSize": 18,
  "fontWeight": "bold",
  "align": "center",
  "options": { "stroke": "#1e293b" }
}

Step 2: Add Primary Branches

Use curved arrows or lines radiating from the center to connect primary concepts.

Create Radial Connections

// Connection to "Ideation" (top-left)
{
  "id": "line-ideation",
  "type": "curvedArrow",
  "x": 560,
  "y": 350,
  "w": -150,
  "h": -100,
  "endArrowhead": "arrow",
  "options": {
    "stroke": "amber.500",
    "strokeWidth": 3
  }
}

// Ideation branch node
{
  "id": "ideation",
  "type": "rectangle",
  "x": 320,
  "y": 200,
  "w": 140,
  "h": 50,
  "borderRadius": 25,  // Pill shape!
  "options": {
    "stroke": "amber.500",
    "fill": "amber.100",
    "fillStyle": "solid"
  }
}

Tip: Use curvedArrow for organic-looking connections. Use large borderRadius values to create pill-shaped nodes.

Radial Positioning Math

Position branches around the center like a clock: top (12 o'clock), top-right (2 o'clock), right (3 o'clock), etc. Use negative w/h values for left and up directions.

Step 3: Add Secondary Branches

Each primary branch can have sub-branches for more detail. Make these smaller and use lighter colors.

Add Sub-Branches

// Sub-branches under "Ideation"
{
  "id": "ideation-research",
  "type": "rectangle",
  "x": 180,
  "y": 120,
  "w": 100,
  "h": 35,
  "borderRadius": 17,
  "options": {
    "stroke": "amber.400",
    "fill": "amber.50",
    "fillStyle": "solid"
  }
},
{
  "id": "ideation-research-label",
  "type": "text",
  "x": 180,
  "y": 130,
  "w": 100,
  "h": 15,
  "text": "🔍 Research",
  "fontSize": 11,
  "align": "center"
}

Repeat this pattern for each sub-branch: Validation, Brainstorming, etc.

Design Principles for Mindmaps

Color hierarchy — Central node is darkest, branches get lighter
Size hierarchy — Central node largest, sub-branches smallest
Use emojis — They provide instant visual recognition
Keep text short — 1-3 words per node
Curved connections — Feel more organic than straight lines

🧠 Build Your Mindmap

Open Privacy Sketch and brainstorm your next product idea visually.

Open Privacy Sketch

Next Steps

Timeline Tutorial — Create chronological diagrams
AI History Tutorial — Educational timeline
LLM Reference — Technical documentation