# X6 Development

> Build, review, and troubleshoot X6 graph editor features. Strongly trigger this skill whenever the user mentions X6/AntV X6 or related Chinese intents such as 流程图编辑器、DAG 编辑器、节点编排、节点连线、连接桩、端口、路由、自动布局、小地图、框选、撤销重做、Stencil/模板面板、X6 API 查询、X6 示例检索, even when the user does not explicitly ask for a skill.

- Skill: `dangaogit/x6-development` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add dangaogit/x6-development`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dangaogit/x6-development/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: dangaogit (https://skillmd.com/u/dangaogit)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dangaogit/x6-development

---


# X6 Development

## Goal

Help the user implement X6-based features quickly and correctly, with strong defaults
for graph initialization, interaction config, node/edge modeling, and plugin selection.

## Primary References

Use these official references first:

- About: https://x6.antv.antgroup.com/tutorial/about
- Graph API: https://x6.antv.antgroup.com/api/graph/graph
- Examples: https://x6.antv.antgroup.com/examples

## When This Skill Triggers

Trigger on requests like:

- "做一个流程图编辑器 / DAG 编辑器"
- "X6 怎么配置画布缩放和拖拽"
- "节点、边、连接桩怎么设计"
- "需要找 X6 示例或 API"
- "实现小地图、框选、撤销重做、对齐线、模板面板"

Also trigger on Chinese phrasing variants:

- "画布缩放拖拽怎么配"
- "节点之间怎么限制连线"
- "给我找个 X6 示例照着改"
- "怎么做类似流程编排的编辑器"
- "怎么做图数据保存和回显"

## Workflow

Follow this sequence unless the user asks otherwise:

1. Clarify scenario and constraints:
   - Scene type: flowchart, DAG, topology, ER, org chart.
   - Interaction requirements: pan/zoom, connect rules, selection, keyboard.
   - Scale: expected node/edge counts and performance constraints.
2. Define graph bootstrapping options:
   - Container lifecycle and resize behavior.
   - Core options in `new Graph(options)`:
     `autoResize`, `panning`, `mousewheel`, `grid`, `background`,
     `connecting`, `interacting`, `translating`, `async`, `virtual`.
3. Design data model:
   - Node schema: `id`, `shape`, `position`, `size`, `data`, `ports`.
   - Edge schema: `source`, `target`, `labels`, `router`, `connector`.
4. Pick extension strategy from examples:
   - Plugins and built-ins: minimap, stencil, selection, clipboard,
     keyboard, snapline, transform, history, scroller, export.
5. Implement incrementally:
   - First render base graph.
   - Then add interactions and plugins.
   - Finally add custom nodes/ports/events and persistence.
6. Verify:
   - Canvas interactions, connection constraints, serialization/deserialization.
   - Edge cases: invalid connections, zoom bounds, large graph behavior.

## Implementation Checklist

Before finishing, ensure:

- Graph instance is created and disposed cleanly with component lifecycle.
- `autoResize` and container sizing are correct.
- `panning` and `mousewheel` behavior matches UX expectations.
- Node/edge defaults are centralized (style, router, connector, markers).
- Connection validation (`connecting.validateConnection`) exists for business rules.
- Event handlers are scoped and cleaned up to avoid leaks.
- Data persistence path is clear (`graph.toJSON()` and restore flow).

## Fast API Lookup Playbook

When user asks "how to configure X6":

1. Map question to API area:
   - Canvas/global behavior -> Graph options.
   - Node/edge visuals -> shape/attrs/tools/labels.
   - Interaction constraints -> `interacting`, `connecting`, `translating`.
2. Provide a minimal runnable snippet first.
3. Add one advanced option only when needed (avoid over-configuring).
4. Link a matching official example category for rapid follow-up.

## Output Style

For implementation requests, return:

1. A short architecture choice statement.
2. A minimal code scaffold.
3. Optional enhancements in priority order.
4. Validation or test steps.

For troubleshooting requests, return:

1. Most likely root cause.
2. Smallest fix.
3. One prevention pattern for future regressions.

## Guardrails

- Prefer official API and examples over unofficial snippets.
- Avoid introducing many plugins at once; add progressively.
- Keep configuration explicit and close to graph initialization.
- Use stable IDs and deterministic serialization to reduce merge conflicts.

## X6 Chinese Quick Recipes

Use these snippets/patterns when user asks for "直接可用方案".

### 1) Restrict invalid connections

Intent: prevent illegal source/target links.

Pattern:

- Configure `connecting.validateConnection(args)` at graph creation.
- Reject same-node loops unless explicitly needed.
- Validate port group compatibility (`out` -> `in`).
- Optionally reject duplicate edges.

### 2) Port groups for maintainable node IO

Intent: keep node ports consistent across shapes.

Pattern:

- Define reusable port groups (`in`, `out`) with shared attrs/position.
- Add business-level metadata in `port.data` (signal type, capacity).
- Enforce rules in `validateConnection` using that metadata.

### 3) Persistence and restore flow

Intent: save and recover editor state reliably.

Pattern:

- Save via `graph.toJSON()` with stable `id`.
- Restore with `graph.fromJSON(json)` after base graph is ready.
- Store app-specific metadata in `cell.data`, avoid deriving from style attrs.
- Version persisted schema when structure changes.

### 4) Large graph performance defaults

Intent: improve interaction smoothness for high node counts.

Pattern:

- Enable `async` rendering.
- Consider `virtual` rendering for viewport-only draw.
- Reduce expensive decorations (shadows/filters/tools shown by default).
- Batch updates where possible instead of many tiny mutations.

### 5) Recommended plugin rollout order

Intent: avoid complexity spikes.

Order:

1. selection + keyboard
2. snapline + transform
3. history + clipboard
4. minimap + stencil

Add the next layer only after current interactions are stable.