FlowGram.AI: 노드 워크플로우를 빠르게 생성하는 오픈 소스 엔진

일반 소개

Flowgram.ai는 ByteDance에서 개발한 오픈 소스 프로세스 구축 엔진입니다. 노드 편집을 기반으로 하며 개발자가 워크플로를 빠르게 만들 수 있도록 도와주며, 고정 레이아웃과 자유 와이어 모드를 모두 지원합니다. 타입스크립트로 작성된 이 프로젝트의 코드는 오픈소스이며 무료인 깃허브에서 호스팅되며 2025년 3월 26일에 마지막으로 업데이트되었습니다. Flowgram.ai는 직관적인 인터페이스와 원활한 대화형 환경을 제공하여 명확한 입력과 출력으로 시각적인 워크플로를 설계할 수 있습니다. 또한 프로세스 인텔리전스를 향상시키기 위해 AI 기능을 통합할 계획입니다. 사용자는 공식 데모를 통해 온라인으로 체험하거나 로컬에 설치할 수 있습니다.

기능 목록

• 노드 편집기노드와 링크를 드래그 앤 드롭하여 워크플로를 빠르게 구축하세요.
• 듀얼 모드 지원고정 레이아웃 및 자유 링크 편집을 모두 제공합니다.
• 대화형 경험애니메이션 전환, 제스처 확대/축소, 실행 취소 등을 지원합니다.
• AI 잠재력프로세스 인텔리전스 분석을 강화하기 위해 AI를 통합할 계획입니다.
• 오픈 소스 확장코드 공개 및 개발자 커스터마이징 지원.
• 내보내기 옵션워크플로를 이미지 또는 코드로 내보낼 수 있습니다.

도움말 사용

Flowgram.ai는 온라인 데모를 통해 체험하거나 로컬에 설치하여 실행할 수 있는 개발자 도구입니다. 아래는 사용 방법에 대한 자세한 가이드입니다.

시작하는 방법

Flowgram.ai는 온라인 데모와 로컬 설치의 두 가지 사용 방법을 제공합니다.

온라인 경험

1. 브라우저를 열고 공식 데모를 방문하세요:
   • 레이아웃이 수정되었습니다:https://flowgram.ai/examples/fixed-layout/fixed-feature-overview.html
   • 무료 연결:https://flowgram.ai/examples/free-layout/free-feature-overview.html
2. 캔버스에 들어가면 설치 없이 바로 작업할 수 있습니다.

로컬 설치

1. 환경 준비하기::
   • Node.js 18+를 설치하고 실행합니다:nvm install lts/hydrogen를 클릭하고 기본 버전을 설정합니다:nvm alias default lts/hydrogen전환:nvm use lts/hydrogen.
   • 글로벌 종속성을 설치합니다:npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0.
2. 클론 창고::
   • 실행 중입니다:git clone git@github.com:bytedance/flowgram.ai.git.
3. 종속성 설치::
   • 폴더로 이동합니다:cd flowgram.ai.
   • 종속성 업데이트:rush update.
4. 프로젝트 빌드::
   • 실행 중입니다:rush build.
5. 데모 실행::
   • 문서화:rush dev:docs.
   • 고정 레이아웃 데모:rush dev:demo-fixed-layout.
   • 무료 연결 데모:rush dev:demo-free-layout.
6. 브라우저에서 액세스 http://localhost(로그에 의해 확인된 포트).

npx를 통한 빠른 설치

• 실행 중입니다:npx @flowgram.ai/create-app@latest.
• 데모를 선택합니다:
  • fixed-layout: 고정 레이아웃 모범 사례.
  • free-layout: 무료 레이아웃 모범 사례.
  • fixed-layout-simple: 고정 레이아웃 기본 사용법.
  • free-layout-simple: 무료 레이아웃 기본 사용법.

npm을 통한 모듈 설치

