dag-visual-editor-design

license	BSL-1.1
name	dag-visual-editor-design
version	1.0.0
description	Design modern, intuitive DAG/workflow visual editors that feel like LEGO, not LabView
category	Agent & Orchestration
tags	["dag","visual-editor","design","ui","graph-editing"]
trigger_phrases	["design dag editor","workflow builder ui","node graph ux","visual programming interface","make dag editor intuitive"]
allowed-tools	["Read","Write","Edit","WebSearch","WebFetch"]
io-contract	{"kind":"deliverable","produces":[{"kind":"design-doc","description":"DAG visual editor design with component library, interaction patterns, layout algorithms, and accessibility compliance"}]}
metadata	{"recognition-cues":[],"expectancies":[],"decision-cues":[],"adaptive-workarounds":[],"execution-pattern":"sequential","needs-cdm":true}

DAG Visual Editor Design

Design modern, intuitive DAG and workflow visual editors following the LEGO philosophy: snap blocks together simply rather than wire complex ports.

DECISION POINTS

Layout Algorithm Selection

Node Count < 20 AND Simple Flow?
├─ YES → Force-directed layout (React Flow default)
│         • Fast rendering
│         • Good for exploring connections
│
└─ NO → Node Count > 100?
    ├─ YES → Hierarchical (Dagre) + Virtualization
    │        • Set viewport culling
    │        • Lazy load node details
    │
    └─ NO → Branch Factor > 3 per node?
        ├─ YES → ELK Layered Algorithm
        │        • Handles complex routing
        │        • Minimizes edge crossings
        │
        └─ NO → Dagre LR (Left-Right)
                • Standard choice
                • rankdir: 'LR', ranksep: 80

Node Connection Strategy

Data Type Diversity?
├─ Single type (e.g., JSON) → Implicit connections
│   • No handles visible by default
│   • Snap zones on hover
│
├─ 2-3 types → Color-coded handles
│   • Red: Error streams
│   • Blue: Data streams  
│   • Green: Success/completion
│
└─ 4+ types → Bundled connections
    • Group related channels
    • Label bundles clearly
    • Consider type coercion nodes

Editing Mode Selection

User Skill Level?
├─ Beginner → Canvas + Sidebar
│   • Drag nodes from categorized list
│   • Template-based workflows
│
├─ Intermediate → Quick Add (Slash Commands)
│   • Type "/" for node search
│   • Context-aware suggestions
│
└─ Expert → Keyboard First
    • Hotkeys for common nodes
    • Text-based node creation
    • Batch operations

FAILURE MODES

Spaghetti Graph Syndrome

Symptoms: Edges crossing everywhere, impossible to follow data flow, users getting lost Detection: If >30% of edges cross other edges, or users spend >20s tracing a path Fix:

• Force hierarchical layout (Dagre/ELK)
• Add intermediate junction nodes to break long connections
• Implement edge bundling for parallel data flows

Zoom Desert Problem

Symptoms: Pan/zoom feels broken, users can't find their content, minimap unhelpful Detection: Users hitting zoom limits frequently, >5 seconds to locate nodes after navigation Fix:

• Implement fit-to-view on double-click background
• Add breadcrumb navigation for nested groups
• Set proper zoom bounds: min 0.1x, max 3x
• Show node labels at all zoom levels >0.5x

Handle Ambiguity Confusion

Symptoms: Users connecting wrong ports, type errors, unexpected data flow >20% connection error rate, frequent undo of connections