# Markmap — Turn Markdown into Interactive Mindmaps

> A JavaScript library and CLI that transforms Markdown documents into interactive, zoomable mindmap visualizations rendered as SVG in the browser.

## Install

Save in your project root:

# Markmap — Turn Markdown into Interactive Mindmaps

## Quick Use
```bash
npm install -g markmap-cli
# Convert a markdown file to an interactive HTML mindmap
markmap README.md
# Or use npx without installing
npx markmap-cli your-notes.md
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-3af2cf7a
Author: AI Open Source