GitDiagram: визуализация репозиториев на GitHub с видео объяснениями
GitDiagram — инструмент для визуализации кода на GitHub с помощью интерактивных архитектурных диаграмм и коротких объясняющих видео. Замена 'hub' на 'diagram' в любом URL репозитория GitHub позволяет быстро превратить его в наглядное представление.
Проект помогает разобраться в структуре публичных и частных репозиториев. Он предлагает уникальный подход к пониманию кода: вместо привычного чтения документации или изучения файловой структуры, ты получаешь визуализацию и минутное видео, которое объясняет основные компоненты и их взаимодействия. Это может быть полезно как разработчикам, так и менеджерам проектов, которые хотят быстро ознакомиться с архитектурой приложения.
GitDiagram поддерживает работу как с публичными, так и с приватными репозиториями, но для доступа к видео на своих репозиториях нужно учитывать, что функция создания новых видео находится на ранней стадии. Запускается через веб-браузер без установки дополнительных инструментов.
GitDiagram — это инструмент, который позволяет превратить любой публичный или приватный репозиторий на GitHub в интерактивную архитектурную диаграмму. Также доступна функция создания краткого видео, в котором поясняется, как работает проект.
Основные возможности
- Создание объясняющего видео для репозитория длительностью около минуты.
- Генерация диаграммы архитектуры с помощью ИИ и потокового объяснения.
- Переход к коду, нажав на любой компонент, чтобы открыть связанный файл или директорию.
- Работа с приватными репозиториями с использованием токена GitHub.
- Экспорт диаграмм в формате PNG или копирование исходного кода Mermaid.
Запуск локально
Для локальной установки GitDiagram необходимо выполнить следующие шаги:
git clone https://github.com/ahmedkhaleel2004/gitdiagram.git
cd gitdiagram
bun install
cp .env.example .env
После этого нужно заполнить файл .env в соответствии с [руководством по настройке](docs/dev-setup.md#configure) и запустить приложение с помощью команды:
bun run dev
Приложение будет доступно по адресу http://localhost:3000.
Ограничения и требования
Для запуска GitDiagram требуется:
- Установленный Bun.
- Доступ к Cloudflare R2 и Upstash Redis.
- API-ключ OpenAI или OpenRouter.
Объясняющие видео по умолчанию отключены, чтобы их активировать, нужно изменить настройки в файле .env.
Разработка
GitDiagram разработан с использованием Next.js, React, TypeScript, Tailwind CSS и Mermaid. Для создания видео используются Claude или GPT для написания сценариев, а также OpenRouter для голосового озвучивания. Проект размещён на Vercel и открыт для вкладов, можно открывать issues или делать pull request.
Открыть на GitHub: ahmedkhaleel2004/gitdiagram →
RepoRadar