• 고정 레이아웃 편집기:npm install @flowgram.ai/fixed-layout-editor.
• 프리링크 편집기:npm install @flowgram.ai/free-layout-editor.

주요 기능

워크플로 만들기

• 편집 인터페이스에 들어가면 왼쪽 도구 모음에 노드 유형(예: 조건부, 주기적)이 표시됩니다.
• 노드를 캔버스로 드래그하고 입력(예: "시작")을 두 번 클릭합니다.
• 화살표로 노드를 연결하여 프로세스를 완료합니다.

고정 레이아웃 모드

• 고정 레이아웃 데모를 열거나 fixed-layout.
• 노드 위치는 고정되어 있으며 지정된 위치로 드래그 앤 드롭을 지원합니다.
• 가지와 루프를 추가할 수 있으며 오른쪽 패널에서 스타일을 조정할 수 있습니다.

프리와이어 모드

• 무료 링크 데모를 열거나 free-layout.
• 노드는 임의로 배치할 수 있으며 연결 선은 자유롭게 그릴 수 있습니다.
• 자동 데이터 정렬 및 흡착 정렬 기능을 지원합니다.

대화형 기능

• 줌 드래그Mac 트랙패드에서 두 손가락으로 확대/축소하고 스페이스를 눌러 캔버스를 드래그합니다.
• 애니메이션 전환노드가 움직이면 선이 부드럽게 바뀝니다.
• 실행 취소Ctrl+Z 및 Ctrl+Y로 조작합니다.
• 복사하여 붙여넣기상자 노드, Ctrl+C 복사, Ctrl+V 붙여넣기.

주요 기능

듀얼 모드 설계

고정 레이아웃은 노드 위치가 고정되어 있고 분기 및 접기를 지원하는 프로젝트 계획과 같은 구조화된 프로세스에 적합합니다. 자유 연결은 마인드맵과 같은 유연한 디자인에 적합하며 노드 위치는 임의적이고 자유롭게 연결할 수 있습니다.

AI 지원

Flowgram.ai는 흐름 경로 자동 최적화와 같은 AI 기능을 도입할 계획입니다. 현재 개발 중이므로 자세한 내용은 GitHub에서 계속 지켜봐 주세요.

오픈 소스 지원

개발자는 코드를 수정할 수 있습니다. 예를 들어 새 노드 유형을 추가하려면 새 노드 유형의 @flowgram.ai/free-layout-editor 패키지를 만들어 제출합니다.

주의

• 온라인 데모는 저장을 지원하지 않으므로 전체 기능을 경험하려면 로컬에 설치해야 합니다.
• 종속성을 처음 설치하려면 인터넷 연결이 필요하며 속도가 느려질 수 있습니다.
• 공식 문서(https://flowgram.ai/)는 지속적으로 업데이트되며, 자세한 내용은 GitHub를 참조하세요. README.md.

이 단계를 통해 Flowgram.ai로 워크플로를 빠르게 구축할 수 있습니다.

애플리케이션 시나리오

1. 프로젝트 관리
   단계와 분업이 명확하게 표시되는 고정 레이아웃으로 작업 흐름을 설계하세요.
2. 소프트웨어 개발
   자유롭게 연결되는 선을 사용하여 코드의 순서도를 그려 데이터의 흐름을 표시하세요.
3. 교육 데모
   교사는 노드 기반 워크플로우를 사용하여 개념을 설명하고, 이를 내보내 학생들과 공유합니다.

QA

1. Flowgram.ai는 무료인가요?
   예, 오픈 소스 프로젝트이며 코드는 무료로 사용할 수 있고 기능은 자체적으로 배포해야 합니다.
2. 중국어를 지원하나요?
   노드 콘텐츠는 중국어 입력을 지원하며 인터페이스는 영어로 되어 있습니다.
3. 워크플로를 저장하려면 어떻게 하나요?
   온라인 데모는 저장할 수 없으며, 로컬 버전은 이미지 또는 코드를 내보낼 수 있습니다.