serenakeyitan/open-exam-skills/mindmap

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

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.