- Notifications
You must be signed in to change notification settings - Fork1.8k
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
License
NotificationsYou must be signed in to change notification settings
antvis/X6
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
简体中文 |English
X6 是 AntV 旗下的图编辑引擎
提供简单易用的节点定制能力和开箱即用的交互组件，方便我们快速搭建流程图、DAG 图、ER 图等图应用
- 🌱 极易定制：支持使用 SVG/HTML/React/Vue/Angular 定制节点样式和交互
- 🚀 开箱即用：内置 10+ 图编辑配套扩展，如框选、对齐线、小地图等
- 🧲 数据驱动：基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑
- 💯 事件驱动：完备的事件系统，可以监听图表内发生的任何事件
- 现代浏览器
- 支持服务端渲染。
 Firefox |  Chrome |  Safari |
|---|---|---|
| last 2 versions | last 2 versions | last 2 versions |
# npm$ npm install @antv/x6 --save# yarn$ yarn add @antv/x6
<divid="container"style="width: 600px; height: 400px"></div>
import{Graph}from'@antv/x6'constgraph=newGraph({container:document.getElementById('container'),grid:true,})constsource=graph.addNode({x:300,y:40,width:80,height:40,label:'Hello',})consttarget=graph.addNode({x:420,y:180,width:80,height:40,label:'World',})graph.addEdge({ source, target,})
# 安装项目依赖和初始化构建$ pnpm install# 进入到指定项目开发和调试cd packages/x6pnpm run build:watch# 启动 example 查看效果cd examples/x6-example-featurespnpm run start
如果希望参与到 X6 的开发中，请遵从我们的贡献指南。如果你贡献度足够活跃，你可以申请成为社区协作者。
该项目的代码和文档基于MIT License 开源协议。
About
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.