Skip to content

Quick Start

Jump to bottom
Jaderson Vargas edited this page Jun 8, 2026 · 1 revision

Quick Start

From zero to an interactive mind map in three steps — all from a chat with Claude Code. No setup beyond installing the skill.

1. Install the skill via chat

Just ask Claude Code to install it from the repo:

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

Claude clones it into ~/.claude/skills/mindmap-markmap-viewer. It's picked up on the next session (or restart Claude Code now).

Installing the skill from a chat prompt

💡 Prefer the command line? git clone https://github.com/Jaderson-bit/mindmap-markmap-viewer.git ~/.claude/skills/mindmap-markmap-viewer

2. Ask for a mind map

Paste an outline (headings + nested bullets) and ask for a mind map. Claude applies sensible markmap presets and writes a portable, offline bundle:

Asking Claude to turn an outline into a mind map

Under the hood it calls the skill's helpers — apply_presets to fill the frontmatter (colorFreezeLevel, initialExpandLevel, maxWidth) without overriding anything you set, then write_mindmap to emit three things next to each other:

File What it is
roadmap.md the editable source of truth (plain Markdown)
roadmap.html the render (open this)
vendor/ d3 + markmap, copied in so the map opens offline

To change the map, edit the .md and re-run — the HTML carries no content of its own.

3. Open the result

Open the .html. You get a white-on-dark interactive map with a toolbar in the bottom-right:

The rendered interactive mind map with its toolbar

The toolbar, left to right: zoom in / out, fit to screen, expand all, collapse all, download SVG, download PNG. Click any node to fold/unfold its branch. Exports snapshot the current fold state.

🔌 Offline by default. The map loads its libraries from the sibling vendor/ folder — no CDN, no network request. Keep the .html and vendor/ together when you move or share it.

Tips for good maps

A mind map is a glance tool, so shape the outline to stay scannable:

  • 5–8 main branches off the root — group related ideas rather than spilling past 8.
  • 3–6 children per branch, kept roughly even — lopsided branches read as unfinished.
  • Labels of 1–3 words — a node is a handle, not a sentence. Put the explanation on a child node (- Term → - what it means), not inline.
  • Balanced depth — avoid one branch tunneling deep while others stay shallow.
  • Let apply_presets set the frontmatter so you don't hand-tune each map.

Search keeps context: type a term and the map filters to matching nodes plus their ancestors and their whole subtree, so a hit never floats alone. Matching ignores accents and case.

Clone this wiki locally