Codemap

Turns a codebase into an explorable isometric architecture diagram — a self-contained HTML artifact with blocks on a grid, a component index, a what-it-does/how-it's-built panel, and real data snippets travelling along the edges that the reader can stop and inspect. Use this whenever someone asks for a codemap by name — "create a codemap", "codemap this repo", "make a codemap of github.com/owner/name" — and equally when they want to see, map, diagram or visually explain how a system fits together: "diagram this codebase", "show me the architecture", "map how this works", "visualise the data fl

10 stars 1 forksSoftware Development

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add beadnall/codemap --skill codemap
Manual install
git clone --depth 1 https://github.com/beadnall/codemap.git /tmp/codemap
mkdir -p ~/.claude/skills
cp -r /tmp/codemap/. ~/.claude/skills/codemap

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Codemap

A diagram of a system that someone can actually explore: isometric blocks on a
grid, an index of components down the left, an explanatory panel on the right,
and the system's own data moving along the edges as dots you can stop and read.

The point is not decoration. A map like this earns its place when it answers
questions faster than reading the source would — which means it lives or dies on
the **facts you put in it**, not on the rendering. A diagram of boxes labelled
"Service", "Database" and "API" tells a reader nothing they could not have
guessed, and takes an afternoon to produce. Budget your effort accordingly: most
of it goes into mining the repository, and very little into drawing.

## The shape of the work

1. Mine the repository for facts.
2. Choose the nodes and the edges.
3. Copy `assets/template.html`, replace four arrays.
4. Verify it, since you cannot see it.
5. Publish as an artifact.

## 1. Mine the repository for facts

Do this before you think about layout. You are looking for the things a reader
could not get from the file listing:

- **Measured numbers.** Anything the project established by running rather than
  by assuming — throughput, hit rates, limits, counts. `git log`, test files and
  long code comments are where these hide.
- **Failures and their causes.** Comments explaining why something is the way it
  is, commits that say "fix", constants with a paragraph above them. A constant
Read the full skill on GitHub

Details

Skill name
codemap
License
MIT
Repo updated
16 August 2026

FAQ

What does the Codemap skill do?

Turns a codebase into an explorable isometric architecture diagram — a self-contained HTML artifact with blocks on a grid, a component index, a what-it-does/how-it's-built panel, and real data snippets travelling along the edges that the reader can stop and inspect. Use this whenever someone asks for a codemap by name — "create a codemap", "codemap this repo", "make a codemap of github.com/owner/name" — and equally when they want to see, map, diagram or visually explain how a system fits together: "diagram this codebase", "show me the architecture", "map how this works", "visualise the data fl

How do I install the Codemap skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add beadnall/codemap --skill codemap. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Codemap popular?

It lives in beadnall/codemap, which has 10 GitHub stars and 1 forks.

Related skills

Driving Seat

10

Tanmay-Ts/driving-seat

Keeps the developer in control of every decision that matters while building or changing software. Turns vague goals into measurable intent, maps decisions up front, asks before any significant choice the spec doesn't cover, logs every choice made without asking, and checks that the developer understands decisions instead of delegating them. Use this skill whenever the user says "keep me in the driving seat", "ask before you decide", "don't make decisions for me", "I want to own the decisions", or invokes /driving-seat, and whenever they are building, changing, or fixing a production system an

Software Development

Ahrefs Domain Rating Free

9

AIGC-Hackers/ahrefs-domain-rating-free-skill

Use when checking Ahrefs Domain Rating, DR, website authority, domain authority, backlink profile strength, or free Ahrefs public API data for a domain or URL without an API key.

Software Development

Saudi Regulatory Compliance

9

ibnsawad/Saudi-Regulatory-Compliance-Claude-Skill

Senior cybersecurity, cloud, and data-protection compliance advisor for organisations in Saudi Arabia. Trigger for: NCA ECC-2:2024, CCC-2:2024, DCC-1:2022, CSCC-1:2019, OTCC-1:2022, TCC-1:2021, OSMACC-1:2021, CGEC-1:2019, CGESP-1:2019, NCS-1:2020; SAMA Cybersecurity/IT Governance/Business Continuity Frameworks; CST Cloud Computing Regulatory Framework, CST CRF RT08; PDPL and Implementing Regulations, Personal Data Transfer Regulation; NDMO Data Management Standards; SDAIA guidance including the AI Risk Management Framework (SDAIA-P145). Also trigger for gap assessments, audit readiness, breach

Software Development

Opencode Automator

9

alphaparkinc/genpark-skill-opencode-automator

OpenCode Automator — High-performance execution agent that utilizes dynamic code generation (Python/JS) to automate complex, multi-step workflows with mathematical precision and API reliability.

Software Development

Compliance Audit

11

oliwoodman/compliance-audit-skill

Audit a website, app, or product's codebase for GDPR and EU AI Act compliance, then hand back a ranked list of plain-English fixes. Asks the owner the handful of questions the code cannot answer, reads the actual code (forms, API routes, dependencies, env vars, database schema, policy pages) to work out what personal data the product really collects and who it is shared with, then checks that against what the law requires. It exists to catch the gaps a pasted-in policy template hides. MANDATORY TRIGGERS: 'compliance audit', 'run compliance-audit', 'audit my compliance', 'audit this for GDPR',

Software Development

Project Architecture

10

Jithnkn/project-architecture

Use this skill whenever the user wants to start a new software/app project, plan or review its architecture, or set up agent context files (AGENT.md) for a codebase. Trigger it whenever the user mentions "architecture", "project scope", "PRD", "monolith", "modular monolith", "AGENT.md", "CLAUDE.md", scaffolding a new project's folder structure, or asks how to organize/structure a codebase before or during building it — even if they don't use those exact words but describe wanting to plan out a new app, a new module, or how a codebase should be laid out. Also use it when the user is partway thr

Software Development

Browse the most popular Claude skills, all software development skills, or write your own with the skills generator.