2023-08-15 · SOFTWAREENTWICKLUNG
GERRIDAJ: Visuelle Programmierung trifft Fertigung
Ein Browser-basiertes Werkzeug für parametrisches Design und CNC-CAM — das nicht nur Modelle baut, sondern die Werkzeuge, mit denen Modelle gebaut werden.
Auf einen Blick
GERRIDAJ ist ein Werkzeug für parametrisches 3D-Design und CNC-Fertigung — direkt im Browser, ohne Installation. Statt einzelner Modelle zu zeichnen, erstellen Sie ein Regelwerk. Eine Regel ändern — und das gesamte Modell mit allen abhängigen Maßen, Formen und Werkzeugbahnen passt sich automatisch an.
Der Grundgedanke: Sie bauen nicht ein einzelnes Teil, sondern eine Maschine, die Teile baut. Ein Regelwerk, tausende Varianten — mit direktem visuellem Feedback in Echtzeit. Varianten erkunden Sie spielerisch: Parameter ändern, zusehen, wie sich das gesamte Modell neu berechnet — sofort. Design und Dokumentation fallen zusammen: Der Graph ist die Konstruktionsdokumentation. Jeder Schritt ist nachvollziehbar, reproduzierbar und wiederverwendbar. Kein verstecktes Wissen in einzelnen Dateien — der gesamte Prozess lebt in einem offenen, editierbaren Graphen.
Bedienungs-Highlights: Beim Ziehen einer Verbindung leuchten kompatible Anschlüsse visuell auf — inkompatible sind blockiert. Der nächstgelegene passende Port verbindet sich automatisch beim Loslassen der Maus. Zum Trennen ziehen Sie mit gedrückter Maustaste durch beliebig viele Verbindungen — ein Schnitt, alles getrennt. Wer je in n8n oder anderen Node-Editoren gearbeitet hat, weiß, wie mühsam Verbinden und Trennen dort ist. Hier geht es in Sekunden.
Wenn Sie mit dem Entwurf fertig sind, speichern Sie den Workflow, exportieren das 3D-Modell oder generieren direkt G-Code für Ihre CNC-Maschine — alles in einem Werkzeug, ohne Medienbruch.
Und das ist erst der Anfang: Es kann noch viel mehr — Robotersimulation und Offline-Programmierung zum Beispiel. Aber das ist ein eigenes Thema.
Was ist visuelle Programmierung?
Stellen Sie sich vor, Sie bauen ein komplexes 3D-Modell — nicht durch Zeichnen von Linien und Flächen, sondern durch das Verbinden von Bausteinen auf einer Leinwand. Jeder Baustein ist eine Operation: „Erzeuge einen Würfel", „Verschiebe um 10 mm", „Bohre ein Loch an dieser Position". Die Verbindungen zwischen den Bausteinen definieren, wie Daten fließen — von der Eingabe zur Ausgabe, vom Rohentwurf zum fertigen Bauteil.
Das ist visuelle Programmierung: Statt Code zu schreiben, erstellen Sie einen Datenfluss-Graphen aus Knoten und Verbindungen. Ändern Sie einen Parameter — etwa die Größe des Würfels — und die Änderung propagiert automatisch durch den gesamten Graphen. Jede abhängige Operation wird neu berechnet. Das Ergebnis aktualisiert sich in Echtzeit.
Der Unterschied zum klassischen CAD ist fundamental. In traditioneller Software zeichnen Sie ein fertiges Modell. Wenn sich später eine Anforderung ändert — der Durchmesser einer Bohrung, die Dicke einer Wand — müssen Sie das Modell manuell anpassen oder sogar neu aufbauen. In einem visuellen Programmierwerkzeug ändern Sie einen Parameter und der gesamte Prozess läuft erneut ab. Das Modell ist nicht das Ergebnis — der Prozess ist das Ergebnis.
Warum parametrisches Design?
In der realen Fertigung sind Änderungen die Regel, nicht die Ausnahme. Ein Kunde möchte eine Variante mit anderen Abmessungen. Ein Materialwechsel erfordert andere Toleranzen. Eine neue Maschine hat einen anderen Bauraum. Jede dieser Änderungen bedeutet in traditionellem CAD: Modell öffnen, manuell editieren, prüfen, exportieren — oft Stunden Arbeit für eine scheinbar kleine Anpassung.
Parametrische Systeme drehen dieses Verhältnis um. Statt ein Modell zu bauen, definieren Sie Regeln, nach denen Modelle entstehen. Der Graph ist kein statisches Dokument — er ist eine formale Beschreibung des gesamten Konstruktionsprozesses. Einmal erstellt, kann er tausende Varianten erzeugen, automatisch optimieren und an neue Randbedingungen anpassen.
Das ist der entscheidende Paradigmenwechsel: Sie bauen nicht ein Ding — Sie bauen eine Maschine, die Dinge baut. Und genau dafür wurde GERRIDAJ entwickelt.
Was ist visuelle Programmierung — und warum ist sie so mächtig?
Visuelle Programmierung ersetzt Text durch Knoten und Verbindungen. Jeder Knoten ist eine Operation — eine geometrische Transformation, eine mathematische Berechnung, eine Datenabfrage. Verbindungen zwischen Knoten definieren den Datenfluss. Das Ergebnis ist ein gerichteter Graph, der nicht nur ein Modell beschreibt, sondern den gesamten Entstehungsprozess.
Der entscheidende Unterschied zum klassischen CAD: Ändert sich ein Parameter, propagiert die Änderung automatisch durch den gesamten Graphen. Das gesamte Modell wird neu berechnet — nicht nur eine einzelne Fläche oder Kante. Was in traditioneller Software Stunden manueller Nacharbeit bedeutet, passiert hier in Echtzeit.
Der Werkzeugmacher-Ansatz
Die meisten CAD-Programme sind Werkzeuge, mit denen man Objekte baut. GERRIDAJ geht einen Schritt weiter: Es ist ein Werkzeug, mit dem man Werkzeuge baut. Ein einmal erstellter Graph ist kein statisches Modell, sondern ein wiederverwendbarer Prozess. Ändern Sie die Eingabeparameter, und derselbe Graph erzeugt eine völlig neue Variante — sei es eine andere Geometrie, ein anderes Material oder eine andere Fertigungsstrategie.
Dieser Paradigmenwechsel von der Modellierung zur Prozessdefinition ist der Kern von parametrischem Design. Er ermöglicht es, ganze Produktfamilien aus einem einzigen Graphen abzuleiten, Fertigungsvarianten automatisch zu generieren und Designregeln formal zu kodifizieren.
Herausforderungen: UI, Zustandsmanagement, Echtzeit
Die Entwicklung eines visuellen Programmierwerkzeugs im Browser bringt drei fundamentale Herausforderungen mit sich.
Graphen-UI und Interaktion. Ein Knotengraph muss intuitiv navigierbar, zoombar und editierbar sein — bei Hunderten von Knoten und Verbindungen. Die Darstellung muss gleichzeitig Übersicht und Detail bieten: den großen Datenfluss erkennen lassen, aber einzelne Parameter sofort zugänglich machen. Das erfordert ein ausgeklügeltes Rendering mit Canvas oder WebGL, gepaart mit einer DOM-basierten Overlay-Schicht für Formulare und Eingaben.
Zustandsmanagement. Jede Änderung im Graphen löst eine Kaskade von Neuberechnungen aus. Verbindungen werden getrennt, Werte propagiert, Abhängigkeiten neu aufgelöst. Das zugrunde liegende Datenmodell muss Zyklen erkennen, Teilgraphen isolieren und inkrementelle Updates ermöglichen — alles innerhalb eines einzelnen Browser-Threads, ohne die UI blockieren zu dürfen.
Echtzeit-3D und Performance. Geometrische Berechnungen — boolesche Operationen, Mesh-Triangulation, Kollisionserkennung — sind rechenintensiv. Im Browser bedeutet das: Web Worker für parallele Berechnungen, effiziente Datenstrukturen für den Transfer zwischen Worker und Haupt-Thread, und ein 3D-Viewport (Three.js/WebGL), der auch bei komplexen Szenen flüssig bleibt.
Warum im Browser?
Ein visuelles Programmierwerkzeug als Webanwendung zu bauen, ist anspruchsvoller als eine native Desktop-Anwendung. Aber die Vorteile überwiegen.
Null Installation. Kein Download, keine Abhängigkeiten, keine Betriebssystem-Kompatibilität. Ein Link genügt, und der gesamte Workspace steht bereit.
Kollaboration in Echtzeit. Browser-basierte Architekturen erlauben es, Graphen zu teilen, gemeinsam zu bearbeiten und Ergebnisse live zu diskutieren — ohne Dateiversionen per E-Mail zu verschicken.
Plattformunabhängigkeit. Windows, Mac, Linux, Tablet — überall dieselbe Engine, dasselbe Verhalten. Keine plattformspezifischen Bugs, keine unterschiedlichen Builds.
Immer aktuell. Updates passieren serverseitig. Nutzer arbeiten immer mit der neuesten Version, ohne sich um Patches oder Upgrades kümmern zu müssen.
Integration in bestehende Workflows. Über eine API oder eingebettete iFrames lässt sich der visuelle Editor direkt in bestehende Web-Plattformen, Shops oder interne Tools integrieren.
UX: Verbinden und Trennen ohne Frust
Wer schon einmal mit einem Knoten-Editor gearbeitet hat, kennt das Problem: Sie ziehen eine Verbindung von einem Ausgangsport, navigieren durch einen Graphen mit hunderten von Knoten, zoomen und scrollen zum Ziel — nur um festzustellen, dass der Port nicht kompatibel ist. Oder Sie wollen eine bestehende Verbindung lösen und müssen erst das Kontextmenü öffnen, den richtigen Eintrag finden, bestätigen. Bei komplexen Graphen wird das zur Geduldsprobe.
GERRIDAJ geht hier einen radikal anderen Weg. Unser Smart-Connection-System erkennt beim Ziehen einer Verbindung automatisch den nächsten kompatiblen Port in der Nähe des Cursors — unabhängig davon, wie weit die Knoten im Graphen voneinander entfernt sind. Kein manuelles Zielen auf einen winzigen Port. Kein Scrollen durch den gesamten Graphen. Die Verbindung findet ihr Ziel von selbst.
Für das Trennen von Verbindungen haben wir eine ebenso intuitive Lösung entwickelt: eine Schnittgeste. Eine schnelle, horizontale Wischbewegung über eine bestehende Verbindung trennt diese sofort — ohne Menü, ohne Dialog, ohne Bestätigung. So einfach, wie man eine Linie auf Papier durchstreicht.
Diese beiden Mechaniken — intelligentes Auto-Connect und gestenbasierte Trennung — sind nicht nur Komfort-Features. Sie sind der Unterschied zwischen einem Werkzeug, das man benutzt, und einem, das man liebt.
Parametrik für die Fertigung: Vom Graphen zur Maschine
GERRIDAJ endet nicht beim 3D-Modell. Das Regelwerk kann auch festlegen, wie das Teil gefertigt werden soll — welche Fräsbahn, welche Drehzahl, welcher Vorschub. All das sind Bausteine im selben Regelwerk. Ändern Sie das Material, passen sich auch die Fertigungsparameter automatisch an.
So entsteht aus einem Regelwerk nicht nur ein Modell, sondern der komplette Fertigungsauftrag — ohne dass Sie die CNC-Programmierung neu aufsetzen müssen.
Aufbau des Systems
Was das für Ihr Projekt bedeutet
GERRIDAJ ist ein Produkt, das wir verkaufen — aber nicht nur. Die Entwicklung hat eine Fülle von Bausteinen und Wissen hervorgebracht, die wir auch für völlig andere Projekte einsetzen können. Das System wurde von Grund auf modular gebaut: Jedes Element — vom Baustein-System für die Bedienoberfläche über die 3D-Vorschau bis zur CNC-Anbindung — ist ein eigenständiger Baustein, den wir für andere Anwendungen wiederverwenden können.
Ein Beispiel: Das System zum Verbinden und Verknüpfen von Bausteinen, das Sie hier sehen, könnte ebenso einen Workflow für ein Ticketsystem abbilden, eine Bestellstrecke in einem Shop steuern oder einen komplexen Genehmigungsprozess in einem Unternehmen automatisieren. Die Oberfläche bleibt gleich — was die Bausteine tun, passt sich Ihrem Anwendungsfall an.
Wir zeigen GERRIDAJ auch, um deutlich zu machen, was moderne Webentwicklung tatsächlich leisten kann. Es geht um weit mehr als Texte, Farben und Layout. Interaktive Werkzeuge, Echtzeit-Visualisierung, komplexe Geschäftslogik direkt im Browser — all das ist heute möglich. Wenn Ihre Vorstellung von einer Website bei „schön und schnell" aufhört, zeigen wir Ihnen gerne, was darüber hinaus geht.
Für Ihr Projekt: Wir bringen nicht nur Ideen mit — sondern fertige, erprobte Bausteine, die Zeit und Kosten sparen.
Hilfe direkt am Baustein
Ein häufiges Problem: Sie fügen einen Baustein ein, sehen einen Namen — aber was der Baustein genau macht, bleibt unklar. Die Hilfe existiert irgendwo, aber Sie müssen sie erst suchen. Der Arbeitsfluss wird unterbrochen.
In GERRIDAJ ist die Hilfe direkt am Baustein aufrufbar. Ein Klick — und Sie sehen, was der Baustein tut, welche Eingaben er erwartet, was er ausgibt. Kein Menü, kein separates Fenster, kein Nachschlagen im Handbuch. Alles dort, wo Sie gerade arbeiten.
Das spart nicht nur Zeit, es verhindert Fehler. Falsche Verbindungen, missverstandene Einstellungen — all das passiert seltener, wenn die Information unmittelbar verfügbar ist.
Vom Graphen zum Konfigurator: Parametrik für den Kunden
Ein vollständiger Knotengraph ist mächtig — aber für einen Endkunden, der nur seine individuelle Variante eines Produkts konfigurieren möchte, ist er überfordernd. Hunderte Knoten, Dutzende Parameter, technische Details — zu viel, zu komplex.
GERRIDAJ löst das durch Abstraktion: Jeder Graph kann als vereinfachter Konfigurator exportiert werden. Sie definieren, welche Parameter für den Endnutzer sichtbar sind — etwa Länge, Breite, Material — und legen für jeden Parameter sinnvolle Grenzen fest. Der komplexe Graph im Hintergrund wird auf eine handvoll Schieberegler und Auswahlfelder reduziert. Der Kunde sieht nur, was für seine Entscheidung relevant ist.
Dieser abstrahierte Konfigurator wird als einbettbarer iframe bereitgestellt — vollständig anpassbar, mit eigenem Branding, einbettbar auf jeder Website oder in jedem Shop. Der Kunde konfiguriert seine Variante selbst, sieht das Ergebnis live in 3D, und die gewählten Parameter werden direkt erfasst. Kein E-Mail-Pingpong mit „Könnten Sie das noch 3 cm länger machen?". Keine manuellen Anpassungen in der CAD-Software. Der Kunde liefert die Spezifikation, das System liefert das Modell.
Das beschleunigt den Kaufprozess erheblich: Von der ersten Produktidee zur fertigen Spezifikation in Minuten statt Tagen. Und weil alle Parameter mit definierten Grenzen versehen sind, kann der Kunde nichts konfigurieren, was technisch nicht umsetzbar ist.
Sehen Sie Gerridaj live in Aktion