注意：写文章的时候，我用的xflow版本是1.x的

1. 自定义节点

x6可以使用自定义节点，用react或者vue都可以，只是xflow稍微简化了一下注册流程。

  config.setNodeRender('NODE', Node);

2.节点组件

import { IApplication, MODELS, NsGraph, useModelAsync, useXFlowApp } from '@antv/xflow';
import cs from 'classnames';
import { useMemo } from 'react';
import styles from './index.less';
const GraphNode: NsGraph.INodeRender<NsGraph.INodeConfig & { extra?: NodeExtraData }> = (props) => {
  const app: IApplication = useXFlowApp();
  const [selectedNodes] = useModelAsync<MODELS.SELECTED_NODES.IState>({
    getModel: async () => await MODELS.SELECTED_NODES.getModel(app.modelService),
    initialState: [],
  });
  const isSelected = useMemo(() => {
    return selectedNodes.some((i) => i.getData().id === props.data.id);
  }, [selectedNodes, props.data.id]);
  return (
    <div
      className={cs(styles['node-container'], {
        [styles['node-container-selected']]: isSelected,
      })}
      // 补充样式，防止导出丢失样式
      style={{
        boxSizing: 'border-box',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <div className={styles['name']}>{props.data.extra?.name}</div>
    </div>
  );
};
export default GraphNode;

这里要注意一下，有的class样式在导出图片的时候不会被写进去，所以简单的方法就是用style再写一遍缺失的样式，但是要注意由于写了style导致的样式优先级问题。

2.1 节点props

自定义节点会被注入一些属性

{
    position: 位置
    size： 大小
    data：存储的数据
}

还有一些属性是类型没有定义的，可以打印出来看

3.其他自定义组件

自定义边组件实际上是自定义边上面的label，并不是整个边的组件。因为边只能用svg画，需要计算获得。

所以实际上能完全自定义的只有节点