Orqestria Download
← Back to Internal system builders

Skill · Version 1.0.0

Integrate graph editor libraries

Connects visual graph tools to clean workflow data while preserving editing, layout and component lifecycles.

graph-editor-library-integration

Team members using this skill

See how it helps

When is it useful?

Use when adding custom nodes, auto-layout or controls to an existing node-based editor.

What does it help you do?

  • Separates persisted workflow data from temporary dragging and measurement fields.
  • Keeps node inputs usable without accidental canvas panning or dragging.
  • Applies layout as a deterministic undoable change with appropriate rendering cleanup.

Try asking this

Add auto-layout to our workflow editor while preserving saved JSON, node text selection and a single undo step. Apply layout to a saved graph and undo that layout as one action. Check text editing separately; identifiers and connections must remain unchanged.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

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?

Included files 1

  • SKILL.md