캔버스·편집기·다이어그램
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
Konva Konva
도형·레이어·이벤트를 갖춘 2D 캔버스 객체 모델을 제공하는 도구.
상품 편집기·부스 2D 배치·주석 UI.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Fabric.js Fabric.js
캔버스 객체 편집·선택·직렬화 등을 제공하는 라이브러리.
디자인 에디터·이미지 조합 도구.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Paper.js Paper.js
벡터 경로·기하·그리기 기능을 제공하는 그래픽 라이브러리.
일러스트·벡터 상호작용.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
p5.js p5.js
그리기·입력·애니메이션을 간단히 실험하는 크리에이티브 코딩 도구.
생성형 아트·인터랙티브 프로토타입.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Two.js Two.js
2D 도형과 변환을 여러 렌더러로 표현하는 그래픽 라이브러리.
벡터 애니메이션·도형 기반 콘텐츠.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Rough.js Rough.js
손으로 그린 듯한 선과 도형을 생성하는 도구.
화이트보드·스케치형 시각화.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
tldraw SDK tldraw SDK
무한 캔버스·도형·상호작용을 구축하는 화이트보드 SDK.
협업 화이트보드·시각 편집기.
SDK 배포와 상업 사용 조건을 공식 라이선스에서 확인한다.
Excalidraw Excalidraw
손그림 스타일 도형으로 구성하는 화이트보드와 임베드 가능한 편집기.
아이디어 스케치·흐름 설명.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
React Flow React Flow
노드·연결선·선택·줌을 제공하는 노드 편집기 라이브러리.
워크플로·MCP 도구 흐름·그래프 편집.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Svelte Flow Svelte Flow
Svelte 환경에서 노드 기반 화면을 만드는 라이브러리.
워크플로·관계 편집기.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Cytoscape.js Cytoscape.js
그래프 데이터의 표시·레이아웃·분석을 제공하는 도구.
네트워크·관계·온톨로지 시각화.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Sigma.js Sigma.js
네트워크 그래프를 GPU 기반으로 표시하는 도구.
큰 관계 그래프의 탐색.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Graphology Graphology
그래프 데이터 구조와 관련 연산을 제공하는 라이브러리.
관계 데이터 모델·레이아웃 전처리.
표시용 렌더러와 구분되는 그래프 데이터 처리 도구다.
ELK.js ELK.js
복잡한 그래프의 자동 배치를 계산하는 레이아웃 엔진.
노드·다이어그램 정렬.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Dagre Dagre
방향 그래프를 계층적으로 배치하는 레이아웃 도구.
워크플로·의존 관계 다이어그램.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Mermaid Mermaid
텍스트 문법에서 순서도·시퀀스·관계도 등을 생성하는 도구.
문서 안의 재현 가능한 다이어그램.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
JointJS JointJS
상호작용 다이어그램과 연결된 도형을 만드는 도구.
프로세스 모델러·다이어그램 편집기.
오픈소스 코어와 상용 제품 범위를 구분한다.
Tiptap Tiptap
ProseMirror 기반의 확장 가능한 리치 텍스트 편집기 도구군.
문서·콘텐츠 편집 UI.
코어 확장과 유료·호스팅 기능의 범위를 구분한다.
ProseMirror ProseMirror
문서 스키마·트랜잭션·편집 상태를 제공하는 리치 텍스트 기반.
맞춤 문서 편집기.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Lexical Lexical
편집 상태와 확장 구조를 제공하는 텍스트 에디터 프레임워크.
맞춤 리치 텍스트 UI.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Monaco Editor Monaco Editor
코드 편집·언어 지원 기능을 제공하는 웹 코드 에디터.
웹 IDE·스크립트 편집 화면.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
CodeMirror CodeMirror
확장 가능한 웹 코드·텍스트 편집기.
임베드 코드 편집·쿼리 입력.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Canvas, Editors & Diagrams
Open an entry for its visual reference, comparisons and source-language text.
Konva Konva
A toolkit providing a 2D canvas object model with shapes, layers, and events.
Product editors, 2D booth layouts, and annotation interfaces.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Fabric.js Fabric.js
A library providing canvas-object editing, selection, and serialization.
Design editors and image-composition tools.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Paper.js Paper.js
A graphics library for vector paths, geometry, and drawing.
Illustration and vector interactions.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
p5.js p5.js
A creative-coding toolkit for experimenting with drawing, input, and animation.
Generative art and interactive prototypes.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Two.js Two.js
A graphics library representing 2D shapes and transformations through multiple renderers.
Vector animation and shape-based content.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Rough.js Rough.js
A tool generating hand-drawn-looking lines and shapes.
Whiteboards and sketch-style visualizations.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
tldraw SDK tldraw SDK
A whiteboard SDK for building infinite canvases, shapes, and interactions.
Collaborative whiteboards and visual editors.
Check the official license for SDK distribution and commercial use.
Excalidraw Excalidraw
A whiteboard and embeddable editor using hand-drawn-style shapes.
Idea sketches and flow explanations.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
React Flow React Flow
A node-editor library providing nodes, edges, selection, and zooming.
Workflow, MCP tool-flow, and graph editing.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Svelte Flow Svelte Flow
A library for building node-based interfaces in Svelte.
Workflow and relationship editors.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Cytoscape.js Cytoscape.js
A toolkit for displaying, laying out, and analyzing graph data.
Network, relationship, and ontology visualization.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Sigma.js Sigma.js
A toolkit displaying network graphs using GPU rendering.
Exploring large relationship graphs.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Graphology Graphology
A library providing graph data structures and associated operations.
Graph data models and layout preprocessing.
This processes graph data rather than rendering it for display.
ELK.js ELK.js
A layout engine computing automatic arrangements for complex graphs.
Arranging nodes and diagrams.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Dagre Dagre
A layout tool arranging directed graphs hierarchically.
Workflow and dependency diagrams.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Mermaid Mermaid
A tool generating flowcharts, sequence diagrams, relationship diagrams, and more from text syntax.
Reproducible diagrams inside documentation.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
JointJS JointJS
A toolkit for interactive diagrams and connected shapes.
Process modelers and diagram editors.
Distinguish the open-source core from commercial products.
Tiptap Tiptap
An extensible rich-text editor toolkit based on ProseMirror.
Document and content-editing interfaces.
Distinguish core extensions from paid and hosted features.
ProseMirror ProseMirror
A rich-text editing foundation providing document schemas, transactions, and editor state.
Custom document editors.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Lexical Lexical
A text-editor framework providing editor state and an extension architecture.
Custom rich-text interfaces.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Monaco Editor Monaco Editor
A web code editor with code-editing and language-support capabilities.
Web IDEs and script editors.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
CodeMirror CodeMirror
An extensible web code and text editor.
Embedded code editors and query inputs.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.