mcpField
M
mindmap

mindmap

github.com/markdown-viewerProductivity3.4k3.2k installsUpdated 3w ago
Repository

About mindmap

A skill for creating mind map diagrams in PlantUML, aimed at users who want to represent hierarchies and branches. It explains marker-based structure, branch direction, styling, and common rendering fixes.

Key features

  1. 01Hierarchical branches with markers
  2. 02Left and right branch placement
  3. 03Explicit layout direction
  4. 04Syntax and rendering troubleshooting

Use cases

  1. 01Mapping product launch goals and risks
  2. 02Organizing a topic into nested branches

Install

Copy the command and run it in a terminal.

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

After installing, type/mindmapin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

examples/
basic-hierarchy.md
bilateral-layout.md
boxless-branches.md
direction-control.md
project-planning.md
rich-text-content.md
styled-theme.md

Details

From the project README

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

PatternMeaningExample
* RootRoot node with star syntax* Product Strategy
** ChildFirst-level child** Goals
*** GrandchildDeeper hierarchy*** KPI
+ RootRoot node with +/- syntax+ Architecture
++ Left branchBranch expanding on one side++ Services
-- Right branchBranch expanding on opposite side-- Risks
***_ BoxlessBoxless/minimal child node***_ Notes
# RootAlternative root marker style# Topic
**:...;Multi-line block node**:Item A\nItem B;

Branch Side and Direction

ControlSyntaxUse Case
Left-side splitleft sideSplit map into left/right groups from root
Top-to-bottomtop to bottom directionTree-like vertical hierarchy
Right-to-leftright to left directionRTL reading flow or mirrored layouts

Styling Options

MethodSyntaxBest For
Inline node color**[#FFBBCC] IdeaFast 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 stylenode { ... } / 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)
RoleHexPreviewUsage
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
StatusHexUsage
Done / OK#C8E6C9Completed, healthy
In Progress#FFF9C4Active, warning
Blocked / Risk#FFCDD2Issue, danger
Not Started#E0E0E0Pending, neutral
Warm Corporate
RoleHex
Root#1565C0
Level 1#FFB74D
Level 2#4DB6AC
Level 3#E0E0E0
Cool Tech
RoleHex
Root#263238
Level 1#00BCD4
Level 2#80DEEA
Level 3#B2EBF2
Earth Tone
RoleHex
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

PatternPurposeExample
Basic HierarchyTopic decomposition and study outlinesbasic-hierarchy.md
Bilateral LayoutPros/cons, options vs risks, two-side analysisbilateral-layout.md
Boxless BranchesLightweight secondary nodes and annotationsboxless-branches.md
Styled ThemeColor-coded branches and reusable classesstyled-theme.md
Direction ControlVertical or RTL reading directiondirection-control.md
Rich Text ContentDetailed notes with icons and formattingrich-text-content.md
Project PlanningWork breakdown and action mapproject-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

IssueSolution
Diagram not renderedUse ```plantuml fence + @startmindmap ... @endmindmap
Branch depth looks wrongCheck marker count (*, **, ***) and indentation consistency
Multi-line text breaks parserUse : ... ; block syntax, ensure trailing ; exists
Colors not appliedVerify hex format (#RRGGBB) or stereotype class names
Layout direction unexpectedAdd explicit top to bottom direction or right to left direction

Comments

Markdown supported