LogicFlow는 비즈니스 맞춤형 플로우차트 편집에 특화된 프레임워크로, 마인드맵, ER 다이어그램, UML, 워크플로우 등 다양한 다이어그램 편집 시나리오를 지원합니다. 이 라이브러리는 플로우차트 상호작용 및 편집에 필요한 핵심 기능과 함께 간단하고 유연한 노드 커스터마이징, 플러그인 확장 메커니즘을 제공합니다.

프로젝트 아키텍처

LogicFlow는 모듈식 설계를 채택하여 핵심 기능과 확장 기능을 분리합니다. 주요 모듈은 다음과 같습니다:

• 핵심 모듈 (packages/core/): 노드 관리, 엣지 연결, 텍스트 편집 등 기본 플로우차트 편집 기능 제공
• 확장 모듈 (packages/extension/): BPMN 어댑터, 노드 크기 조정, 마인드맵 등 고급 기능 포함
• 엔진 모듈: 브라우저에서 플로우차트 로직을 직접 실행 가능
• 레이아웃 모듈: 자동 레이아웃을 통해 다이어그램 가독성 향상

시작 가이드

설치

프로젝트를 클론합니다:

git clone https://gitcode.com/GitHub_Trending/lo/LogicFlow

의존성을 설치합니다:

pnpm install

개발 서버 실행

cd examples/feature-examples
pnpm run start

기본 사용법

HTML 컨테이너를 생성합니다:

<div id="container"></div>

JavaScript로 LogicFlow를 초기화합니다:

const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600,
});

const data = {
  nodes: [
    { id: '1', type: 'rect', x: 100, y: 100, text: '시작 노드' },
    { id: '2', type: 'circle', x: 300, y: 200, text: '처리 노드' }
  ],
  edges: [
    { type: 'polyline', sourceNodeId: '1', targetNodeId: '2' }
  ]
};

lf.render(data);

핵심 설정 옵션

테마 커스터마이징

lf.setTheme({
  nodeText: { color: '#000000', fontSize: 12 },
  edgeText: { color: '#000000', fontSize: 10 }
});

고급 기능

사용자 정의 노드

lf.register({
  type: 'custom-node',
  view: CustomNodeView,
  model: CustomNodeModel
});

플러그인 활용

const lf = new LogicFlow({
  container: document.querySelector('#container'),
  plugins: ['node-resize', 'bpmn-elements']
});

데이터 변환

lf.adapterIn = (data) => {
  // 외부 데이터를 LogicFlow 형식으로 변환
  return formattedData;
};

lf.adapterOut = (data) => {
  // LogicFlow 데이터를 외부 형식으로 변환
  return externalData;
};

프로덕션 환경 권장 설정

1. 정렬선 활성화: 노드 위치 정확도 향상
2. 격자 설정: 레이아웃 정렬 지원
3. 단축키 설정: 편집 효율성 향상
4. 테마 적용: 시각적 일관성 유지

이러한 설정을 통해 LogicFlow를 비즈니스 시스템에 완벽하게 통합하여 프로세스 설계 및 데이터 시각화에 활용할 수 있습니다.