mindmap

SKILL.md

Mind Map Diagram Generator

Quick Start: Start with @startmindmap -> define root and branches with * or +/- markers -> optionally set branch side, direction, and styles -> wrap in ```plantuml fence.

⚠️ IMPORTANT: Always use ```plantuml or ```puml code fence. NEVER use ```text — it will NOT render as a diagram.

Critical Rules

Every diagram starts with @startmindmap and ends with @endmindmap

Each hierarchy level is represented by repeating markers:

* style: * (root), ** (level 1), *** (level 2)

+/- style: + grows left branch, - grows right branch

Keep one marker style consistent in the same local branch (do not randomly mix indentation styles)

Use left side to switch subsequent branches to the left side of the root

Use direction keywords when needed:

top to bottom direction

right to left direction

Multi-line node content must use block syntax:

**:Line 1\nLine 2;

For quick color coding, use inline node color:

*[#Orange] Root

**[#lightgreen] Child

For reusable themes, define <style> and apply stereotypes like <<green>>

Rich text/Creole and icon syntax are supported inside node text (see examples)

Node Syntax Cheat Sheet

Pattern
Meaning
Example

* Root
Root node with star syntax
* Product Strategy

** Child
First-level child
** Goals

*** Grandchild
Deeper hierarchy
*** KPI

+ Root
Root node with +/- syntax
+ Architecture

++ Left branch
Branch expanding on one side
++ Services

-- Right branch
Branch expanding on opposite side
-- Risks

***_ Boxless
Boxless/minimal child node
***_ Notes

# Root
Alternative root marker style
# Topic

**:...;
Multi-line block node
**:Item A\nItem B;

Branch Side and Direction

Control
Syntax
Use Case

Left-side split
left side
Split map into left/right groups from root

Top-to-bottom
top to bottom direction
Tree-like vertical hierarchy

Right-to-left
right to left direction
RTL reading flow or mirrored layouts

Styling Options

Method
Syntax
Best For

Inline node color
**[#FFBBCC] Idea
Fast per-node emphasis

Reusable class style
<style> ... .green { ... } </style> + <<green>>
Consistent visual themes

Depth-based style
:depth(1) { ... }
Global formatting by hierarchy depth

Node/arrow global style
node { ... } / arrow { ... }
Unified typography and connectors

Recommended Color Palettes

Pick a palette that matches the map's purpose. Use inline [#hex] for quick coloring or define <style> classes for reuse.

General-Purpose (Pastel)

Role
Hex
Preview
Usage

Root
#2196F3
🔵
Central topic

Branch A
#A5D6A7
🟢
Category / group 1

Branch B
#90CAF9
🔵
Category / group 2

Branch C
#CE93D8
🟣
Category / group 3

Branch D
#FFE082
🟡
Category / group 4

Leaf
#E0E0E0
⚪
Detail nodes

Status / RAG

Status
Hex
Usage

Done / OK
#C8E6C9
Completed, healthy

In Progress
#FFF9C4
Active, warning

Blocked / Risk
#FFCDD2
Issue, danger

Not Started
#E0E0E0
Pending, neutral

Warm Corporate

Role
Hex

Root
#1565C0

Level 1
#FFB74D

Level 2
#4DB6AC

Level 3
#E0E0E0

Cool Tech

Role
Hex

Root
#263238

Level 1
#00BCD4

Level 2
#80DEEA

Level 3
#B2EBF2

Earth Tone

Role
Hex

Root
#5D4037

Level 1
#A1887F

Level 2
#C8E6C9

Level 3
#FFF9C4

Tip: Avoid pure saturated colors (#FF0000, #00FF00) — they reduce readability. Prefer soft/muted tones for backgrounds and reserve bold colors for the root only.

Mind Map Patterns

Pattern
Purpose
Example

Basic Hierarchy
Topic decomposition and study outlines
basic-hierarchy.md

Bilateral Layout
Pros/cons, options vs risks, two-side analysis
bilateral-layout.md

Boxless Branches
Lightweight secondary nodes and annotations
boxless-branches.md

Styled Theme
Color-coded branches and reusable classes
styled-theme.md

Direction Control
Vertical or RTL reading direction
direction-control.md

Rich Text Content
Detailed notes with icons and formatting
rich-text-content.md

Project Planning
Work breakdown and action map
project-planning.md

Quick Example

@startmindmap
* Product Launch
** Goals
*** Revenue
*** User Growth

left side
** Risks
*** Timeline Slip
*** Budget Overrun

right to left direction
** Channels
*** Content
*** Ads
@endmindmap

Common Pitfalls

Issue
Solution

Diagram not rendered
Use ```plantuml fence + @startmindmap ... @endmindmap

Branch depth looks wrong
Check marker count (*, **, ***) and indentation consistency

Multi-line text breaks parser
Use : ... ; block syntax, ensure trailing ; exists

Colors not applied
Verify hex format (#RRGGBB) or stereotype class names

Layout direction unexpected
Add explicit top to bottom direction or right to left direction