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.