1. 제품
  2.   도표
  3.   JavaScript
  4.   Flowy
 
  

웹 앱에서 플로우차트를 만들고 편집하기 위한 JavaScript 라이브러리

멋진 흐름도를 손쉽게 생성하고 관리할 수 있는 웹 앱을 만드는 오픈 소스 JavaScript API입니다.

Flowy는 소프트웨어 개발자가 플로차트를 쉽게 만들고 관리하기 위한 JavaScript 웹 앱을 만들 수 있도록 하는 매우 유용한 라이브러리입니다. Flowy.js는 매우 훌륭하고 사용자 친화적인 플로차트 빌더이며 다른 라이브러리와 쉽게 통합할 수 있습니다. 이 라이브러리는 개발자가 자동화 소프트웨어, 마인드 매핑 도구, 조직도, 가계도 등을 만드는 데 도움이 됩니다. 이 Flowy 라이브러리는 오픈 소스이며 MIT 라이선스에 따라 제공되므로 자유롭게 사용할 수 있습니다.

Flowy 라이브러리는 플로차트를 쉽게 표시할 뿐만 아니라 훌륭한 인터페이스, 다양한 사용자 정의 옵션, 제스처 이벤트 리스너 및 기타 놀라운 기능을 갖춘 완전한 드래그 앤 드롭 편집기를 지원합니다. 이러한 기능 중 일부에는 자동 스내핑 지원, 자동 스크롤, 블록 재정렬, 블록 선택 및 제거, 자동 블록 중앙 정렬, 기존 파일 가져오기 및 사용, 모바일 지원, 블록 만들기 쉬움, 조건부 스내핑 등이 있습니다.

Previous Next

Flowy 시작하기

Flowy 라이브러리를 설치하는 권장 방법은 NPM을 사용하는 것입니다. 원활한 설치를 위해 다음 명령을 사용하세요.

NPM을 통해 Flowy 설치

  npm install flowy

GIT 저장소를 통한 Flowy 복제

  git clone https://github.com/alyssaxuu/flowy.gitt

JavaScript를 통한 드래그 앤 드롭을 사용하여 플로우차트 만들기

Flowy 라이브러리는 소프트웨어 개발자에게 JavaScript 앱 내에서 새 플로우차트를 만들 수 있는 기능을 제공합니다. 라이브러리에는 드래그 앤 드롭 기능을 사용하여 반응형 전문 플로우차트를 만드는 지원이 포함되었습니다. 먼저 플로우차트를 보관할 요소를 만들어야 할 수 있습니다. 그런 다음 드래그 앤 드롭으로 플로우차트에 삽입할 수 있는 미리 정의된 블록을 만들어야 합니다. 요소 간 공간 관리, 블록 이동, 블록 편집, 원치 않는 블록 제거 등과 같은 변경 사항을 쉽게 만들 수 있습니다.

무료 JavaScript 라이브러리를 통한 플로우차트 생성


        // Initialize the flowchart on the canvas div
        const canvas = document.getElementById('canvas');
        flowy(canvas);

        // Create some nodes and connect them
        const node1 = flowy.add_node('Start', 'node-1');
        const node2 = flowy.add_node('Process', 'node-2');
        flowy.connect(node1, node2);

        // Add some properties to nodes
        flowy.set_property(node1, 'color', 'blue');
        flowy.set_property(node2, 'text', 'Hello World');

        // Serialize and log the flowchart
        document.getElementById('serialize').addEventListener('click', () => {
            console.log(flowy.serialize());
        });

        // Load the serialized flowchart
        document.getElementById('load').addEventListener('click', () => {
            const json = prompt('Enter JSON:');
            flowy.load(json);
        });

JavaScript를 통한 노드 추가 및 관리

오픈 소스 Flowy 라이브러리에는 JavaScript 애플리케이션 내에서 프로그래밍 방식으로 새 노드를 추가하는 지원이 포함되었습니다. 이 라이브러리를 사용하면 소프트웨어 프로그래머가 먼저 블록을 디자인한 다음, 디자인 파일을 쉽게 내보내 지원되는 파일 형식으로 저장할 수 있습니다. 또한 소프트웨어 개발자에게 기존 블록을 가져오고, 변경하고, 몇 줄의 코드만으로 원하는 위치에 다시 저장할 수 있는 권한을 제공합니다. Flowy 팀은 또한 다이어그램의 동적 생성을 작업 중이며 곧 그 일부가 될 것입니다.

JavaScript 라이브러리를 사용하여 플로우차트에 새로운 노드를 추가하는 방법?

// create a new instance of the Flowy library
const canvas = document.getElementById("canvas");
const flowy = new Flowy(canvas);

// add a new node to the canvas

const node = flowy.addNode({
  text: "New Node",
  x: 100,
  y: 100,
  draggable: true,
  resizable: true,
  deletable: true,
});

JavaScript를 통한 플로우차트 데이터 가져오기

오픈소스 Flowy 라이브러리는 소프트웨어 개발자에게 자체 애플리케이션 내부로 플로우차트 데이터를 가져올 수 있는 기능을 제공합니다. 라이브러리에는 전체 플로우차트를 쉽게 가져오기 위한 지원이 포함되어 있습니다. 이 방법을 사용할 때는 입력이 절대적으로 신뢰할 수 있는지 확인하십시오. 그렇지 않으면 이 방법이 시스템에 취약성을 가져올 수 있습니다. 또한 플로우차트 데이터를 객체와 JSON 문자열로 가져올 수 있습니다.

JavaScript API를 사용하여 플로우차트의 데이터를 가져오는 방법?

const canvas = document.getElementById('canvas');
const flowy = new Flowy(canvas);

const data = {
  nodes: [
    { id: "node1", content: "Start", x: 100, y: 100 },
    { id: "node2", content: "Step 1", x: 250, y: 100 },
    { id: "node3", content: "Step 2", x: 250, y: 200 },
    { id: "node4", content: "End", x: 400, y: 150 }
  ],
  edges: [
    { source: "node1", target: "node2" },
    { source: "node2", target: "node3" },
    { source: "node3", target: "node4" }
  ]
};

flowy.load(data);
 한국인