Der GPU-Renderer für große hierarchische Graphen.

Ausprobieren

Sieh es laufen — auf deinem Gerät.

Die Live-Demo rendert eine echte Codebasis — ripgrep, vor-analysiert: zehn Crates, ihre Dateien, 2.300 Funktionen, 3.500 Call-Kanten — mit exakt dem Renderer, der ausgeliefert wird: deterministisches Circle-Pack, Drill, gebündelte Kanten, das graphigo-Standard-Theme. Eine synthetische Spielwiese ist einen Klick entfernt. Einmalig laden ≈14 MB WASM; danach passiert jede Interaktion auf deinem Gerät. Nichts telefoniert nach Hause, kein Server rechnet mit.

Läuft auch lokal: entpacken, den Ordner servieren (z.B. python3 -m http.server) — WASM braucht http, kein file://.

So wird es benutzt

Daten kommen als schlichter hierarchischer Graph herein — Knoten mit Kind-Anzahl, Kanten mit Bündel-Gewicht. Kinder laden lazy über einen Callback, den du bereitstellst; der Renderer selbst spricht nie HTTP.

{ "nodes": [ { "id": "harbor", "kind": "module",
              "label": "harbor", "function_count": 42 } ],
  "edges": [ { "from": "harbor", "to": "atlas",
              "weight": 3, "ordinal": 0 } ] }

// JavaScript — the npm package:
import { mount } from "graphigo";
const g = await mount("#graph", data, { expand, onSelect });
g.replaceRoot(next); g.select(id, kind, label);

// Rust — the crate underneath:
graphigo::start(slice, StartOptions {
    theme, expand, layout: Rc::new(CirclePack), ..
});

Beides gibt es heute, Quelltext inklusive: die Rust-Crate und das npm-Paket darum. Eigene Layouts sind Plugins — eine pure Funktion, vom Harness geprüft, bevor sie je rendert.

Funktionsweise

Ruhig per Konstruktion.

Layout-Plugins

Ein Layout ist eine Funktion.

Struktur hinein, Positionen heraus. Layout-Plugins sind pur und deterministisch — die Übergänge gehören dem Renderer, er animiert sie. Du willst trotzdem ein Force-Layout? Gern: lass es innerhalb deines Plugins konvergieren und gib die beruhigten Positionen zurück. Die Oszillation bleibt draußen; dein Layout kommt rein.

Die Plugin-Spezifikation ist ein einzelnes, selbsttragendes Dokument — geschrieben, damit du es einem LLM geben und ein funktionierendes Layout erzeugen lassen kannst. Ein Prüf-Harness kontrolliert Containment und Determinismus — ein generiertes Layout beweist sich, bevor es je rendert.

Theming

Mach es zu deinem.

Jede Farbe und jedes Maß — Canvas, die Tiefen-Leiter, Ring-Stärken, Größenstufen der Knoten, Label-Volumina, Kanten-Breiten — ist ein Wert, der dir gehört. Im Renderer steckt keine hartkodierte Markenfarbe: Was du hier siehst, ist nur das Standard-Theme. Ein Theme ist vollständig oder es ist keins: Nimm den Default, ändere, was du willst, gib ihn ganz zurück. Keine Teil-Overrides, keine stillen Fallbacks — ein fehlendes Feld ist ein Fehler, der das Feld benennt.

import { mount, defaultTheme } from "graphigo";

const theme = await defaultTheme();   // der komplette Default, deiner zum Editieren
theme.accentSelected = "#C2481F";
theme.depthRing = ["#0E7C6B", "#1D5FA8", "#6A46C8", "#A83E9E", "#C2265E"];
await mount("#graph", data, { expand, theme });

Sieh es live: Die Demo bringt ein zweites komplettes Theme mit — dieselbe echte Codebasis auf Papier. Ein Objekt getauscht, jede Farbe anders, jedes Maß identisch. Das Theme-Objekt steht direkt im Quelltext der Seite.

Lizenzierung

Kauf den Quelltext, kein Schloss.

Early Access — die Lizenzbedingungen werden gerade finalisiert und hier veröffentlicht.