Skip to main content

​
Was ist Diagram Forge?

Diagram Forge analysiert jedes GitHub-Repository mit Claude AI und generiert ein interaktives, animiertes Architekturdiagramm — komplett mit offiziellen Tech-Logos, animierten Partikelflüssen, Node-Inspektor und Export nach SVG/PNG/Markdown. Die Zahlung erfolgt über das Lightning Network mittels des L402-Protokolls — keine Konten, keine Kreditkarten, keine Abonnements. Bezahlen Sie pro Analyse.
Diagram Forge interactive viewer demo

​
Erste Schritte

​
Option 1 — Web-App (am schnellsten)

  1. Gehen Sie zu forge.l402kit.com
  2. Fügen Sie eine beliebige öffentliche GitHub-URL ein (z. B. https://github.com/vercel/next.js)
  3. Wählen Sie eine Stufe: Basic (100 sats), Full (500 sats) oder Live ✦ (1000 sats)
  4. Klicken Sie auf Analyze & Generate Diagram
  5. Bezahlen Sie die Lightning-Rechnung mit einem beliebigen Wallet — oder geben Sie einen Promo-Code für kostenlosen Zugang ein
  6. Ihr interaktives Diagramm öffnet sich automatisch

​
Option 2 — VS Code-Erweiterung

Installieren Sie aus dem Marketplace: 
code --install-extension ShinyDapps.diagram-forge
Oder suchen Sie nach “Diagram Forge” im Erweiterungen-Panel (Ctrl+Shift+X).
Diagram Forge VS Code extension — idle, confirming, analyzing, done
Verwendung:
  1. Öffnen Sie ein beliebiges Projekt mit einem GitHub-Remote
  2. Klicken Sie auf das Diagram Forge-Symbol in der Aktivitätsleiste (linke Seitenleiste)
  3. Klicken Sie auf Analyze Repo — die GitHub-URL wird automatisch erkannt
  4. Stufe wählen + Promo-Code eingeben (optional)
  5. Mit Lightning bezahlen oder Promo-Code verwenden
  6. Das Diagramm öffnet sich im Browser

​
Option 3 — GitHub verbinden (Web-App)

Klicken Sie auf Connect GitHub in der oberen Navigation der Web-App, um zu autorisieren und eine Dropdown-Liste aller Ihrer Repositories zu erhalten — kein manuelles Kopieren von URLs erforderlich.

​
Analysestufen

StufePreisWas Sie erhalten
Basic100 sats (~$0,10)Schnellscan — Top 10 Dateien, Hauptdienste erkannt
Full500 sats (~$0,50)Vollständiges Repository — alle Dienste, Verbindungen, Monorepos
Live ✦1000 sats (~$1,00)Vollständige Analyse + animiertes SVG mit Partikelflüssen
Lightning-Preise sind deutlich niedriger als Kartenpreise, da keine Zahlungsabwicklungsgebühren anfallen.

​
Kein Lightning-Wallet?

Starten Sie in unter 2 Minuten:

Wallet of Satoshi

Einfachstes mobiles Wallet — verwahrend, sofortige Einrichtung

Phoenix

Mobil, selbstverwahrt, kein KYC

Alby

Browser-Erweiterung — funktioniert direkt in VS Code
Nach der Installation kaufen Sie eine kleine Menge Bitcoin (bereits $1 reicht für Dutzende von Analysen) und scannen Sie den QR-Code, wenn Diagram Forge die Rechnung anzeigt.

​
Promo-Codes

Haben Sie einen Promo-Code? Geben Sie ihn im Feld “Promo code (optional)” ein, bevor Sie auf Analyze klicken — die Analyse läuft vollständig kostenlos, kein Wallet erforderlich. Promo-Codes sind zeitlich und nutzungsmäßig begrenzt. Besuchen Sie forge.l402kit.com oder folgen Sie @ShinyDapps für aktuelle Codes.

​
Was das Diagramm zeigt

Jedes Diagramm enthält:
  • Nodes — Dienste, Datenbanken, Warteschlangen, APIs, ML-Modelle, CDNs, die in Ihrem Code erkannt wurden
  • Edges — Verbindungen zwischen Komponenten mit Protokollbezeichnungen (HTTP, SQL, gRPC, WebSocket, AMQP…)
  • Logos — offizielle Simple Icons-Branding für 80+ Technologien
  • Animierte Flüsse — Partikel, die sich entlang der Edges bewegen, nach Protokolltyp eingefärbt (gelb = Lightning, blau = HTTP, grün = SQL…)
Funktionen des interaktiven Viewers:
  • Schwenken & Zoomen (scrollen zum Zoomen, ziehen zum Schwenken)
  • Klicken Sie auf einen beliebigen Node, um seine Verbindungen und Beschreibung zu untersuchen
  • Minimap für große Diagramme
  • Nodes nach Name oder Typ suchen
  • Export: SVG, PNG, Markdown, Draw.io
  • Freigabelink: /g/:id — permanente teilbare URL für jedes Diagramm

​
Import aus einem Bild

Haben Sie kein GitHub-Repository? Laden Sie ein Whiteboard-Foto, einen Screenshot, eine Visio-Datei oder ein PDF hoch — Claude extrahiert die Architektur und generiert dasselbe interaktive Diagramm. Unterstützte Formate: JPG, PNG, WEBP, GIF, PDF

​
Architektur-Benchmark

Klicken Sie nach der Generierung eines Diagramms auf Benchmark im Viewer, um eine 6-dimensionale Qualitätsbewertung zu erhalten:
DimensionWas gemessen wird
SkalierbarkeitHorizontales Skalierungspotenzial, Engpässe
ZuverlässigkeitEinzelne Ausfallpunkte, Redundanz
SicherheitAuthentifizierung, Verschlüsselung, Angriffsfläche
BeobachtbarkeitProtokollierung, Metriken, Tracing-Abdeckung
WartbarkeitKopplung, Komplexität, Modularität
KosteneffizienzOptional — Kosten pro Dienst vs. Wert

​
Datenschutz

  • Ihr Code wird vorübergehend geklont auf einem sicheren Server, analysiert und dann sofort gelöscht
  • Nur die Graph-Metadaten (Node-Bezeichnungen, Edge-Verbindungen — kein Quellcode) werden gespeichert, wenn Sie Freigabelinks verwenden
  • Kein Konto erforderlich, keine Datenspeicherung über das Diagramm hinaus

​
Wie l402-kit verwendet wird

Diagram Forge basiert auf dem Managed Mode von l402-kit — der einfachsten Möglichkeit, Lightning-Zahlungen zu akzeptieren, ohne einen Node zu betreiben: 
import { l402, ManagedProvider } from "l402-kit";

const provider = ManagedProvider.fromAddress("pinkfalcon21@primal.net", {
  registerDirectory: {
    url: "https://forge.l402kit.com/analyze",
    name: "Diagram Forge — Architecture Analysis",
    priceSats: 500,
    description: "AI-powered living architecture diagrams from any repo",
    category: "ai",
  },
});

// Gate the /analyze endpoint — returns 402 until paid
app.post("/analyze", l402({ priceSats: 500, lightning: provider }), handler);
Wenn ein Client POST /analyze ohne gültiges preimage aufruft: 
HTTP/1.1 402 Payment Required
WWW-Authenticate: L402 macaroon="...", invoice="lnbc..."
Der Client bezahlt die Rechnung und wiederholt die Anfrage mit Authorization: L402 <macaroon>:<preimage>. Möchten Sie etwas Ähnliches bauen? Siehe den l402-kit Quickstart.

Web-App

Analysieren Sie jedes öffentliche GitHub-Repository in Ihrem Browser

VS Code-Erweiterung

Vollständige Seitenleistenerfahrung in VS Code

Quellcode

MIT-lizenziert — forken Sie es, erweitern Sie es, bauen Sie darauf auf

l402-kit Quickstart

Bauen Sie Ihren eigenen L402-gesicherten Dienst in Minuten