---
id: litegraph
title: "Litegraph"
category: "10_Wiki/Topics"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: []
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.85
created_at: 2026-05-19
updated_at: 2026-05-19
review_reason: ""
merge_history: []
tags: ["research", "Comfyui workflow json 생성 방법"]
raw_sources: ["NotebookLM Synthesis"]
applied_in: ["ComfyUI Settings Menu", "workflow.json"]
github_commit: ""
---

# [[Litegraph]]

## 🎯 한 줄 통찰 (One-line insight)
ComfyUI 프론트엔드 워크플로우의 시각적 레이아웃과 노드 연결 구조를 정의하는 핵심 직렬화 표준 규격 [1, 2].

## 🧠 핵심 개념 (Core concepts)
1. **프론트엔드 JSON 포맷의 근간:** ComfyUI의 시각적 편집 도구인 `workflow.json` 파일이 따르는 표준으로, 노드 기반 그래프의 시각화 및 조작을 위해 설계됨 [1, 2].
2. **시각적 메타데이터 저장:** 노드의 좌표(`pos`), 크기(`size`), 그룹 구성, 노드의 축소(collapsed) 또는 고정(pinned) 상태와 같은 UI 전용 정보를 포함함 [1, 3].
3. **명시적 링크 시스템 (Explicit Links):** 노드 간의 연결을 별도의 `links` 배열 내에서 고유 식별자를 가진 객체로 관리하며, 이는 백엔드 실행용 API 포맷과 차별화되는 지점임 [1, 4, 5].

## 🧩 추출된 패턴 (Extracted patterns)
- **이분법적 직렬화 구조:** 사용자 인터페이스를 위한 Litegraph 기반의 '프론트엔드 포맷'과 서버 실행을 위한 'API 포맷'을 엄격히 구분하여 운영함 [1, 4, 6].
- **캔버스 상태 복원 패턴:** Litegraph 규격을 준수함으로써 워크플로우 로드 시 사용자가 마지막으로 작업했던 좌표와 노드 배치를 정확하게 재생성함 [7, 8].

## 📖 세부 내용 (Details)
- **기술적 구성 요소:** Litegraph 표준에 따라 노드 객체는 `id`(고유 번호), `type`(노드 클래스명), `pos`(캔버스 내 x, y 좌표), `size`(너비 및 높이), `order`(실행/렌더링 순서) 등 필수 속성을 가짐 [3, 9].
- **데이터 흐름 정의:** 연결성은 `inputs`와 `outputs` 배열을 통해 정의되며, 각 입력은 고유한 링크 ID를 참조하여 데이터의 기원(origin_id)과 슬롯(origin_slot)을 식별함 [5].
- **비주얼 프로그래밍 환경:** Maya, Blender, Unreal Engine 등 전문적인 노드 기반 소프트웨어와 유사한 '절차적 프레임워크'를 제공하여 사용자가 복잡한 수학이나 코드 이해 없이도 AI 시스템을 설계할 수 있게 함 [10, 11].
- **메타데이터 임베딩:** ComfyUI는 Litegraph 규격의 JSON 데이터를 생성된 PNG 파일의 메타데이터(tEXt/zTXt 청크)에 삽입하여, 이미지 파일을 캔버스로 드래그했을 때 워크플로우가 즉시 복구되도록 지원함 [12, 13].

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- **버전 간 호환성 제약:** ComfyUI의 빈번한 업데이트로 인해 이전 버전의 Litegraph 기반 JSON 파일이 최신 환경에서 제대로 로드되지 않거나 위젯이 사라지는 현상이 발생할 수 있음 [14, 15].
- **실행 엔진과의 괴리:** Litegraph 포맷은 시각적 정보가 비대하여 백엔드 API 요청 시 오류를 유발할 수 있으므로, 반드시 'Dev mode'를 통한 API 포맷 변환 과정이 필요함 [8, 16].

## 🛠️ 적용 사례 (Applied in summary)
- **ComfyUI 설정(Settings) 메뉴:** 인터페이스 내 설정 창에 'Lite Graph' 섹션이 별도로 존재하여 관련 시각 옵션을 조정할 수 있음 [17, 18].
- **워크플로우 내보내기(Export):** 사용자가 인터페이스 메뉴에서 'Export'를 선택할 때 생성되는 `workflow.json` 파일이 이 규격을 직접적으로 사용함 [7, 9].
- **MetaData Parsing Logic:** ComfyUI 프론트엔드 패키지 내의 자바스크립트 컨텍스트(`src/scripts/metadata`)에서 Litegraph 기반의 메타데이터 파싱이 공식적으로 수행됨 [19].

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (ComfyUI 공식 문서 및 기술 사양을 통해 규격 확인됨)
- **출처 신뢰도:** B (Official Documentation / Technical Architecture Review via NotebookLM)
- **중복 검사 결과:** 신규 생성 (New discovery)

## 📝 변경 이력 (Change history)
- 2026-05-19: Initial draft generated via Datacollector_MAC P-Reinforce engine.