Markmap.js와 interactive SVG mind map에 hierarchical Markdown을 턴하는 Claude Code 기술 - 기본으로 읽기 쉬운 white-on-dark를 사용하여 트리를 필터링하고, 트리를 필터링하는 검색 ** (그래서 항상 컨텍스트에서 표시되지 않음). 작업 독립 또는 Streamlit에 내장.

▶ 라이브 데모 — 실제 생성된 지도, 브라우저: 팬, 줌, 겹 지점, SVG/PNG. 이 페이지는 HTML 파일 중 하나이며, 정확하게 기술이 생성되는 것입니다.

한 줄에서 시도

설치 필요 없음 — Claude (Claude Code 또는 앱)로 붙여 넣기:

이 기술을 사용하여 https://github.com/Jaderson-bit/mindmap-markmap-viewer, 제품 관리의 마음을 만듭니다.

클로드는 비행에 대한 기술을 복제, 그것의 허가 규칙 (균형 분지, 짧은 상표)을 따르고, 상호 작용하는 .html를 다시 수동으로 열고 편집 가능한 .md 진실의 소스. mapped를 원하는 것에 대한 "Product Management"를 교환하십시오.

왜 이 존재

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: