| name | Markmap |
| description | A comprehensive skill for Markmap - rendering Markdown as interactive mindmaps. |
Markmap Skill
This skill provides comprehensive details and patterns for using Markmap to generate interactive, hierarchical mindmaps from Markdown.
Installation
CLI Usage
To install globally:
npm install -g markmap-cli
Or via npx:
npx markmap-cli <input.md>
Useful CLI commands:
- Generate HTML:
markmap input.md
- Watch Mode (auto-updates browser):
markmap -w input.md
- Disable Toolbar:
markmap input.md --no-toolbar
- Specific Output:
markmap input.md -o output.html
Programmatic Integration
Install core packages:
npm install markmap-lib markmap-view
You can convert markdown into data using markmap-lib and render it with markmap-view. React and Vue support is also available via ecosystem modules.
Markdown Syntax
Markmap uses standard Markdown structure to build tree nodes:
- Headings (
#, ##, ###): Define the nodes. Top-level heading becomes the root. Subheadings define branches.
- Lists (
-, *, 1.): Can be used instead of or alongside headings for branching beyond the 6-level limit of headings.
- Text Styles: Standard formatting (bold, italics, strikethrough).
- Links: Standard Markdown links.
- Code Blocks & Inline Code: Great for technical context. Some environments allow setting attributes on code blocks, e.g.,
{scale=1.1 color=#888}.
- Math: LaTeX/KaTeX is supported via inline math
$...$ or block math $$...$$.
Configuration (jsonOptions)
You can customize the mindmap by providing a frontmatter block in your markdown with the markmap key:
---
markmap:
colorFreezeLevel: 2
lineWidth: 2
initialExpandLevel: 2
maxWidth: 300
---
These properties let you define:
colorFreezeLevel: The depth at which branch colors stop alternating.
initialExpandLevel: The depth of nodes expanded by default.
lineWidth: Thickness of the branch lines.
maxWidth: Maximum width of a node before it wraps text.
Best Practices & Known Limitations
- Frontmatter: When using jsonOptions, ensure it's valid YAML inside the
--- block at the very top of the .md file.
- Root Nodes: Ideally, use a single
# Root Node to ensure all children branch out properly. Multiple # tags might be interpreted as multiple roots depending on the renderer.
- Interactive Viewing: The output HTML provides an interactive SVG with zooming (mouse wheel), panning (drag), and node expanding/collapsing (clicking the circles).
- Portability: JSON options are preferred for portable configuration as they are fully serializable, whereas programmatic JS options might require passing functions.