Methodologydesign

mindmap

Create hierarchical mind maps using PlantUML @startmindmap syntax. Best for brainstorming, topic decomposition, study notes, and decision trees with automatic radial layout, left/right branches, and per-node styling.

markdown-viewer/skills

View source

Install

npx skills add https://github.com/markdown-viewer/skills --skill mindmap

Use with your agent

Install the mindmap skill, then use it as build context. Run: npx skills add https://github.com/markdown-viewer/skills --skill mindmap. Then read the installed skill.md and follow its guidance to build or refactor my project.

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`