DevExtreme React Diagram

DevExpress다이어그램 작성 도구JavaScript

React 애플리케이션에서 대화형 다이어그램을 만들고 사용자 지정하세요.

  • 효과적인 다이어그램 렌더링을 위해 React에 직접 통합됩니다.
  • 동적 다이어그램 콘텐츠를 위한 데이터 바인딩을 지원합니다.
  • 광범위한 UI 사용자 지정과 편집 도구를 제공합니다.
DevExpress logo

가격:

로딩 중...
다음에서 사용 가능
DevExtreme Complete로딩 중
DevExpress DXperience로딩 중
DevExpress Universal로딩 중
DevExpress VCL Subscription +로딩 중
선택에 도움이 필요하신가요? 구매 방법과 사양을 확인하세요.
DevExtreme React Diagram 제품 이미지
DevExtreme React Diagram을 사용하면 개발자가 애플리케이션 내에서 기능이 풍부하고 편집 가능한 다이어그램을 구축할 수 있습니다. 노드와 엣지를 데이터 소스에 바인딩하는 기능을 지원하고, 사용자 지정 가능한 도형 라이브러리를 포함하며, 사용자 상호작용과 다이어그램 수정을 위한 도구 상자와 패널을 제공하여 다양한 비즈니스 또는 기술 시각화 요구에 적합합니다.

사용자 지정 가능한 도형 라이브러리

내장 및 확장 가능한 도형을 포함하며, 템플릿과 아이콘을 갖춘 사용자 지정 도형을 지원하여 특정 도메인 요구사항에 맞춘 시각적 표현을 제공합니다.

데이터 바인딩 지원

다이어그램 노드와 엣지를 데이터 소스에 동적으로 바인딩할 수 있으며, 계층 관계와 텍스트 레이블을 관리하여 구조화된 데이터로부터 실시간 다이어그램 생성을 지원합니다.

대화형 편집 도구

도형과 커넥터를 추가, 삭제, 이동, 크기 조정하는 기능을 포함한 다양한 편집 작업을 제공하며, 사용자 작업을 제어하거나 제한할 수 있는 이벤트 훅을 제공합니다.

UI 사용자 지정 옵션

구성 가능한 도구 상자, 속성 패널, 컨텍스트 메뉴, 툴바를 통해 직관적이고 제어된 다이어그램 편집 환경에 맞게 사용자 인터페이스를 조정할 수 있습니다.

레이아웃 및 보기 구성

크기, 색상, 방향, 그리드 표시, 스냅, 확대/축소 수준과 같은 페이지 설정을 지원하며, 사용 가능한 공간을 최대한 활용할 수 있는 단순 보기 모드도 포함합니다.

내보내기 기능

다이어그램을 PNG, JPEG, SVG와 같은 인기 이미지 형식과 JSON 데이터로 내보낼 수 있어, 공유, 인쇄 또는 다이어그램 상태 저장을 용이하게 합니다.

이벤트 처리 및 수명 주기 관리

콘텐츠 준비 완료, 항목 클릭, 선택 변경, 수명 주기 이벤트와 같은 포괄적인 이벤트 콜백을 제공하여 애플리케이션 로직과 통합하고 사용자 상호작용을 효율적으로 처리할 수 있습니다.

접근성 및 RTL 지원

오른쪽에서 왼쪽으로 진행되는 레이아웃과 접근성 기능을 지원하여 다양한 사용자 요구를 지원하는 국제화된 애플리케이션에서 다이어그램을 사용할 수 있게 합니다.

제품 호환성

아래의 세부 정보를 확인하여 이 제품이 사용 환경에서 지원되는지 확인하세요.

컴포넌트 유형

  • JavaScript

JavaScript 플랫폼

  • React