Mind Map Diagram Generator

Quick Start: Start with

@startmindmap

-> define root and branches with

+/-

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

plantuml

@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`

mindmap

NPX Install

Tags

SKILL.md Content