🧩
개발 중
Workflow Editor
노드 기반 워크플로우
Rete.js / ReactFlow 기반 노드 비주얼 에디터. 자동화 흐름을 드래그로 구성.
배경
코드 없이 노드 그래프로 자동화 파이프라인·데이터 변환·프로세스를 시각적으로 설계·정렬·내보내고 싶다는 요구를 해결합니다.
핵심 기능
- Rete.js 2 + React 플러그인 드래그·연결 편집
- elkjs 자동 정렬(노드 자동 배치)
- 팬·줌(area) 및 엣지 렌더(connection) 플러그인
- Ant Design 폼·다이얼로그 UI
- 그래프 상태 JSON 내보내기
동작 방식
React 앱이 rete-react-plugin으로 시각 편집기를 구성합니다. 에디터 인스턴스가 노드·연결을 관리하고, area 플러그인이 뷰포트를, connection 플러그인이 엣지를 그리며 ELK로 자동 배치합니다.
사용 방법
- 의존성을 설치한다
- 개발 서버를 실행한다
- 에디터 페이지에서 노드를 드래그·연결한다
- 자동 정렬 후 그래프를 JSON으로 내보낸다
분류: 그 외 · 원본 경로: D:\nodeProject\rete_project