Навык для Claude и coding-агентов, который превращает короткую JSON-спецификацию в анимированные интерактивные диаграммы с экспортом в SVG, PNG, GIF или MP4.
tanishqkancharla/diffmap
Навык для AI-агентов, который помогает объяснять изменения в коде с помощью интерактивных диаграмм, где каждый элемент связан с исходным кодом.
- Звёзды
- 238
- Форки
- 9
- Открытые issues
- 1
- Последний коммит
- вчера
Что это?
diffmap помогает разработчикам проверять код, написанный AI-агентами. Агент создает спецификацию в Markdown с интерактивными диаграммами Mermaid, анимированными диаграммами сервисов, которые можно пошагово просматривать, а также сравнениями диаграмм и стеков вызовов. Каждый элемент диаграммы связан с соответствующим файлом, символом или коммитом: ревьюер может перейти от блока или линии на схеме к связанному с ними коду.
Спецификации отображаются в локальном просмотрщике, который запускается командой npx. В нем также есть панель Diff, встроенные комментарии, которые можно скопировать для агента в виде списка Markdown, и поддержка карточек коммитов со списком файлов для проверки по порядку. Спецификациями также можно делиться в виде непубличных GitHub gist и открывать их на diffmap.dev. Проект представляет собой пакет TypeScript с библиотечным API для разбора собственного формата Markdown.
Ключевые возможности
- 01Создает интерактивные диаграммы Mermaid и анимированные диаграммы сервисов на основе спецификаций, написанных агентом.
- 02Показывает различия в диаграммах и стеках вызовов, отмечая элементы, которые есть только в текущей или предлагаемой версии.
- 03Связывает узлы диаграмм, строки стека вызовов и упоминания в тексте с исходными файлами, символами или коммитами.
- 04Предоставляет локальный просмотрщик с панелью Diff и встроенными комментариями, которые можно скопировать для агента.
- 05Позволяет делиться спецификациями в виде непубличных GitHub gist, доступных для просмотра на diffmap.dev.
Сценарии использования
- Проверка крупных изменений, созданных AI-агентом, перед слиянием.
- Объяснение коллеге потока запросов или изменений состояния в функциональной ветке.
- Добавление построчных комментариев к diff агента и отправка их ему в виде нумерованного списка.
- Обмен с командой ссылкой на понятное объяснение pull request, которое можно проверить.
Быстрый старт
- 1
Чтобы попробовать, вставьте промпт diffmap в своего агента в репозитории с изменениями
- 2
Установите скилл generate-diffmap
npx skills add tanishqkancharla/diffmap --skill generate-diffmap - 3
Запустите локальный просмотрщик для файла spec
npx @tanishqkancharla/diffmap serve path/to/file.md
Что важно знать
- Общий доступ к spec по ссылке находится на экспериментальной стадии и требует входа в gh CLI.
- Просмотрщики, размещённые на Gist, загружают Gist в браузере с api.github.com.
В подборках
Темы
Частые вопросы
- Что такое diffmap?
- Навык для AI-агентов, который помогает объяснять изменения в коде с помощью интерактивных диаграмм, где каждый элемент связан с исходным кодом. diffmap помогает разработчикам проверять код, написанный AI-агентами. Агент создает спецификацию в Markdown с интерактивными диаграммами Mermaid, анимированными диаграммами сервисов, которые можно пошагово просматривать, а также сравнениями диаграмм и стеков вызовов. Каждый элемент диаграммы связан с соответствующим файлом, символом или коммитом: ревьюер может перейти от блока или линии на схеме к связанному с ними коду.
- diffmap можно использовать бесплатно? Какая у него лицензия?
- diffmap распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
- diffmap всё ещё поддерживается?
- Активно поддерживается. Последний коммит в diffmap — 6 нояб. 2026 г..
- Для чего можно использовать diffmap?
- Проверка крупных изменений, созданных AI-агентом, перед слиянием. Объяснение коллеге потока запросов или изменений состояния в функциональной ветке. Добавление построчных комментариев к diff агента и отправка их ему в виде нумерованного списка. Обмен с командой ссылкой на понятное объяснение pull request, которое можно проверить.
- Как установить diffmap?
- Чтобы попробовать, вставьте промпт diffmap в своего агента в репозитории с изменениями Установите скилл generate-diffmap: npx skills add tanishqkancharla/diffmap --skill generate-diffmap Запустите локальный просмотрщик для файла spec: npx @tanishqkancharla/diffmap serve path/to/file.md
- Где скачать diffmap?
- Исходный код и инструкции по установке — на GitHub: https://github.com/tanishqkancharla/diffmap
Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.
Похожие проекты
Небольшой синхронный рендерер, преобразующий текст диаграмм Mermaid в SVG без runtime-зависимостей.
Навык для AI-агентов, который оформляет диаграммы, обзоры diff, планы и таблицы в виде HTML-страниц вместо ASCII-графики.
Мод для Claude Code, который выводит Mermaid-диаграммы, графики, таблицы и код цветными, предлагает 16 тем и кнопки копирования в терминале.
Единый HTTP API для преобразования текстовых описаний диаграмм, например PlantUML, Mermaid, D2 и GraphViz, в SVG, PNG и другие изображения.
Приложение для строки меню на Electron: AI-агенты для программирования могут показывать диаграммы и превью, а вы — аннотировать и утверждать их прямо на экране.