flowy은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

flowy은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

flowy은(는) 아직 유지보수되고 있나요?

6개월 이상 커밋 없음. flowy의 마지막 커밋은 2024년 7월 13일입니다.

flowy은(는) 어디에 사용할 수 있나요?

웹 앱에서 자동화 또는 워크플로 빌더 제작 연결된 노드가 있는 마인드맵 또는 다이어그램 도구 제작 간단한 비주얼 프로그래밍 인터페이스 프로토타이핑

flowy는 어떻게 설치하나요?

jsDelivr에서 스타일시트를 연결합니다: jsDelivr에서 스크립트를 연결합니다: 페이지에 canvas 요소와 드래그할 수 있는 블록을 만듭니다 canvas에서 Flowy를 초기화합니다: flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);

flowy은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/alyssaxuu/flowy

alyssaxuu/flowy

웹 앱에서 드래그하고 스냅할 수 있는 플로차트 편집기를 만드는 미니멀한 순수 JavaScript 라이브러리입니다.

GitHub에서 보기

스타: 12,143
포크: 1,043
열린 이슈: 59
마지막 커밋: 2년 전

어떤 프로젝트인가요?

Flowy는 웹 페이지에 플로차트 기능을 추가할 수 있는 의존성 없는 JavaScript 라이브러리입니다. 요소에 `create-flowy` 클래스를 지정해 드래그 가능한 블록으로 만들고 캔버스 요소에 배치하면, 사용자가 블록을 캔버스로 끌어다 놓을 때 부모 블록에 스냅되어 연결된 분기를 형성합니다.

이 라이브러리는 grab, release, snap, rearrange 이벤트에 대한 콜백을 제공하므로 코드에서 연결을 허용하거나 거부하고 사용자 동작에 반응할 수 있습니다. 플로차트 상태는 `flowy.output()`으로 JSON 구조로 내보내고 나중에 `flowy.import()`로 복원할 수 있습니다. 다만 import 메서드는 원시 HTML을 삽입하므로 신뢰할 수 있는 입력에만 사용해야 합니다. `flowy.deleteBlocks()`로 블록을 한꺼번에 삭제할 수 있지만, 개별 블록 삭제 기능은 제공하지 않습니다.

JavaScript 파일과 CSS 파일을 연결해 설치하며, 현재는 jsDelivr를 통해 제공됩니다. 모바일 기기에서도 작동합니다. npm 설치는 아직 지원되지 않는 것으로 안내되어 있습니다.

핵심 기능

01자동 스냅 및 중앙 정렬을 지원하는 드래그 앤 드롭 블록
02grab, release, snap, rearrange 이벤트 콜백
03조건부 스냅 및 조건부 블록 삭제
04플로차트 데이터를 JSON으로 내보내고 가져오기
05외부 의존성 없이 모바일에서도 작동

활용 사례

웹 앱에서 자동화 또는 워크플로 빌더 제작
연결된 노드가 있는 마인드맵 또는 다이어그램 도구 제작
간단한 비주얼 프로그래밍 인터페이스 프로토타이핑

빠른 시작

1
jsDelivr에서 스타일시트를 연결합니다
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">
2
jsDelivr에서 스크립트를 연결합니다
<script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>
3
페이지에 canvas 요소와 드래그할 수 있는 블록을 만듭니다
4
canvas에서 Flowy를 초기화합니다
flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);

사용 전 알아둘 점

아직 npm 설치를 지원하지 않습니다. CDN 링크를 사용하거나 파일을 복사하세요.
블록을 개별적으로 삭제할 수 없습니다. 한 번에 모든 블록만 삭제할 수 있습니다.
가져오기 메서드는 HTML을 새니타이즈하지 않으므로 신뢰할 수 없는 입력을 사용하면 XSS에 취약합니다.

토픽

#flowchart #drag-and-drop #javascript #diagrams #visual-programming #vanilla-js #engine #javascript-library #marketing #marketing-automation

자주 묻는 질문

flowy은(는) 무엇인가요?: 웹 앱에서 드래그하고 스냅할 수 있는 플로차트 편집기를 만드는 미니멀한 순수 JavaScript 라이브러리입니다. Flowy는 웹 페이지에 플로차트 기능을 추가할 수 있는 의존성 없는 JavaScript 라이브러리입니다. 요소에 `create-flowy` 클래스를 지정해 드래그 가능한 블록으로 만들고 캔버스 요소에 배치하면, 사용자가 블록을 캔버스로 끌어다 놓을 때 부모 블록에 스냅되어 연결된 분기를 형성합니다.
flowy은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: flowy은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
flowy은(는) 아직 유지보수되고 있나요?: 6개월 이상 커밋 없음. flowy의 마지막 커밋은 2024년 7월 13일입니다.
flowy은(는) 어디에 사용할 수 있나요?: 웹 앱에서 자동화 또는 워크플로 빌더 제작 연결된 노드가 있는 마인드맵 또는 다이어그램 도구 제작 간단한 비주얼 프로그래밍 인터페이스 프로토타이핑
flowy는 어떻게 설치하나요?: jsDelivr에서 스타일시트를 연결합니다: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css"> jsDelivr에서 스크립트를 연결합니다: <script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script> 페이지에 canvas 요소와 드래그할 수 있는 블록을 만듭니다 canvas에서 Flowy를 초기화합니다: flowy(document.getElementById("canvas"), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y);
flowy은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/alyssaxuu/flowy

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.