Orqestria Download
← Zurück zum Katalog

Skill · Version 1.0.0

Grapheditor-Bibliotheken integrieren

Verbindet visuelle Graphwerkzeuge mit sauberen Workflowdaten und stabilen Bearbeitungs- und Layoutabläufen.

graph-editor-library-integration

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze diesen Skill für eigene Knoten, automatische Anordnung oder zusätzliche Editorsteuerung.

Wobei hilft er dir?

  • Trennt gespeicherte Daten von temporären Zieh- und Messfeldern.
  • Verhindert unbeabsichtigtes Verschieben beim Bedienen von Knoteneingaben.
  • Wendet Layout als deterministische rückgängig machbare Änderung an.

Das könntest du fragen

Ergänze Auto-Layout ohne Änderungen am Speicherformat, mit nutzbarer Textauswahl und einem Rückgängig-Schritt. Ordne einen gespeicherten Graphen automatisch an und prüfe die Rücknahme dieses Layoutschritts. Kennungen und Verbindungen bleiben unverändert; Textbearbeitung bleibt getrennt nachvollziehbar.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

Graph Editor Library Integration

Use this skill when integrating or extending a visual node-graph library (such as @xyflow/react / React Flow, @vue-flow/core, @xyflow/svelte, or Rete.js) and graph auto-layout engines (dagre, elkjs).

Adapt to the Existing Graph Engine & Framework

  1. Keep Domain Workflow State Clean of Library-Internal Runtime Fields:
    • Node-graph libraries attach ephemeral measurement and dragging properties (measured, dragging, selected, internal handle bounds) to node objects.
    • Maintain a clean adapter boundary between your persisted WorkflowDefinition + WorkflowLayout model and the library's view-state nodes/edges so internal library fields are never leaked into saved workflow JSON or version hashes.
  2. Memoize Custom Nodes and Edge Components:
    • In React Flow / Vue Flow, wrap custom node and edge renderers (memo / markRaw) and define nodeTypes and edgeTypes outside the render function so panning or dragging one node never unmounts and remounts every node on the canvas.
    • Inside custom node views, mark interactive form inputs (nodrag, nopan, nowheel classes) so typing, selecting text, or scrolling a dropdown inside a node does not accidentally drag or zoom the canvas.

Auto-Layout Engines (Dagre / ELK.js) & Viewport Polish

  • Deterministic Hierarchical Layout:
    • When auto-arranging a workflow (TB top-to-bottom or LR left-to-right) or inserting a new step via keyboard/button between two connected nodes, compute positions using measured node dimensions via dagre or elkjs inside a single undoable layout transaction.
  • Accessible Focus & Viewport Navigation:
    • Enable keyboard focusability (nodesFocusable, edgesFocusable, autoPanOnNodeFocus), provide a minimap / fit-view control, and allow clicking a step in the run timeline or validation error list to smoothly center (setCenter / fitView) that node on the canvas.

Checklist

  • Are nodeTypes and edgeTypes defined stably and memoized so panning/dragging does not remount custom nodes?
  • Are interactive inputs inside custom nodes marked with nodrag / nowheel so editing node fields never drags the canvas?
  • Are library-internal runtime properties stripped before serializing WorkflowDefinition and computing version hashes?
  • Does auto-layout (dagre / elkjs) arrange nodes cleanly as a single undoable layout update without altering execution semantics?

Enthaltene Dateien 1

  • SKILL.md

Über dieses Skill-Paket

graph-editor-library-integration

graph-editor-library-integration: Entwickelt Workflow-Editoren und Ausführungsmodelle für konsistente Verzweigungen, Freigaben, Wartezustände, Wiederholungen und versionierte Änderungen.

Details…Weniger anzeigen

graph-editor-library-integration

graph-editor-library-integration: Entwickelt Workflow-Editoren und Ausführungsmodelle für konsistente Verzweigungen, Freigaben, Wartezustände, Wiederholungen und versionierte Änderungen.

Enthält den vollständigen Skill und seine Begleitdateien (1 Dateien). Der genaue, ursprünglich verfasste Anwendungsbereich bleibt unten erhalten.

Ursprüngliche Skill-Beschreibung (Quellsprache)

Use when evaluating, integrating, and extending node-graph editor libraries (XYFlow / React Flow, Vue Flow, Svelte Flow, Rete.js) with auto-layout engines (ELK, Dagre) and custom nodes.

Installiere den Skill, prüfe seine Quelle und Vertrauenseinstellungen und aktiviere ihn für das passende Projekt oder den Agenten.

Voraussetzungen

  • Orqestria auf deinem Computer installiert.