Repolode
tanishqkancharla

tanishqkancharla/diffmap

An agent skill that has coding agents explain their code changes as interactive diagrams, with each part linked to its source.

Stars
238
Forks
9
Open issues
1
Last commit
yesterday

What is it?

diffmap helps developers review code written by coding agents. The agent writes a spec in markdown that includes interactive Mermaid diagrams, animated service diagrams that can be stepped through, and diffs of diagrams and call stacks. Each element of a diagram links back to the relevant file, symbol, or commit, so a reviewer can jump from a box or line in the picture to the code behind it.

Specs are rendered by a local viewer started with npx, which also includes a Diff panel, inline comments that can be copied as a Markdown list for an agent, and support for commit cards that list files to review in order. Specs can also be shared as unlisted GitHub gists and opened on diffmap.dev. The project is a TypeScript package with a library API for parsing its markdown format.

Key features

  • 01Generates interactive Mermaid and animated service diagrams from agent-written specs.
  • 02Shows diagram and call stack diffs, marking what exists only in the current or the proposed version.
  • 03Links diagram nodes, call stack rows, and prose references to source files, symbols, or commits.
  • 04Provides a local viewer with a Diff panel and inline comments that can be copied for an agent.
  • 05Shares specs as unlisted GitHub gists viewable on diffmap.dev.

Use cases

  • Reviewing a large change that a coding agent produced before merging it.
  • Walking a teammate through the request flow or state changes in a feature branch.
  • Leaving line-level comments on an agent's diff and sending them back as a numbered list.
  • Sharing a reviewable explanation of a pull request with a team via a link.

Quick start

  1. 1

    Try it by pasting the diffmap prompt into your agent in a repo with changes

  2. 2

    Install the generate-diffmap skill

    npx skills add tanishqkancharla/diffmap --skill generate-diffmap
  3. 3

    Run the local viewer on a spec file

    npx @tanishqkancharla/diffmap serve path/to/file.md

Things to know

  • Sharing a spec as a link is experimental and requires the gh CLI to be logged in.
  • Gist-hosted viewers fetch the gist in the browser from api.github.com.

In collections

Topics

FAQ

What is diffmap?
An agent skill that has coding agents explain their code changes as interactive diagrams, with each part linked to its source. diffmap helps developers review code written by coding agents. The agent writes a spec in markdown that includes interactive Mermaid diagrams, animated service diagrams that can be stepped through, and diffs of diagrams and call stacks. Each element of a diagram links back to the relevant file, symbol, or commit, so a reviewer can jump from a box or line in the picture to the code behind it.
Is diffmap free to use? What license does it have?
diffmap is open source under the MIT license. Check the license terms before using it in commercial products.
Is diffmap still maintained?
Actively maintained. The last commit to diffmap was on Nov 6, 2026.
What can I use diffmap for?
Reviewing a large change that a coding agent produced before merging it. Walking a teammate through the request flow or state changes in a feature branch. Leaving line-level comments on an agent's diff and sending them back as a numbered list. Sharing a reviewable explanation of a pull request with a team via a link.
How do I install diffmap?
Try it by pasting the diffmap prompt into your agent in a repo with changes Install the generate-diffmap skill: npx skills add tanishqkancharla/diffmap --skill generate-diffmap Run the local viewer on a spec file: npx @tanishqkancharla/diffmap serve path/to/file.md
Where can I get diffmap?
The source code and installation instructions are on GitHub: https://github.com/tanishqkancharla/diffmap

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects