# Thinking Canvas > Use when the user needs to visualize in-flight thinking — design exploration, architecture sketching, comparing approaches, mapping concepts, or any moment when showing beats describing. Creates a live, browser-based HTML/SVG canvas with instant reload. Trigger when the user says "draw", "visualize", "show me", "diagram", "canvas", "sketch", "compare visually", "画", "可视化", "图", "流程图", "架构图", "思维导图", or when a conversation grows abstract and a visual would unblock it. Also trigger proactively when brainstorming, idea-refine, or planning reaches a decision point that a visual would clarify. - Skill: `geekjourneyx/thinking-canvas` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add geekjourneyx/thinking-canvas` - Raw SKILL.md: https://api.skillmd.com/api/skills/geekjourneyx/thinking-canvas/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: geekjourneyx (https://skillmd.com/u/geekjourneyx) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/geekjourneyx/thinking-canvas --- # thinking-canvas A live, browser-based HTML/SVG canvas for visualizing thinking as it happens. Write a file, run one command, browser reloads. No ceremony, no templates — pick the visual form that serves the thinking. ## When to Use Activate when any of these apply: - User asks to visualize, draw, sketch, diagram, compare, or map something - Mid-design or mid-architecture conversation is becoming abstract - You judge that *showing* beats describing at this moment - A decision point in another skill would clarify with a visual No permission from another skill needed. No "which diagram type?" — pick and render. User corrects in plain text. ## Infrastructure Zero npm dependencies. Pure Node built-ins. ```bash node /scripts/canvas.cjs render --topic "" ``` What it does (idempotent): 1. Computes `TOPIC_DIR = $(pwd)/docs/brainstorm/` and creates it 2. Starts a detached background server if none is running (random free port, lockfile) 3. If server exists: reuses it, broadcasts reload to all open browsers 4. Prints JSON: `{"url":"http://localhost:NNNNN","port":NNNNN,"topic_dir":"/abs/path"}` Server exits automatically after 30 minutes idle. No stop command needed. ## Render Workflow Each turn that needs a canvas update: 1. **Check Node** — verify `node` is available (`node --version`); if not, tell the user and stop 2. **Read context** — scan current directory for `theme.ts`, `colors.css`, `_variables.scss`, or any brand tokens. If found, lift exact hex/px values into the HTML. If none exist, use `references/design-system.md` defaults. 3. **Decide** — choose the visual form: mindmap / dependency graph / decision tree / flowchart / state machine / sequence diagram / architecture stack / bento grid / comparison matrix / timeline / custom. When in doubt: show both a static overview *and* an animated highlight of the key insight. 4. **Write** — overwrite `$TOPIC_DIR/visual.html` with the complete HTML document (self-contained, inline CSS/JS, CDN fonts in ``) 5. **Render** — `node /scripts/canvas.cjs render --topic ` 6. **Tell** — on first render: give the URL + what visual form you chose; on subsequent: describe only what changed **HTML must be self-contained.** Inline all CSS (`