ClipMind
Workspace
Contact UsIf you have any questions, feel free to reach out at neo@clipmind.tech.

Claude Code Skill

Render mindmap, flowchart, architecture, and sequence diagrams directly from Claude Code. Claude picks the right type, writes the structured source, calls the API in raw mode, and drops the PNG next to your prompt — no manual curl, no tokens pasted into chat.

What it does

Ask Claude to "turn these ideas into a diagram" in any Claude Code session. The skill decides which of the four diagram types fits best, authors the structured source (markdown for mindmap, Mermaid for flowchart + sequence, IArchData JSON for architecture), calls the matching /public/<type>/image endpoint, and returns the image path. Raw mode means Claude owns the structure, so results are fast, cheap, and deterministic.

One install, four diagram types. Same auth token. Same skill triggers all of them.

Install

Download SKILL.md and scripts/render.sh into ~/.claude/skills/clipmind/, then set two environment variables. The render.sh script dispatches on --type to the right /public/<type>/image endpoint.

Setupbash
BASH
mkdir -p ~/.claude/skills/clipmind/scripts
curl -fsSL https://static.clipmind.tech/skills/clipmind/SKILL.md \
  -o ~/.claude/skills/clipmind/SKILL.md
curl -fsSL https://static.clipmind.tech/skills/clipmind/scripts/render.sh \
  -o ~/.claude/skills/clipmind/scripts/render.sh
chmod +x ~/.claude/skills/clipmind/scripts/render.sh

# then, one-time auth
export CLIPMIND_API_TOKEN='<paste the token from the API Docs page>'
export CLIPMIND_API_URL_BASE='https://api.clipmind.tech/public'

Usage

Once installed, any Claude Code session can trigger the skill. The skill picks the diagram type based on your prompt — explicit cues like "draw a flowchart" win; otherwise it routes by content shape (process → flowchart, system → architecture, interaction → sequence, anything else → mindmap).

Prompt examplestext
TEXT
# in any Claude Code session, ask for whichever diagram fits:
> turn these notes into a mindmap:
>   - launch plan
>   - weeks 1-2: research
>   - weeks 3-4: design
>   - week 5: ship

> draw a flowchart for the JWT refresh token lifecycle

> show the architecture of a typical e-commerce backend
> with orders, catalog, payments, and a message queue

> sequence diagram for OAuth 2.0 authorization code flow

# Claude picks the type, authors the structured source
# (markdown / Mermaid / IArchData JSON), calls the matching
# /public/<type>/image endpoint in raw mode, and drops the
# PNG next to your prompt.

If you want to call the script directly (Claude does this for you under the hood):

render.sh shapebash
BASH
# direct invocation (Claude does this for you, but here's the shape):
echo '# Photosynthesis
- Light reactions
- Calvin cycle' | ./scripts/render.sh --type mindmap --raw --out tree.png

cat <<'EOF' | ./scripts/render.sh --type flowchart --raw --out merge-sort.png
flowchart TD
  Start([Start]) --> Split{Length <= 1?}
  Split -->|Yes| Return([Return])
  Split -->|No| Recurse[Split + recurse]
  Recurse --> Merge[Merge halves]
  Merge --> Return
EOF

cat ecommerce.json | ./scripts/render.sh --type architecture --raw --out arch.png

cat <<'EOF' | ./scripts/render.sh --type sequence --raw --out oauth.png
sequenceDiagram
  participant User
  participant App
  participant Auth
  User->>App: Click login
  App->>Auth: GET /authorize
  Auth-->>App: code
  App->>Auth: POST /token
  Auth-->>App: access_token
EOF

Diagram types

Four types are routed through one --type flag. Pick the one that matches your content; the skill’s default heuristics handle ambiguous prompts.

--typeRaw source formatEndpointWhen to use
mindmapmarkdown/public/mindmaps/imageHierarchy, summarization, "outline this article", topic breakdowns.
flowchartflowchart TD Mermaid/public/flowcharts/imageProcess with branches, decision trees, algorithm flow, "how does X work".
architectureIArchData {title, nodes, edges}/public/architectures/imageSystem design, service topology, C4 diagrams, "explain this codebase".
sequencesequenceDiagram Mermaid/public/sequences/imageTemporal order of interactions, API calls, protocol handshakes, OAuth flows.

All four accept the same theme tokens for the handdrawn family: classical, handdrawn, handdrawn-soft, handdrawn-sketch. The full layout / layoutTheme / theme tables below apply to mindmap only.

Mindmap presets

For mindmap specifically, the skill picks a sensible theme + layout per content type. Flowchart, architecture, and sequence use only the four shared handdrawn theme tokens (see above) — no separate layout / layoutTheme dimensions.

FeelthemelayoutlayoutTheme
Clean / defaultirismindmapmindmap-modern
Business / org chartslateorgorg-corporate
Decision / logicmidnight-bluelogiclogic-minimal
Timeline / roadmapemeraldtimelinetimeline-axis
Dark backgrounddark-oceanmindmapmindmap-creative

Mindmap option reference

Mindmap-specific tokens for layout / layoutTheme / theme. Flowchart, architecture, and sequence are layout-free; their only theme tokens are the four shared handdrawn variants. Full reference for every endpoint is in the API docs.

options.layout

valueshape
mindmapRadial; branches fan out left/right from a root.
logicLeft-to-right hierarchy; decision and argument trees.
orgTop-down org chart; reporting lines.
treeTop-down tree with trunk / branch metaphor.
timelineHorizontal chronological axis.

options.layoutTheme

Only pair a layoutTheme with its own layout. Omit to get a sensible default.

layoutvalid layoutTheme values
mindmapmindmap-creative, mindmap-underline, mindmap-modern, mindmap-organic
logiclogic-underline, logic-underline-stack, logic-minimal, logic-minimal-circle, logic-modern
orgorg-corporate, org-modern
treetree-trunk, tree-structure
timelinetimeline-minimal, timeline-axis, timeline-horizontal

options.theme

28 light themes plus a dark- prefixed variant for each (56 total).

groupvalues
Lightiris, neon, amethyst, sunset, ocean, forest, cherry-blossom, volcano, hermes-orange, tiffany-blue, rainbow, premium-black, rose-gold, deep-sea, lavender, champagne, midnight-blue, emerald, china-red, french-flag, german-flag, american-flag, japanese-flag, rose, slate, gold, cyan, indigo
Darkdark-iris, dark-neon, dark-amethyst, dark-sunset, dark-ocean, dark-forest, dark-cherry-blossom, dark-volcano, dark-hermes-orange, dark-tiffany-blue, dark-rainbow, dark-premium-black, dark-rose-gold, dark-deep-sea, dark-lavender, dark-champagne, dark-midnight-blue, dark-emerald, dark-china-red, dark-french-flag, dark-german-flag, dark-american-flag, dark-japanese-flag, dark-rose, dark-slate, dark-gold, dark-cyan, dark-indigo