플로차트, 그래프, 워크플로 편집기 같은 인터랙티브 노드 기반 UI를 만들 수 있는 오픈소스 React 및 Svelte 라이브러리입니다.
bytedance/flowgram.ai
AI 워크플로 플랫폼을 구축할 수 있도록 캔버스, 폼, 변수 및 머티리얼 컴포넌트를 내장한 TypeScript 프레임워크입니다.
- 스타
- 8,504
- 포크
- 776
- 열린 이슈
- 82
- 마지막 커밋
- 8일 전
어떤 프로젝트인가요?
FlowGram은 자체 시각적 워크플로 제품을 만들려는 개발자를 위한 워크플로 개발 프레임워크이자 툴킷입니다. 바로 사용할 수 있는 워크플로 플랫폼은 아닙니다. 대신 플로 캔버스, 노드 설정 폼 엔진, 변수 스코프 체인, LLM·Condition·Code Editor 같은 즉시 사용 가능한 노드 머티리얼을 기본 구성 요소로 제공합니다.
캔버스는 두 가지 모드로 제공됩니다. 자유 배치 모드에서는 노드를 원하는 위치에 놓고 자유로운 형태의 선으로 연결할 수 있으며, 고정 레이아웃 모드에서는 노드가 지정된 위치에 맞춰지고 분기와 루프 같은 복합 노드를 지원합니다. 폼 엔진은 노드 데이터의 CRUD와 렌더링, 유효성 검사, 연동, 오류 캡처를 처리합니다. 변수 엔진은 노드 간에 전달되는 데이터의 스코프 제약, 구조 검사, 타입 추론을 담당합니다.
FlowGram은 npm 패키지로 배포되며 프로젝트 생성기가 포함되어 있어, npx 명령 하나로 새 데모 앱을 시작할 수 있습니다. TypeScript와 React로 구축되었으며, 문서에서는 캔버스, 폼, 변수, 머티리얼, 런타임 모듈을 다룹니다.
핵심 기능
- 01노드를 원하는 위치에 배치하고 자유로운 형태의 선으로 연결할 수 있는 자유 배치 캔버스입니다.
- 02분기와 루프 같은 복합 노드를 지원하는 고정 레이아웃 캔버스입니다.
- 03렌더링, 유효성 검사, 연동, 오류 캡처를 지원하는 노드 설정 폼 엔진입니다.
- 04스코프 제약, 구조 검사, 타입 추론을 지원하는 변수 엔진입니다.
- 05LLM, Condition, Code Editor 노드를 비롯한 즉시 사용 가능한 머티리얼입니다.
- 06명령 하나로 데모 앱을 시작할 수 있는 프로젝트 생성기입니다.
활용 사례
- 시각적 편집기를 기반으로 맞춤형 AI 워크플로 또는 에이전트 오케스트레이션 플랫폼을 구축합니다.
- 사내 자동화 도구에 노드 기반 워크플로 디자이너를 추가합니다.
- 사용자가 데이터 처리 단계를 연결하는 노코드 설정 인터페이스를 만듭니다.
- React와 TypeScript 애플리케이션에서 순서도 스타일 편집기를 프로토타이핑합니다.
빠른 시작
- 1
새 FlowGram 프로젝트를 만듭니다(Free Layout Demo 템플릿 선택)
npx @flowgram.ai/create-app@latest - 2
프로젝트 디렉터리로 이동해 종속성을 설치합니다
cd demo-free-layout npm install - 3
프로젝트를 시작합니다
npm start - 4
브라우저에서 http://localhost:3000을 엽니다
사용 전 알아둘 점
- 바로 사용할 수 있는 워크플로 플랫폼이 아니라 프레임워크이자 툴킷이므로, 이를 기반으로 자체 제품을 구축해야 합니다.
토픽
자주 묻는 질문
- flowgram.ai은(는) 무엇인가요?
- AI 워크플로 플랫폼을 구축할 수 있도록 캔버스, 폼, 변수 및 머티리얼 컴포넌트를 내장한 TypeScript 프레임워크입니다. FlowGram은 자체 시각적 워크플로 제품을 만들려는 개발자를 위한 워크플로 개발 프레임워크이자 툴킷입니다. 바로 사용할 수 있는 워크플로 플랫폼은 아닙니다. 대신 플로 캔버스, 노드 설정 폼 엔진, 변수 스코프 체인, LLM·Condition·Code Editor 같은 즉시 사용 가능한 노드 머티리얼을 기본 구성 요소로 제공합니다.
- flowgram.ai은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- flowgram.ai은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
- flowgram.ai은(는) 아직 유지보수되고 있나요?
- 활발히 유지보수 중. flowgram.ai의 마지막 커밋은 2026년 10월 13일입니다.
- flowgram.ai은(는) 어디에 사용할 수 있나요?
- 시각적 편집기를 기반으로 맞춤형 AI 워크플로 또는 에이전트 오케스트레이션 플랫폼을 구축합니다. 사내 자동화 도구에 노드 기반 워크플로 디자이너를 추가합니다. 사용자가 데이터 처리 단계를 연결하는 노코드 설정 인터페이스를 만듭니다. React와 TypeScript 애플리케이션에서 순서도 스타일 편집기를 프로토타이핑합니다.
- flowgram.ai는 어떻게 설치하나요?
- 새 FlowGram 프로젝트를 만듭니다(Free Layout Demo 템플릿 선택): npx @flowgram.ai/create-app@latest 프로젝트 디렉터리로 이동해 종속성을 설치합니다: cd demo-free-layout npm install 프로젝트를 시작합니다: npm start 브라우저에서 http://localhost:3000을 엽니다
- flowgram.ai은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/bytedance/flowgram.ai
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
자체 컴포넌트와 데이터를 렌더링에 활용하는 모듈형 오픈소스 React 비주얼 드래그 앤 드롭 에디터입니다.
시각적 캔버스, 사용자 코드, 1,500개 이상의 연동을 활용해 AI 에이전트와 워크플로를 만드는 fair-code 자동화 플랫폼
Windows 데스크톱 프로그램과 웹 페이지 자동화를 위한 시각적 로우코드 디자이너를 제공하고, AI 에이전트에서 호출할 수 있는 오픈소스 엔터프라이즈 RPA 데스크톱 앱입니다.
React와 cytoscape.js로 일반 텍스트 개요를 플로차트와 다이어그램으로 변환하는 웹앱입니다.
AI 지원 흐름 생성을 제공하는, 자동화·통합·예약 작업·HTTP 기반 워크플로 구축용 셀프 호스팅 가능한 오픈소스 시각 플랫폼입니다.