logo

X6

  • 文档
  • API
  • 图表示例
  • 常见问题
  • 更新日志
  • XFlow
  • 所有产品antv logo arrow
  • 2.x

使用场景

  • 流程图

  • 人工智能建模 DAG 图

  • 数据加工 DAG 图

  • ER 图

  • 思维导图

  • BPMN

  • 泳道图

  • ELK

  • 组织架构图

  • 组织架构图(自动布局)

  • UML 类图

  • 展开/折叠树

内置节点

  • Rectangle

  • Ellipse

  • Circle

  • Path

  • Polygon

  • Polyline

  • Image

  • 文本

自定义节点

  • 使用 SVG 自定义节点

  • Cylinder

  • 使用 SVG 自定义图标

  • 使用 React 自定节点

  • 自定义开关节点

连接桩

  • 默认连接桩

  • 使用 Group 定义连接桩样式

  • 添加或移除连接桩

  • 连接到连接桩

  • 使用 React 渲染连接桩

  • 连接桩标签

  • 绝对定位的连接桩

  • 沿矩形边框均匀分布的连接桩

  • 沿任意直线均匀分布的连接桩

  • 沿椭圆均匀分布的连接桩

  • 沿椭圆分布的连接桩

  • 沿圆弧自动旋转的连接桩

  • 自定义连接桩位置

  • 位于连接桩一侧的标签

  • 位于节点内部或外部的标签

  • 位于椭圆外围的标签

群组

  • 嵌套节点

  • 自动更新边的父节点

  • 拖入/拖出父节点

  • 限制子节点的移动范围

  • 自动扩展/收缩父节点

  • 折叠/展开父节点

节点工具

  • 自定义按钮

  • 删除按钮

  • 包围框

  • 文本编辑

  • 连接桩 ToolTip

样式

  • 默认边

  • 渐变背景色

  • 交错背景色

  • 沿边长度方向上的图形

  • 自定义点击事件

箭头

  • 内置箭头

  • 使用 path 自定义箭头

  • 使用图形元素自定义箭头

  • 使用 image 自定义箭头

  • 自定义复杂箭头

标签

  • 使用 SVG 渲染 Label

  • 使用 HTML 渲染 Label

  • 使用 React 渲染 Label

  • 渲染多个 Label

  • 沿路径的 Label

路由

  • 默认路由

  • 拐线

  • 正交线

  • 关系路由

  • 关系路由

  • 智能路由

  • 智能地铁路由

  • 单侧路由

  • 自定义随机路由

连线

  • 默认连线

  • 圆角连线

  • 平滑连线(三次贝塞尔曲线)

  • 跳线

  • 二次贝塞尔曲线

  • 随机摇摆线

  • 多条光滑曲线

辅助工具

  • 调整顶点

  • 调整线段

  • 自定义按钮

  • 删除按钮

  • 调整箭头

  • 包围框

  • 右键菜单

  • Tooltip

一般布局

  • 网格布局

  • 环形布局

  • Dagre

  • 椭圆布局

  • 力导向布局

树布局

  • 脑图树

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38
  • 场景案例
    • 使用场景
  • 节点
    • 内置节点
    • 自定义节点
    • 连接桩
    • 群组
    • 节点工具
  • 边
    • 样式
    • 箭头
    • 标签
    • 路由
    • 连线
    • 辅助工具
  • 布局
    • 一般布局
    • 树布局