Markdown Viewer 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
```plantumlor```pumlcode fence. NEVER use```text— it will NOT render as a diagram.
Critical Rules
- Every diagram starts with
@startmindmapand 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 sideto switch subsequent branches to the left side of the root - Use direction keywords when needed:
top to bottom directionright 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 |