flow-map for Claude Code: a skill that keeps dated versions of your flow diagrams

flow-map is a skill that draws business and content flows as HTML diagrams and keeps a dated version of each one. It is a single skill with no public repository, so this post covers the problem it solves, who should build one, the layout to start from, and the one detail that breaks a copied version.

What problem it solves

A funnel diagram drawn once tends to be redrawn from scratch the next time someone asks about it, and the old version disappears. You lose the record of what the business looked like last quarter and why it changed. flow-map treats the diagram like versioned code. It reads the latest version, applies only the changes you agree on, and writes a new file dated today. It never overwrites an earlier dated file, and a gallery page lists every snapshot so you can compare them side by side.

It handles two flows under the same rules. The content pipeline maps topics, structure, source research, and production. The business funnel maps exposure, leads, conversion, delivery, and repeat sales. It also refuses to invent numbers: counts and distributions in the pipeline must come from an actual query script, and when the data is unavailable the diagram leaves the field blank or says so.

Who it fits

The chapter rates four situations. Three are enough to decide.

Situation	Fit	Reason
A solo founder reviewing a funnel regularly	Good fit	Preserves changes by date
Documenting a content production process	Good fit	Includes a pipeline type
Needing a presentation slide quickly	Poor fit	Slide creation is outside its scope

A single shared team diagram sits in the middle. It works, but the snapshots keep piling up.

Build it and run it

Because there is no public repository, you build the skill yourself. This is the structure the chapter gives, with the working folder name written in English.

# Example folder layout
~/.claude/skills/flow-map/
  SKILL.md
work-folder/
  framework/
    skin.css
    diagrams/content-pipeline/latest.html
    diagrams/business-funnel/latest.html
  scripts/
    build_gallery.py
    query_sources.py

Call it with the type and a summary of the changes. If you omit the type, it asks you to choose one.

Update the flow diagram for [content-pipeline] to reflect [summary of changes]

The run follows a fixed order. It confirms the type and reads the latest version, agrees on the changes with you, and writes the new dated snapshot. It then updates the latest file and the gallery, checks rendering on a temporary local server, and commits.

What trips people up

The skill folder contains only SKILL.md. The shared skin, the gallery generator, and the query script all live in your working folder, so copying the skill alone gives you a procedure that calls files you do not have. Prepare those three pieces first, and make sure the working folder is a git repository, because the last step commits.

Where this comes from

This post adapts part of chapter 01-07 of The Claude Code & Codex Skills Guidebook. The full chapter covers how to add a new diagram type and name multiple snapshots on the same day, and the cleanup rules for external fonts, the local server, and temporary screenshots, and the book has 52 more skills like this one. Read the full chapter in The Claude Code & Codex Skills Guidebook on Leanpub.