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:

1. Request heading-only format (# ## ### ####)
2. No bullet points or numbered lists
3. 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.