# Markmap Markmap is an open-source tool that transforms Markdown content into interactive mind maps. It parses the hierarchical structure of Markdown headings and lists and renders them as navigable, zoomable SVG mind maps. The name is a combination of "Markdown" and "mindmap". ## How It Works Markmap uses the natural hierarchy of Markdown (headings, nested lists, etc.) as input and generates an interactive mind map visualization: - **H1** becomes the central node - **H2, H3, ...** become progressively deeper branches - **Nested lists** expand into sub-branches - Supports Markdown features like **bold**, *italic*, `code`, links, images, and even LaTeX math and code blocks with syntax highlighting The rendering is SVG-based, producing smooth, interactive visualizations where branches can be collapsed/expanded and the map can be zoomed and panned. ## Architecture Markmap is composed of several packages: - **markmap-lib**: The core transformer that parses Markdown into a structured tree of nodes. Supports a plugin system for extensibility (frontmatter, math, syntax highlighting, etc.) - **markmap-view**: The rendering engine that takes the structured data and produces interactive SVG mind maps - **markmap-render**: Generates standalone HTML files containing the mind map - **markmap-cli**: Command-line interface for converting Markdown files to interactive HTML mind maps - **markmap-autoloader**: A script that can be included in any HTML page to automatically render Markdown code blocks as mind maps ## Where to Use Markmap - **Web**: Try it directly at markmap.js.org/repl - **VS Code**: The markmap-vscode extension lets you preview Markdown files as mind maps directly in the editor - **Vim / Neovim**: Available via coc-markmap (with coc.nvim) or markmap.nvim - **Emacs**: Available via eaf-markmap - **Obsidian**: The [[Mindmap plugin for Obsidian]] uses Markmap under the hood to render Markdown notes as mind maps - **Programmatic**: Embeddable in React, Vue, or plain HTML via npm packages - **CLI**: Convert Markdown files to HTML mind maps from the command line ## Technical Details - Built with TypeScript (96.7% of the codebase) - Renders to interactive SVG - Licensed under MIT - Inspired by dundalek's original markmap project - ~12.4k GitHub stars ## References - https://markmap.js.org - https://github.com/markmap/markmap - https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode ## Related - [[Mind Maps]] - [[Mindmap plugin for Obsidian]] - [[Visual thinking]] - [[Obsidian Canvas]]