mindmap - SKILL.md Agent Skill

name: mindmap description: Create interactive mind maps from notes or outlines.

Mind Map

Convert Markdown files to interactive HTML mind maps with enhanced features. Uses official Markmap frontend with custom controls.

What This Skill Does

Input: Markdown file with heading hierarchy (# ## ### ####) Output: Interactive HTML with enhanced features

This is a pure converter - no LLM required. Agent generates Markdown → this skill converts to interactive HTML.

Output Contract

Produces a self-contained HTML file with the interactive mind map.
Export controls allow users to download PNG and HTML versions from the UI.

Enhanced Features

1. Smart Default Collapse

Opens with only first level visible (minimalist view)
Users can manually expand nodes one-by-one
Reduces cognitive load on complex maps

2. Export Functionality

Export PNG button: Export mindmap as high-quality PNG image
Export HTML button: Export the current page as a standalone HTML file
Both buttons located in top-right control panel
Downloads automatically to your default download folder

3. Click-to-Discuss

Click any node's text (not the branch circle)
Generates discussion prompt: "讨论这些来源关于「[node title]」相关的内容"
Appears in bottom panel with:
- Copy to Clipboard button
- Close button
Clicking branch circles only expands/collapses (no prompt)

4. Markmap Standard Features

Zoom with mouse wheel
Pan by dragging
Click circles to expand/collapse
Responsive design
Offline support (all assets embedded)

Workflow

1. Ask Claude: "Generate a mind map about X in Markdown format"
2. Claude creates Markdown with # ## ### #### hierarchy
3. Save to file (e.g., mindmap.md)
4. Run from `skills/mindmap`: `python main.py -i mindmap.md -o mindmap.html`
5. Open HTML → interact with enhanced mind map

Usage

cd skills/mindmap
python main.py --input mindmap.md --output mindmap.html

Parameters:

--input, -i: Input Markdown file (required)
--output, -o: Output HTML file (default: mindmap.html)

Example Markdown Format

# Main Topic

## First Branch

### Subtopic 1.1

#### Detail 1.1.1

#### Detail 1.1.2

### Subtopic 1.2

## Second Branch

### Subtopic 2.1

Math (KaTeX)

Markmap includes a KaTeX plugin, so math renders automatically when you use LaTeX delimiters inside headings.

# Calculus
## Euler: $e^{i\pi}+1=0$
## Area
### $$\int_0^1 x^2\,dx = \frac{1}{3}$$

Notes:

Inline math uses $...$ and block math uses $$...$$.
Escape literal dollar signs as \$ to avoid math parsing.
When math is present, a fonts/ folder is created next to the HTML output.

User Interactions

Action	Behavior
Click "Export PNG" button	Downloads mindmap as PNG image
Click "Export HTML" button	Downloads current mindmap page as HTML
Click node text	Shows discussion prompt at bottom
Click node circle	Expands/collapses that branch only
Mouse wheel	Zoom in/out
Drag background	Pan the view
Click "Copy" in prompt panel	Copies prompt to clipboard

Generated HTML Structure

<!DOCTYPE html>
<html>
  <head>
    <!-- Markmap CSS/JS (embedded) -->
  </head>
  <body>
    <!-- SVG mind map -->
    <!-- Export buttons (top-right) -->
    <!-- Prompt panel (bottom, hidden by default) -->
    <!-- Custom JavaScript for features -->
  </body>
</html>

Technical Details

No LLM/AI: Pure Markdown → HTML conversion
No API Keys: No external API calls
Frontend: Official Markmap library + custom enhancements
Default State: Collapsed to level 1
Export: PNG (SVG render via canvg) and HTML (full page)
Prompt Format: Chinese template (customizable in code)

Dependencies

Python

pip install -r requirements.txt

Only requires: loguru (logging)

System

Node.js/npx: For markmap-cli
Auto-downloads on first use: npx -y markmap-cli

Customization

To change the prompt format, edit main.py line 204:

const prompt = `Discuss what these sources say about「${nodeText}`, in hte larger context of the upper node of the ${nodeText}`;

Replace with your preferred template, e.g.:

const prompt = `Discuss content from sources about "${nodeText}"`;

Integration with Agent

When asking Agent to generate mind maps:

Request heading-only format (# ## ### ####)
No bullet points or numbered lists
Keep headings concise (3-8 words)

Then convert:

cd skills/mindmap
python main.py -i agent_output.md -o mindmap.html

Open mindmap.html in any browser for full interaction.