Markmap — Turn Markdown into Interactive Mindmaps

Introduction

Markmap converts standard Markdown headings and lists into interactive, collapsible mindmap diagrams. It reuses documentation you already have — no special syntax or GUI needed — and renders zoomable SVG mindmaps that work in browsers, VS Code, and static sites.

What Markmap Does

• Parses Markdown heading hierarchy into a tree structure for mindmap rendering
• Renders interactive SVG mindmaps with pan, zoom, and collapse/expand controls
• Supports inline code, links, images, LaTeX math, and checkbox items in nodes
• Provides a CLI that converts .md files to standalone HTML mindmap pages
• Offers a VS Code extension for live mindmap preview alongside Markdown editing

Architecture Overview

Markmap consists of three packages: markmap-lib parses Markdown into a tree using remark, markmap-view renders the tree as an SVG using D3.js with a radial-tree layout, and markmap-cli wraps both into a command-line tool that outputs self-contained HTML files. The rendering engine handles dynamic node sizing, animated transitions, and lazy loading of large trees.

Self-Hosting & Configuration

• Install the CLI globally: npm install -g markmap-cli
• Generate an HTML mindmap: markmap notes.md -o output.html
• Use the VS Code extension "Markmap" for live preview in the editor sidebar
• Embed in web pages by importing markmap-view and calling Markmap.create(svg, options, data)
• Customize colors, max width, and collapse depth via options in the API or front-matter

Key Features

• Zero-syntax migration: works with any existing Markdown file
• Interactive SVG output with smooth pan, zoom, and node toggling
• Supports rich content in nodes including code blocks, math, and images
• VS Code extension with split-pane live preview
• Front-matter configuration for per-file color schemes and layout options

Comparison with Similar Tools

• Mermaid mindmap — Mermaid supports mindmaps but with custom syntax; Markmap uses plain Markdown
• XMind — desktop GUI mindmap application; Markmap is code-first and free
• MindNode — macOS/iOS GUI tool; Markmap runs in the browser and integrates with dev workflows
• D3.js tree layout — low-level library; Markmap provides a complete Markdown-to-mindmap pipeline
• Obsidian Canvas — visual note linking inside Obsidian; Markmap generates shareable standalone SVGs

FAQ

Q: Does Markmap require a special Markdown syntax? A: No. It uses standard Markdown headings and lists. Any .md file works as input.

Q: Can I embed a Markmap in a static site? A: Yes. Import the markmap-view library and render to an SVG element, or use the CLI to generate standalone HTML files.

Q: Does it support LaTeX math? A: Yes. Inline $...$ and block $$...$$ math expressions render correctly in mindmap nodes via KaTeX.

Q: How large can the mindmap be? A: Markmap handles documents with hundreds of headings. Large trees are collapsed by default with configurable initial depth.

Sources

• https://github.com/markmap/markmap
• https://markmap.js.org