GitDiagram: Visualisierung der Struktur von GitHub-Code-Repositories und Umwandlung von Code-Repositories in interaktive Systemarchitekturdiagramme.

GitDiagram是一款创新的GitHub代码库可视化工具，能够将任何GitHub仓库快速转换为交互式系统架构图。它采用先进的AI技术（Claude 3.5 Sonnet），为开发者提供了一种全新的代码库浏览和理解方式。用户只需将GitHub URL中的”hub”替换为”diagram”，即可立即生成对应仓库的可视化图表。该工具不仅支持即时可视化转换，还提供了强大的交互功能，允许用户直接点击图表组件来导航至源代码文件和相关目录，大大提升了代码库的可读性和可理解性。GitDiagram采用现代化技术栈开发，包括Next.js、FastAPI和PostgreSQL等，确保了工具的高性能和可靠性。

Erfahrung: https://gitdiagram.com/

Funktionsliste

• Sofortige visuelle Konvertierung: schnelle Konvertierung der GitHub-Repository-Struktur in Systemdesign-/Architekturdiagramme
• Intelligente interaktive Navigation: unterstützt den direkten Zugriff auf Quelldateien und Verzeichnisse durch Anklicken von Diagrammkomponenten
• KI-gesteuerte Generierung: Gewährleistung von Geschwindigkeit und Genauigkeit bei der Diagrammerstellung mit Claude 3.5 Sonnet
• Anpassung: Unterstützung für die Änderung und Neuerstellung von Diagrammen gemäß den Anweisungen des Benutzers
• URL快捷访问：通过替换GitHub URL中的”hub”为”diagram”即可使用
• Vollständige API-Unterstützung: Bereitstellung einer öffentlichen API-Schnittstelle für die Integration (in Entwicklung)
• Echtzeit-Updates: Unterstützung von visuellen Echtzeit-Updates von Änderungen an der Struktur der Codebasis
• Benutzerdefinierte Bereitstellung: vollständige, selbst gehostete Bereitstellungslösung verfügbar

Hilfe verwenden

Grundlegendes Nutzungsverfahren

• Geben Sie die URL des GitHub-Repositorys ein oder verwenden Sie direkt die URL-Konvertierungsmethode
• Warten auf die automatische Erstellung eines interaktiven Architekturdiagramms durch das System
• Klicken Sie auf eine Komponente im Diagramm, um direkt zur entsprechenden Quellcodedatei zu navigieren.

Beschreibung der Verwendungsbeschränkungen

Die aktuelle kostenlose Version unterliegt den folgenden Nutzungsbeschränkungen:

• Begrenzung auf 1 Diagrammerstellungsanfrage pro Minute
• Begrenzung auf 5 Diagrammerstellungsanfragen pro Tag
• Optionales Programm zur Selbstständigkeit, wenn Sie sich aus den Zwängen befreien wollen

Leitfaden für die selbst gehostete Bereitstellung

1. Vorbereitung der Umwelt

   git clone https://github.com/ahmedkhaleel2004/gitdiagram.git
   cd gitdiagram
   pnpm i
   

2. Umgebungsvariablen konfigurieren
   • .env.example nach .env kopieren
   • Konfigurieren der Anthropic API-Schlüssel
   • Optionale Konfiguration von persönlichen GitHub-Zugangs-Tokens
3. Starten Sie den Backend-Dienst

   docker-compose up --build -d
   

   • Der Back-End-Dienst wird unter localhost:8000 ausgeführt.
   • Anzeigen von Protokollen mit docker-compose logs -f
4. Datenbank-Einstellungen

   chmod +x start-database.sh
   ./start-database.sh
   pnpm db:push
   

   • Die Datenbank wird unter localhost:5432 ausgeführt.
   • Mit pnpm db:studio können Sie Datenbanken einsehen und verwalten
5. Starten von Front-End-Diensten

   pnpm dev
   

   • Besuchen Sie localhost:3000, um die lokal installierte Version zu verwenden

Erweiterte Funktion Verwendung

1. Benutzerdefinierte Befehle
   • Die Diagrammerstellung kann durch die Eingabe von benutzerdefinierten Befehlen über die Schnittstelle geändert werden.
   • Unterstützung bei der Anpassung an die Visualisierungsanforderungen einer bestimmten Codebasisstruktur
2. API-Einbindung
   • Öffentliche APIs, die derzeit entwickelt werden, werden die Integration von Systemen Dritter unterstützen.
   • Codebase-Visualisierung, die über APIs automatisiert werden kann

Tipps und Tricks

1. Für große Lagerhäuser
   • Es wird empfohlen, sich zunächst auf die Struktur der Hauptmodule zu konzentrieren
   • Schritt-für-Schritt-Drilldown zu Details mit interaktiver Navigation
2. Leistungsoptimierung
   • Die Verwendung einer selbst gehosteten Lösung kann die Standardbeschränkungen aufheben
   • Erwägen Sie die Verwendung Ihres eigenen Anthropic-API-Schlüssels für eine bessere Leistung