102.3K+下载
跳转到使用指南
AntV X6 Editor作者 antvis

AntV X6 Editor Skill.

创建用于编写互连图表的界面，而不只是查看已有网络。

  • 图表编辑器
  • 节点界面
  • AntV
下载 OpenDesign查看使用指南
来源审查 · AntV X6 EditorSKILL.md
任务 图表编辑器 产出 • 带样式化节点和边的 X6 图表编辑器 JavaScript • 一组经过审慎选择的编辑器插件和画布交互 • 适合该编辑器的连接、视图框定及可选序列化行为 开始之前 使用文档所述的 @antv/x6 v3 API、浏览器画布和所需插件。获取其他参考资料需要网络访问。请根据已安装版本核对示例。
编辑摘要 · 已审查来源 2026-10-07 · 非生成示例

01 功能说明

AntV X6 Editor：构建图表画布

一份 X6 v3 图表编辑器指南，涵盖命令式节点-边构建、显式插件设置、手势分离以及专项参考资料的获取。

基于来源的工作流并非执行基准测试

工作方法

AntV X6 Editor 面向流程图、DAG、实体关系图、血缘图和组织结构图编辑器等交互式图表工具。所收录的条目以 X6 v3 为目标，描述了一种命令式方法：创建图，添加节点和边，然后注册预期操作所需的编辑器插件。

其重点在于编辑器行为。选择、历史记录、剪贴板、键盘、模板面板、拖放、变换和导出都需要显式设置；画布平移和连接行为则属于不同的配置层。该来源还会将序列化和端口相关任务引导至详细参考资料。它不会把绘制出的工作流转化为可执行的业务流程。

预期交付物

  • 带样式化节点和边的 X6 图表编辑器 JavaScript
  • 一组经过审慎选择的编辑器插件和画布交互
  • 适合该编辑器的连接、视图框定及可选序列化行为
查看示例任务说明

从任务说明到审查

  1. 01
    定义编辑任务

    列出用户可以创建、移动、选择、连接和移除的图表对象。在启用插件之前，确定实际需要哪些编辑器操作。

  2. 02
    构建节点-边模型

    创建图并添加所需形状和连接。如果范围中包含端口、自定义 HTML 节点或嵌套结构，请获取相应的专项指南。

  3. 03
    注册编辑器功能

    导入并注册实现中使用的插件。将平移和连接等构造函数选项与插件类分开处理。

  4. 04
    检查编辑会话

    测试选择、平移、缩放和拖动手势是否存在冲突，框定内容，并验证任何承诺的保存/加载或导出路径，而不是假定它存在。

02 适用场景

适用场景

使用文档所述的 @antv/x6 v3 API、浏览器画布和所需插件。获取其他参考资料需要网络访问。请根据已安装版本核对示例。

适合的场景

  • 工作流编写界面适用于用户需要构建或修改节点-边图，而非仅查看现有图的情况。
  • 领域图表编辑器该来源包含针对 ER、血缘图、DAG、UML 和组织结构图需求的参考路径。
  • 编辑器交互调试其中的插件注册和输入修饰键规则有助于排查缺失的操作和相互竞争的手势。

需要检查的限制

  • 并非工作流执行引擎文档所述范围是图表编辑。业务执行、服务端持久化和领域验证需要单独实现。
  • 并非 G6 或 G2G6 网络探索和 G2 统计图表有着不同的用途和 API；不应将它们的渲染模式混入此编辑器。
  • 来源特定的运行时假设该条目为其工作流指定了 v3 约定、JavaScript 输出和容器处理方式。应在已安装的软件包和托管环境中验证这些假设，而不要将其表述为适用于整个库的通用限制。

请提供以下输入

  • 图表模式提供节点类型、允许的关系、端口要求和初始图表数据。
  • 编辑操作说明用户是否需要选择、撤销、剪贴板、模板面板、调整大小、键盘操作或导出功能。
  • 应用环境提供已安装的 X6 版本、画布容器、周边页面交互和持久化要求。

03 关键决策

关键决策

  1. 功能需显式配置

    仅注册所需插件，能清楚体现仅显示图表与提供可操作编辑器之间的区别。

  2. 不同手势各司其职

    该来源使用修饰键来防止平移、缩放和框选竞争同一种输入。

  3. 编写与持久化并不相同

    图表可见并不能证明编辑状态可以保存和恢复。序列化需要单独查阅参考资料并进行验证。

04 示例任务

尝试一份聚焦的任务说明

以下示例任务说明尚未经过测试。使用前请检查该技能的设置。

审查设置

以完整的 antv-x6-editor 技能来源为指导，并单独安装项目运行时。尚未从此条目验证任何通用的技能安装命令。

上游源文件
https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-x6-editor/SKILL.md

使用文档所述的 @antv/x6 v3 API、浏览器画布和所需插件。获取其他参考资料需要网络访问。请根据已安装版本核对示例。

从一项交付物开始

运行该技能之前，请调整此任务说明的范围、源材料和约束。

示例任务说明
使用 antv-x6-editor，根据所提供的节点类型和允许的连接制作一个审批流程编辑器原型。先检查我们的 X6 版本。通过显式注册插件实现选择和撤销，分离平移与缩放手势，并将业务执行排除在范围之外。如果包含 JSON 保存/加载，请遵循序列化参考资料并演示一次往返转换；不要声称支持后端持久化。

检查结果

根据以下可观察标准检查实际输出。

  • 每项使用到的编辑器操作都有相应的已导入并注册的功能支持。
  • 平移、缩放、选择和节点操作不会争用同一种手势。
  • 任何承诺的序列化或导出操作都已在实际项目中演示。

OpenDesign 为编码智能体提供本地设计工作区。此列表并不表示该技能已内置，也不表示其外部工具、凭据和软件依赖项已包含在内。

下载 OpenDesign阅读快速入门

05 来源与许可证

来源和许可证

本页描述下方链接所指向的固定来源修订版本。上游行为和要求可能发生变化。

来源所有者
antvis
仓库
antvis/chart-visualization-skills
技能文件
skills/antv-x6-editor/SKILL.md
许可证
MIT
已审查的快照
2026-10-07 · a105fa12a9fa
编辑来源摘要
一份 X6 v3 图表编辑器指南，涵盖命令式节点-边构建、显式插件设置、手势分离以及专项参考资料的获取。

由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标，并不代表技能使用量或质量评分。

06 开始前的问题

开始前的问题

为什么不使用 G6 制作同样的图表？

该来源区分了 X6 的可编辑画布和命令式编写 API，以及 G6 的图可视化工作流。应根据用户需要的交互来选择，而不能只看图像外观。

平移和选择的配置方式相同吗？

不同。该条目将构造函数层面的交互选项与 Selection 等插件分开；必须先注册插件，才能使用其方法。

添加节点是否需要单独调用 graph.render？

所收录的 X6 v3 指南指出，添加节点和边后会自动渲染，并警告不要照搬 G6 的 graph.render。集成时请检查已安装的 API。

OpenDesign

为下一轮设计迭代留出空间。

将任务说明、源材料和设计工作集中保存在本地工作区中。将该技能加入工作流之前，请检查它自身的设置。

下载 OpenDesign浏览设计技能
上游源文件
https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-x6-editor/SKILL.md