一个Claude Code技能，可以把分层式Markdown变成互动式SVG思维导图，markmap.js——默认是可读的白底暗底，支持按等级展开，搜索能筛选出匹配及其祖先和后代（这样点击总是在上下文中显示，而不是单独浮动）。独立运行或嵌入Streamlit中都能使用。

** ▶ 现场演示** — 一个实际生成的地图，在你的浏览器中：平移、缩放、折叠分支、导出SVG/PNG。页面是一个独立的HTML文件，正是技能生成的。

试着一句话说

无需安装——将此内容粘贴到Claude（Claude代码或应用）中：

利用这项技能https://github.com/Jaderson-bit/mindmap-markmap-viewer,，创建产品管理的思维导图。

Claude 会实时克隆该技能，遵循其创作规则（平衡分支、简短标签），并反馈一个可离线打开的交互式 .html 以及可编辑的 .md 真实源。将“产品管理”替换为任何你想要映射的内容。

为什么会有这样的存在

markmap 将 Markdown 轮廓渲染为可放大的思维导图，但有三点需要在上面加一层才能真正使用：

mindmap-markmap-viewer

A Claude Code skill that turns hierarchical Markdown into an interactive SVG mind map with markmap.js — readable white-on-dark by default, with expand-by-level control and a search that filters the tree to matches plus their ancestors and descendants (so a hit always shows up in context, not floating alone). Works standalone or embedded in Streamlit.

▶ Live demo — an actual generated map, in your browser: pan, zoom, fold branches, export SVG/PNG. The page is one self-contained HTML file, exactly what the skill produces.

Try it in one line

No install needed — paste this into Claude (Claude Code or the app):

Using this skill https://github.com/Jaderson-bit/mindmap-markmap-viewer, create a mindmap of Product Management.

Claude clones the skill on the fly, follows its authoring rules (balanced branches, short labels), and hands back an interactive .html that opens offline plus the editable .md source of truth. Swap “Product Management” for anything you want mapped.

Why this exists

markmap renders a Markdown outline as a zoomable mind map, but three things need a layer on top to be genuinely usable:

• Visibility — a white font is invisible on the white default surface; the renderer paints its own dark backdrop so the map is readable everywhere, not just in a dark host.
• Expand control — collapse to N levels or expand everything, without rebuilding the map.
• Search that keeps context — filtering to just the matching nodes loses the path that explains where a hit lives; this keeps ancestors and the matched subtree.

Features

• One call to a single self-contained HTML file (build_html / write_mindmap) — the markmap stack (vendored locally and pinned exact) is inlined into the page, so the one .html opens offline anywhere with no CDN, no network, and no sibling files to keep alongside it.
• Built-in navigation toolbar: zoom in/out, fit-to-window, expand-all / collapse-all, and export to SVG / PNG (2× raster, current fold state).
• Expand-by-level (set_expand_level), including expand-all (-1).
• Accent-insensitive, context-preserving search (filter_markmap).
• HTML-safe: ``, & in node text (List, a < b) round-trip correctly instead of breaking the page.
• Zero runtime dependencies for the core — Python standard library only. Streamlit is an optional import, used only when you embed.

Install

Ask Claude Code to install it from this repo:

Install this skill from https://github.com/Jaderson-bit/mindmap-markmap-viewer

Or, as a developer, clone it into your skills directory: