Erstelle eine komplette Web-Applikation, die einen visuellen Flow-Builder wie n8n oder Make.com enthält auf Vue Basis. Die App soll folgende Elemente besitzen: 1. Grundlayout Eine linke Sidebar mit: Suchfeld für Nodes Kategorien (Trigger, Tools, API, Logik, Datentransformation) Node-Kacheln (Icon + Name) Eine mittelgroße Canvas (Zoomfähig, Dragging, Pan) Ein rechter Inspector für Node-Properties Das Layout soll modern wirken (ähnlich Tailwind + shadcn/ui). 2. Node-System Implementiere ein Node-Modell: { \"id\": \"string\", \"type\": \"string\", \"name\": \"string\", \"position\": { \"x\": 0, \"y\": 0 }, \"inputs\": [], \"outputs\": [], \"data\": {} } Unterstütze: Drag-and-Drop von Nodes aus der Sidebar auf die Canvas Verbinden von Nodes per Connector-Handles (links = input, rechts = output) Entfernen von Verbindungen Verschieben von Nodes Nutze vorzugsweise d3.js, React Flow oder ähnliche Canvas-Bibliotheken. 3. Verbindungslogik Verbindungen dürfen nur output → input Es soll ein gerichteter Graph entstehen Bei Hover über Ports soll ein Highlight erscheinen Verbindungen sind kurvige Linien (Bezier) 4. Node-Inspector (rechts) Beim Klick auf einen Node: Zeige dynamisches Formular basierend auf dem Node-Schema Forms unterstützen: Textfeld Select Key-Value-Listen JSON-Editor Beispielschema: { \"fields\": [ { \"key\": \"url\", \"type\": \"text\", \"label\": \"URL\" }, { \"key\": \"method\", \"type\": \"select\", \"label\": \"HTTP Method\", \"options\": [\"GET\",\"POST\"] } ] } 5. Flow-Serialisierung Erstelle Funktionen: export function serializeFlow() { /* return JSON */ } export function loadFlow(json) { /* render */ } Format: { \"nodes\": [], \"connections\": [] } 6. Beispielnodes Erstelle folgende Nodes vorkonfiguriert: HTTP Request Webhook / Trigger IF / Condition Delay Set / Transform Data Console Log 7. Style / UX Dark/Light-Mode Smooth Transitions Icons für alle Nodes Zoom per Maus + Touch Grid-Raster im Hintergrund 8. Ziel Erstelle eine funktionierende Oberfläche, die direkt nutzbar ist und klar strukturiert wirkt. Der Code soll so aufgebaut sein, dass ich ihn später leicht in mein eigenes CMS integrieren kann.