mindmap

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

快速入门：以

@startmindmap

开头 -> 使用

或

+/-

标记定义根节点和分支 -> 可选择性设置分支方向、位置和样式 -> 用

```plantuml

代码块包裹内容。

⚠️ 重要提示：请始终使用
```plantuml
或
```puml
代码块。绝对不要使用
```text
——这样无法渲染为图表。

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)

每个图表都必须以
```
@startmindmap
```
开头，
```
@endmindmap
```
结尾
每个层级通过重复标记来表示：
- ```
*
```
  样式：
```
*
```
  （根节点）、
```
**
```
  （一级子节点）、
```
***
```
  （二级子节点）
- ```
+/-
```
  样式：
```
+
```
  生成左侧分支，
```
-
```
  生成右侧分支
在同一局部分支中保持标记样式一致（不要随意混合缩进样式）
使用
```
left side
```
将后续分支切换到根节点的左侧
必要时使用方向关键字：
- ```
top to bottom direction
```
  （从上到下方向）
- ```
right to left direction
```
  （从右到左方向）
多行节点内容必须使用块语法：
- ```
**:Line 1\nLine 2;
```
如需快速颜色编码，使用内联节点颜色：
- ```
*[#Orange] Root
```
- ```
**[#lightgreen] Child
```
如需可复用主题，定义
```
<style>
```
并应用类似
```
<<green>>
```
的构造型
节点文本内支持富文本/Creole语法和图标（详见示例）

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

模式	含义	示例
`* Root`	星号语法的根节点	`* Product Strategy`
`** Child`	一级子节点	`** Goals`
`*** Grandchild`	更深层级节点	`*** KPI`
`+ Root`	+/-语法的根节点	`+ Architecture`
`++ Left branch`	单侧扩展分支	`++ Services`
`-- Right branch`	对侧扩展分支	`-- Risks`
`***_ Boxless`	无边框/极简子节点	`***_ Notes`
`# Root`	替代根节点标记样式	`# Topic`
`**:...;`	多行块节点	`**: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

控制项	语法	使用场景
左侧分支切换	`left side`	将思维导图从根节点处拆分为左右两组
从上到下	`top to bottom direction`	类树形垂直层级结构
从右到左	`right to left direction`	从右到左阅读流或镜像布局

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

方法	语法	最佳用途
内联节点颜色	`**[#FFBBCC] Idea`	快速突出单个节点
可复用类样式	`<style> ... .green { ... } </style>` + `<<green>>`	保持视觉主题一致性
基于层级的样式	`:depth(1) { ... }`	按层级全局格式化
节点/箭头全局样式	`node { ... }` / `arrow { ... }`	统一排版和连接线样式

Recommended Color Palettes

推荐调色板

Pick a palette that matches the map's purpose. Use inline

[#hex]

for quick coloring or define

<style>

classes for reuse.

选择与思维导图用途匹配的调色板。使用内联

[#hex]

快速上色，或定义

<style>

类实现复用。

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

角色	十六进制码	预览	用途
根节点	`#2196F3`	🔵	核心主题
分支A	`#A5D6A7`	🟢	分类/组1
分支B	`#90CAF9`	🔵	分类/组2
分支C	`#CE93D8`	🟣	分类/组3
分支D	`#FFE082`	🟡	分类/组4
叶子节点	`#E0E0E0`	⚪	细节节点

Status / RAG

状态类（RAG）

Status	Hex	Usage
Done / OK	`#C8E6C9`	Completed, healthy
In Progress	`#FFF9C4`	Active, warning
Blocked / Risk	`#FFCDD2`	Issue, danger
Not Started	`#E0E0E0`	Pending, neutral

状态	十六进制码	用途
已完成/正常	`#C8E6C9`	已完成、健康状态
进行中	`#FFF9C4`	活跃中、警告状态
阻塞/风险	`#FFCDD2`	问题、危险状态
未开始	`#E0E0E0`	待处理、中性状态

Warm Corporate

暖色调企业风

Role	Hex
Root	`#1565C0`
Level 1	`#FFB74D`
Level 2	`#4DB6AC`
Level 3	`#E0E0E0`

角色	十六进制码
根节点	`#1565C0`
一级节点	`#FFB74D`
二级节点	`#4DB6AC`
三级节点	`#E0E0E0`

Cool Tech

冷色调科技风

Role	Hex
Root	`#263238`
Level 1	`#00BCD4`
Level 2	`#80DEEA`
Level 3	`#B2EBF2`

角色	十六进制码
根节点	`#263238`
一级节点	`#00BCD4`
二级节点	`#80DEEA`
三级节点	`#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.

角色	十六进制码
根节点	`#5D4037`
一级节点	`#A1887F`
二级节点	`#C8E6C9`
三级节点	`#FFF9C4`

提示：避免使用纯饱和色（如
#FF0000
、
#00FF00
）——它们会降低可读性。背景色优先选择柔和色调，仅为根节点保留醒目颜色。

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

模式	用途	示例
基础层级结构	主题分解和学习大纲	basic-hierarchy.md
双侧布局	优缺点对比、选项与风险分析、双向评估	bilateral-layout.md
无边框分支	轻量级次级节点和注释	boxless-branches.md
主题样式	颜色编码分支和可复用类	styled-theme.md
方向控制	垂直或从右到左阅读方向	direction-control.md
富文本内容	包含图标和格式的详细笔记	rich-text-content.md
项目规划	工作分解和行动导图	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

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`

问题	解决方案
图表未渲染	使用 ```plantuml 代码块 + `@startmindmap ... @endmindmap` 结构
分支层级显示错误	检查标记数量（ `` , `` , `**` ）和缩进一致性
多行文本解析失败	使用 `: ... ;` 块语法，确保结尾有 `;`
颜色未生效	验证十六进制格式（ `#RRGGBB` ）或构造型类名称
布局方向不符合预期	添加显式的 `top to bottom direction` 或 `right to left direction`