# X6

> JavaScript 图编辑引擎

Find relevant documents and examples under your language below, then read their Markdown links for content and source code.

## Agent resources

- [Full documentation](/llms-full.txt): Combined Markdown content for all published documents.
- [Site](/zh/)
- [Source repository](https://github.com/antvis/x6)
- Languages: zh, en
- Current version: 3.x

## 中文文档

### api

- [画布](/zh/api/graph/graph.md)
- [元素](/zh/api/model/cell.md)
- [节点](/zh/api/model/node.md)
- [模型](/zh/api/mvc/model.md)
- [网格](/zh/api/graph/grid.md)
- [边](/zh/api/model/edge.md)
- [背景](/zh/api/graph/background.md)
- [标签](/zh/api/model/labels.md)
- [节点工具](/zh/api/registry/node-tool.md)
- [画布平移](/zh/api/graph/panning.md)
- [箭头](/zh/api/model/marker.md)
- [边上工具](/zh/api/registry/edge-tool.md)
- [画布缩放](/zh/api/graph/mousewheel.md)
- [元素属性](/zh/api/model/attrs.md)
- [路由](/zh/api/registry/router.md)
- [视口变换](/zh/api/graph/transform.md)
- [交互](/zh/api/model/interaction.md)
- [连接器](/zh/api/registry/connector.md)
- [坐标系](/zh/api/graph/coordinate.md)
- [视图](/zh/api/mvc/view.md)
- [节点的锚点](/zh/api/registry/node-anchor.md)
- [边的锚点](/zh/api/registry/edge-anchor.md)
- [连接点](/zh/api/registry/connection-point.md)
- [连接桩布局](/zh/api/registry/port-layout.md)
- [连接桩标签布局](/zh/api/registry/port-label-layout.md)
- [属性](/zh/api/registry/attr.md)
- [高亮器](/zh/api/registry/highlighter.md)
- [滤镜](/zh/api/registry/filter.md)

### tutorial

- [简介](/zh/tutorial/about.md)
- [画布](/zh/tutorial/basic/graph.md)
- [连接点](/zh/tutorial/intermediate/connection-point.md)
- [图形变换](/zh/tutorial/plugins/transform.md)
- [节点](/zh/tutorial/basic/node.md)
- [快速上手](/zh/tutorial/getting-started.md)
- [对齐线](/zh/tutorial/plugins/snapline.md)
- [边](/zh/tutorial/basic/edge.md)
- [工具](/zh/tutorial/intermediate/tools.md)
- [复制粘贴](/zh/tutorial/plugins/clipboard.md)
- [连接桩](/zh/tutorial/basic/port.md)
- [群组](/zh/tutorial/intermediate/group.md)
- [快捷键](/zh/tutorial/plugins/keyboard.md)
- [交互](/zh/tutorial/basic/interacting.md)
- [React 节点](/zh/tutorial/intermediate/react.md)
- [撤销重做](/zh/tutorial/plugins/history.md)
- [事件](/zh/tutorial/basic/events.md)
- [Vue 节点](/zh/tutorial/intermediate/vue.md)
- [框选](/zh/tutorial/plugins/selection.md)
- [升级到 3.x 版本](/zh/tutorial/update.md)
- [数据](/zh/tutorial/basic/serialization.md)
- [开发者工具](/zh/tutorial/devtool.md)
- [Angular 节点](/zh/tutorial/intermediate/angular.md)
- [滚动画布](/zh/tutorial/plugins/scroller.md)
- [动画](/zh/tutorial/basic/animation.md)
- [HTML 节点](/zh/tutorial/intermediate/html.md)
- [Dnd](/zh/tutorial/plugins/dnd.md)
- [小地图](/zh/tutorial/plugins/minimap.md)
- [Stencil](/zh/tutorial/plugins/stencil.md)
- [导出](/zh/tutorial/plugins/export.md)
- [引脚编辑器](/zh/tutorial/plugins/port-editor.md)

## 中文示例

- [OSCP 活动](/zh/examples/animation/case/oscp.md)
- [路线规划图](/zh/examples/animation/case/route-planning.md)
- [炫酷散射动画](/zh/examples/animation/case/scattering.md)
- [基本使用](/zh/examples/animation/usage/basic.md)
- [呼吸效果](/zh/examples/animation/usage/breathing-circle.md)
- [组合动画](/zh/examples/animation/usage/composition.md)
- [控制动画播放](/zh/examples/animation/usage/control.md)
- [CSS动画](/zh/examples/animation/usage/css.md)
- [自定义属性动画](/zh/examples/animation/usage/custom-attr.md)
- [边动画](/zh/examples/animation/usage/edge.md)
- [涟漪效果](/zh/examples/animation/usage/ripple-circle.md)
- [二次贝塞尔曲线](/zh/examples/edge/connector/curve.md)
- [跳线](/zh/examples/edge/connector/jumpover.md)
- [多条光滑曲线](/zh/examples/edge/connector/multiple-smooth-edges.md)
- [默认连线](/zh/examples/edge/connector/normal.md)
- [圆角连线](/zh/examples/edge/connector/rounded.md)
- [平滑连线（三次贝塞尔曲线）](/zh/examples/edge/connector/smooth.md)
- [随机摇摆线](/zh/examples/edge/connector/wobble.md)
- [交错背景色](/zh/examples/edge/edge/cross-fill.md)
- [自定义点击事件](/zh/examples/edge/edge/custom-click-event.md)
- [默认边](/zh/examples/edge/edge/edge.md)
- [渐变背景色](/zh/examples/edge/edge/gradient.md)
- [沿边长度方向上的图形](/zh/examples/edge/edge/shape-on-edge.md)
- [沿路径的 Label](/zh/examples/edge/label/label-along-path.md)
- [渲染多个 Label](/zh/examples/edge/label/multi-labels.md)
- [使用 HTML 渲染 Label](/zh/examples/edge/label/render-with-html.md)
- [使用 React 渲染 Label](/zh/examples/edge/label/render-with-react.md)
- [使用 SVG 渲染 Label](/zh/examples/edge/label/render-with-svg.md)
- [自定义复杂箭头](/zh/examples/edge/marker/custom-marker.md)
- [使用 image 自定义箭头](/zh/examples/edge/marker/image-marker.md)
- [内置箭头](/zh/examples/edge/marker/native-markers.md)
- [使用 path 自定义箭头](/zh/examples/edge/marker/path-marker.md)
- [使用图形元素自定义箭头](/zh/examples/edge/marker/shape-marker.md)
- [自定义随机路由](/zh/examples/edge/router/custom-random-router.md)
- [关系路由](/zh/examples/edge/router/er-center.md)
- [关系路由](/zh/examples/edge/router/er-normal.md)
- [智能路由](/zh/examples/edge/router/manhattan.md)
- [智能地铁路由](/zh/examples/edge/router/metro.md)
- [默认路由](/zh/examples/edge/router/normal.md)
- [单侧路由](/zh/examples/edge/router/one-side.md)
- [拐线](/zh/examples/edge/router/orth-normal.md)
- [正交线](/zh/examples/edge/router/orth-vertices.md)
- [调整箭头](/zh/examples/edge/tool/arrowheads.md)
- [包围框](/zh/examples/edge/tool/boundary.md)
- [自定义按钮](/zh/examples/edge/tool/button.md)
- [删除按钮](/zh/examples/edge/tool/button-remove.md)
- [右键菜单](/zh/examples/edge/tool/context-menu.md)
- [调整线段](/zh/examples/edge/tool/segments.md)
- [Tooltip](/zh/examples/edge/tool/tooltip.md)
- [调整顶点](/zh/examples/edge/tool/vertices.md)
- [环形布局](/zh/examples/layout/general/circle.md)
- [同心圆布局](/zh/examples/layout/general/concentric-circles.md)
- [Dagre](/zh/examples/layout/general/dagre.md)
- [椭圆布局](/zh/examples/layout/general/ellipse.md)
- [力导向布局](/zh/examples/layout/general/force.md)
- [网格布局](/zh/examples/layout/general/grid.md)
- [脑图树](/zh/examples/layout/tree/mindmap.md)
- [使用 SVG 自定义图标](/zh/examples/node/custom-node/custom-icon-with-svg.md)
- [使用 React 自定节点](/zh/examples/node/custom-node/custom-with-react.md)
- [使用 SVG 自定义节点](/zh/examples/node/custom-node/custom-with-svg.md)
- [Cylinder](/zh/examples/node/custom-node/cylinder.md)
- [自定义开关节点](/zh/examples/node/custom-node/switch.md)
- [折叠/展开父节点](/zh/examples/node/group/collapsable.md)
- [拖入/拖出父节点](/zh/examples/node/group/embedding-by-dnd.md)
- [自动更新边的父节点](/zh/examples/node/group/embedding-edges.md)
- [嵌套节点](/zh/examples/node/group/embedding-nodes.md)
- [自动扩展/收缩父节点](/zh/examples/node/group/expand-shrink.md)
- [限制子节点的移动范围](/zh/examples/node/group/restrict-movement.md)
- [Circle](/zh/examples/node/native-node/circle.md)
- [Ellipse](/zh/examples/node/native-node/ellipse.md)
- [Image](/zh/examples/node/native-node/image.md)
- [Path](/zh/examples/node/native-node/path.md)
- [Polygon](/zh/examples/node/native-node/polygon.md)
- [Polyline](/zh/examples/node/native-node/polyline.md)
- [Rectangle](/zh/examples/node/native-node/rect.md)
- [文本](/zh/examples/node/native-node/text-block.md)
- [连接到连接桩](/zh/examples/node/port/connect-to-port.md)
- [默认连接桩](/zh/examples/node/port/default.md)
- [添加或移除连接桩](/zh/examples/node/port/dynamic.md)
- [使用 Group 定义连接桩样式](/zh/examples/node/port/group.md)
- [连接桩标签](/zh/examples/node/port/label.md)
- [位于节点内部或外部的标签](/zh/examples/node/port/port-label-position-in-out.md)
- [位于椭圆外围的标签](/zh/examples/node/port/port-label-position-radial.md)
- [位于连接桩一侧的标签](/zh/examples/node/port/port-label-position-side.md)
- [绝对定位的连接桩](/zh/examples/node/port/port-position-absolute.md)
- [自定义连接桩位置](/zh/examples/node/port/port-position-custom.md)
- [沿椭圆分布的连接桩](/zh/examples/node/port/port-position-ellipse.md)
- [沿圆弧自动旋转的连接桩](/zh/examples/node/port/port-position-ellipse-compensation.md)
- [沿椭圆均匀分布的连接桩](/zh/examples/node/port/port-position-ellipse-spread.md)
- [沿任意直线均匀分布的连接桩](/zh/examples/node/port/port-position-line.md)
- [沿矩形边框均匀分布的连接桩](/zh/examples/node/port/port-position-side.md)
- [使用 React 渲染连接桩](/zh/examples/node/port/render-port-with-react.md)
- [包围框](/zh/examples/node/tool/boundary.md)
- [自定义按钮](/zh/examples/node/tool/button.md)
- [删除按钮](/zh/examples/node/tool/button-remove.md)
- [文本编辑](/zh/examples/node/tool/editable.md)
- [连接桩 ToolTip](/zh/examples/node/tool/port-tooltip.md)
- [智能体流程编排](/zh/examples/showcase/practices/agentflow.md)
- [BPMN](/zh/examples/showcase/practices/bpmn.md)
- [UML 类图](/zh/examples/showcase/practices/class.md)
- [复杂时间轴](/zh/examples/showcase/practices/complextimeline.md)
- [人工智能建模 DAG 图](/zh/examples/showcase/practices/dag.md)
- [数据加工 DAG 图](/zh/examples/showcase/practices/dataprocessingdag.md)
- [ELK](/zh/examples/showcase/practices/elk.md)
- [ER 图](/zh/examples/showcase/practices/er.md)
- [流程图](/zh/examples/showcase/practices/flowchart.md)
- [思维导图](/zh/examples/showcase/practices/mindmap.md)
- [组织架构图](/zh/examples/showcase/practices/org.md)
- [组织架构图（自动布局）](/zh/examples/showcase/practices/orgchart.md)
- [框选批量拖拽多节点](/zh/examples/showcase/practices/selectiondrag.md)
- [简单时间轴](/zh/examples/showcase/practices/timeline.md)
- [展开/折叠树](/zh/examples/showcase/practices/tree.md)
- [多节点虚拟渲染](/zh/examples/showcase/practices/virtualrender.md)

## English documentation

### api

- [Graph](/en/api/graph/graph.md)
- [Cell](/en/api/model/cell.md)
- [Node](/en/api/model/node.md)
- [Model](/en/api/mvc/model.md)
- [Grid](/en/api/graph/grid.md)
- [Edge](/en/api/model/edge.md)
- [Background](/en/api/graph/background.md)
- [Labels](/en/api/model/labels.md)
- [Node Tools](/en/api/registry/node-tool.md)
- [Panning](/en/api/graph/panning.md)
- [Arrow](/en/api/model/marker.md)
- [Edge Tools](/en/api/registry/edge-tool.md)
- [Mousewheel](/en/api/graph/mousewheel.md)
- [Element Attributes](/en/api/model/attrs.md)
- [Routing](/en/api/registry/router.md)
- [Viewport Transformation](/en/api/graph/transform.md)
- [Interaction](/en/api/model/interaction.md)
- [Connector](/en/api/registry/connector.md)
- [Coordinate Systems](/en/api/graph/coordinate.md)
- [View](/en/api/mvc/view.md)
- [Node Anchor](/en/api/registry/node-anchor.md)
- [Edge Anchor](/en/api/registry/edge-anchor.md)
- [Connection Point](/en/api/registry/connection-point.md)
- [Port Layout Algorithm](/en/api/registry/port-layout.md)
- [Port Label Layout](/en/api/registry/port-label-layout.md)
- [Attributes](/en/api/registry/attr.md)
- [Highlighter](/en/api/registry/highlighter.md)
- [Filter](/en/api/registry/filter.md)

### tutorial

- [Introduction](/en/tutorial/about.md)
- [Graph](/en/tutorial/basic/graph.md)
- [Connection Points](/en/tutorial/intermediate/connection-point.md)
- [Graphic Transformations](/en/tutorial/plugins/transform.md)
- [Nodes](/en/tutorial/basic/node.md)
- [Quickstart](/en/tutorial/getting-started.md)
- [Snapline](/en/tutorial/plugins/snapline.md)
- [Edges](/en/tutorial/basic/edge.md)
- [Tools](/en/tutorial/intermediate/tools.md)
- [Clipboard](/en/tutorial/plugins/clipboard.md)
- [Ports](/en/tutorial/basic/port.md)
- [Group](/en/tutorial/intermediate/group.md)
- [Keyboard](/en/tutorial/plugins/keyboard.md)
- [Interaction](/en/tutorial/basic/interacting.md)
- [React Nodes](/en/tutorial/intermediate/react.md)
- [History](/en/tutorial/plugins/history.md)
- [Events](/en/tutorial/basic/events.md)
- [Vue Nodes](/en/tutorial/intermediate/vue.md)
- [Selection](/en/tutorial/plugins/selection.md)
- [Upgrade to 3.x](/en/tutorial/update.md)
- [Data Serialization](/en/tutorial/basic/serialization.md)
- [Developer Tools](/en/tutorial/devtool.md)
- [Angular Nodes](/en/tutorial/intermediate/angular.md)
- [Scroller](/en/tutorial/plugins/scroller.md)
- [Animation](/en/tutorial/basic/animation.md)
- [HTML Nodes](/en/tutorial/intermediate/html.md)
- [Dnd](/en/tutorial/plugins/dnd.md)
- [Mini Map](/en/tutorial/plugins/minimap.md)
- [Stencil](/en/tutorial/plugins/stencil.md)
- [Export](/en/tutorial/plugins/export.md)
- [Port Editor](/en/tutorial/plugins/port-editor.md)

## English examples

- [OSCP activity](/en/examples/animation/case/oscp.md)
- [Route planning graph](/en/examples/animation/case/route-planning.md)
- [Cool scatter Animation](/en/examples/animation/case/scattering.md)
- [Basic usage](/en/examples/animation/usage/basic.md)
- [Breathing effect](/en/examples/animation/usage/breathing-circle.md)
- [Composition animation](/en/examples/animation/usage/composition.md)
- [Control animation playback](/en/examples/animation/usage/control.md)
- [CSS animation](/en/examples/animation/usage/css.md)
- [Custom attribute animation](/en/examples/animation/usage/custom-attr.md)
- [Edge animation](/en/examples/animation/usage/edge.md)
- [ripple effect](/en/examples/animation/usage/ripple-circle.md)
- [Quadratic Bessel Curve](/en/examples/edge/connector/curve.md)
- [Jumpover Connector](/en/examples/edge/connector/jumpover.md)
- [Multiple Smooth Edges](/en/examples/edge/connector/multiple-smooth-edges.md)
- [Normal Connector](/en/examples/edge/connector/normal.md)
- [Rounded Connector](/en/examples/edge/connector/rounded.md)
- [Smooth Connector](/en/examples/edge/connector/smooth.md)
- [Custom Wobble Connector](/en/examples/edge/connector/wobble.md)
- [Cross Filled Edge](/en/examples/edge/edge/cross-fill.md)
- [Custom Click Event](/en/examples/edge/edge/custom-click-event.md)
- [Default Edge](/en/examples/edge/edge/edge.md)
- [Gradient Edge](/en/examples/edge/edge/gradient.md)
- [Custom Shape On the Edge](/en/examples/edge/edge/shape-on-edge.md)
- [Label Along Path](/en/examples/edge/label/label-along-path.md)
- [Render Multiple Labels](/en/examples/edge/label/multi-labels.md)
- [Use HTML to Render Label](/en/examples/edge/label/render-with-html.md)
- [Use React to Render Label](/en/examples/edge/label/render-with-react.md)
- [Use SVG to Render Label](/en/examples/edge/label/render-with-svg.md)
- [Custom Marker with Complexity Path](/en/examples/edge/marker/custom-marker.md)
- [Custom Marker with Image](/en/examples/edge/marker/image-marker.md)
- [Native Markers](/en/examples/edge/marker/native-markers.md)
- [Custom Marker with Path](/en/examples/edge/marker/path-marker.md)
- [Custom Marker with Base Shapes](/en/examples/edge/marker/shape-marker.md)
- [Custom Random Router](/en/examples/edge/router/custom-random-router.md)
- [ER Center Router](/en/examples/edge/router/er-center.md)
- [ER Router](/en/examples/edge/router/er-normal.md)
- [Manhattan Router](/en/examples/edge/router/manhattan.md)
- [Metro Router](/en/examples/edge/router/metro.md)
- [Normal Router](/en/examples/edge/router/normal.md)
- [OneSide Router](/en/examples/edge/router/one-side.md)
- [Orth Router](/en/examples/edge/router/orth-normal.md)
- [Orth Router With Vertices](/en/examples/edge/router/orth-vertices.md)
- [Arrowheads](/en/examples/edge/tool/arrowheads.md)
- [Boundary](/en/examples/edge/tool/boundary.md)
- [Button](/en/examples/edge/tool/button.md)
- [Remove Button](/en/examples/edge/tool/button-remove.md)
- [ContextMenu](/en/examples/edge/tool/context-menu.md)
- [Segments](/en/examples/edge/tool/segments.md)
- [Tooltip](/en/examples/edge/tool/tooltip.md)
- [Vertices](/en/examples/edge/tool/vertices.md)
- [Circular](/en/examples/layout/general/circle.md)
- [Concentric Circles](/en/examples/layout/general/concentric-circles.md)
- [Dagre](/en/examples/layout/general/dagre.md)
- [Ellipse](/en/examples/layout/general/ellipse.md)
- [Force](/en/examples/layout/general/force.md)
- [Grid](/en/examples/layout/general/grid.md)
- [Mindmap](/en/examples/layout/tree/mindmap.md)
- [Custom Node with SVG](/en/examples/node/custom-node/custom-icon-with-svg.md)
- [Custom Node with React](/en/examples/node/custom-node/custom-with-react.md)
- [Custom Node with SVG](/en/examples/node/custom-node/custom-with-svg.md)
- [Cylinder](/en/examples/node/custom-node/cylinder.md)
- [Custom Switch Node](/en/examples/node/custom-node/switch.md)
- [Collapse/Expand the Parent Node](/en/examples/node/group/collapsable.md)
- [Embedding by Drag and Drop](/en/examples/node/group/embedding-by-dnd.md)
- [Auto Update Edge's Parent](/en/examples/node/group/embedding-edges.md)
- [Embedding Nodes](/en/examples/node/group/embedding-nodes.md)
- [Auto Expand/Shrink the Parent Node](/en/examples/node/group/expand-shrink.md)
- [Restrict the Movement of Child Nodes](/en/examples/node/group/restrict-movement.md)
- [Circle](/en/examples/node/native-node/circle.md)
- [Ellipse](/en/examples/node/native-node/ellipse.md)
- [Image](/en/examples/node/native-node/image.md)
- [Path](/en/examples/node/native-node/path.md)
- [Polygon](/en/examples/node/native-node/polygon.md)
- [Polyline](/en/examples/node/native-node/polyline.md)
- [Rectangle](/en/examples/node/native-node/rect.md)
- [Text Block](/en/examples/node/native-node/text-block.md)
- [Connect to Port](/en/examples/node/port/connect-to-port.md)
- [Default Port](/en/examples/node/port/default.md)
- [Add or Remove Port Dynamically](/en/examples/node/port/dynamic.md)
- [Use Group to Custom Port Style](/en/examples/node/port/group.md)
- [Label of Port](/en/examples/node/port/label.md)
- [Place Label Inside/Outside of Node](/en/examples/node/port/port-label-position-in-out.md)
- [Place Label Outside of Ellipse](/en/examples/node/port/port-label-position-radial.md)
- [Place Label On the Side of Port](/en/examples/node/port/port-label-position-side.md)
- [Absolute Position of Ports](/en/examples/node/port/port-position-absolute.md)
- [Custom the Position of Ports](/en/examples/node/port/port-position-custom.md)
- [Ports Along the Ellipse](/en/examples/node/port/port-position-ellipse.md)
- [Auto Rotate Ports Along the Arc](/en/examples/node/port/port-position-ellipse-compensation.md)
- [Uniform Distributed Ports Along the Ellipse](/en/examples/node/port/port-position-ellipse-spread.md)
- [Uniform Distributed Ports Along the Line](/en/examples/node/port/port-position-line.md)
- [Uniform Distributed Ports Along the Rectangle](/en/examples/node/port/port-position-side.md)
- [Render Port with React](/en/examples/node/port/render-port-with-react.md)
- [Boundary Box](/en/examples/node/tool/boundary.md)
- [Custom Button](/en/examples/node/tool/button.md)
- [Delete Button](/en/examples/node/tool/button-remove.md)
- [Text Editor](/en/examples/node/tool/editable.md)
- [ToolTip For Port](/en/examples/node/tool/port-tooltip.md)
- [Agent Flow](/en/examples/showcase/practices/agentflow.md)
- [BPMN](/en/examples/showcase/practices/bpmn.md)
- [UML Class](/en/examples/showcase/practices/class.md)
- [complexTimeline](/en/examples/showcase/practices/complextimeline.md)
- [DAG for AI Model](/en/examples/showcase/practices/dag.md)
- [DAG for Data Processing](/en/examples/showcase/practices/dataprocessingdag.md)
- [ELK](/en/examples/showcase/practices/elk.md)
- [ER](/en/examples/showcase/practices/er.md)
- [Flow Chart](/en/examples/showcase/practices/flowchart.md)
- [MindMap](/en/examples/showcase/practices/mindmap.md)
- [Organizational Charts](/en/examples/showcase/practices/org.md)
- [Organizational Charts](/en/examples/showcase/practices/orgchart.md)
- [Batch Dragging Multiple Nodes with Selection](/en/examples/showcase/practices/selectiondrag.md)
- [timeline](/en/examples/showcase/practices/timeline.md)
- [Expand/Collapse the Tree](/en/examples/showcase/practices/tree.md)
- [Virtual Rendering for Multiple Nodes](/en/examples/showcase/practices/virtualrender.md)