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 →

Что нового на GitHub — короткие обзоры на русском Новые обзоры приходят в Telegram. Без спама, по делу.
Подписаться

Похожие статьи

Популярные темы на сайте