Documents
Home>Documents>Dev>Frontend

Workflow Management: Save, Load, Execute, and Monitor

6 min readJul 8, 2025Feb 22, 2026

Workflow Lifecycle

In the XGen platform, a workflow follows this lifecycle: Design → Save → Load → Execute → Monitor.

Workflow Lifecycle

stateDiagram-v2
    [*] --> Designing: 캔버스에서 편집
    Designing --> Saved: 저장 (자동/수동)
    Saved --> Designing: 로드
    Saved --> Executing: 실행
    Executing --> Monitoring: 성능 추적
    Monitoring --> Designing: 결과 분석 후 수정
    Saved --> Deleted: 삭제
    Deleted --> [*]

Auto-Save

Commit 7/8 introduced localStorage-based auto-save:

// 캔버스 상태가 변경될 때마다 저장
useEffect(() => {
  const saveTimeout = setTimeout(() => {
    const state = {
      nodes: canvasState.nodes,
      edges: canvasState.edges,
      workflowName: workflowName,
      timestamp: Date.now()
    };
    localStorage.setItem('workflow_autosave', JSON.stringify(state));
  }, 1000); // 1초 디바운스

  return () => clearTimeout(saveTimeout);
}, [canvasState]);

Duplicate Check

When saving a workflow, the system checks whether a workflow with the same name already exists:

async function saveWorkflow() {
  // 백그라운드에서 중복 체크
  const exists = await checkDuplicateWorkflow(workflowName);
  if (exists) {
    const confirmed = await showConfirmDialog(
      '같은 이름의 워크플로우가 있습니다. 덮어쓸까요?'
    );
    if (!confirmed) return;
  }
  await api.saveWorkflow(workflowData);
  toast.success('워크플로우가 저장되었습니다');
}

Workflow Execution

Execution support was added on 7/14. The UI accepts input data and sends an execution request to the backend:

sequenceDiagram
    participant U as 사용자
    participant E as Executor UI
    participant B as Backend
    participant W as WorkflowExecutor

    U->>E: 입력 데이터 + 실행
    E->>B: POST /workflow/execute
    B->>W: 워크플로우 실행
    W-->>B: SSE 스트림
    B-->>E: 실행 진행 상황
    E-->>U: 실시간 결과 표시

Monitoring Dashboard

Performance monitoring was added between 7/14 and 7/15:

  • Per-workflow execution time tracking
  • Per-node performance statistics
  • List of completed workflows
  • Ability to clear performance data

These features alone account for roughly 60 commits between 7/7 and 7/15.

Tags
workflowauto-savemonitoringexecution enginedashboard