How to use the @antv/x6.Graph function in @antv/x6

componentDidMount() {
    const pageFormat = { x: 0, y: 0, width: 100, height: 160 }
    const graph = new Graph(this.container, {
      pageFormat,
      // pageVisible: true,
      pageBreak: {
        enabled: this.state.pageBreaksVisible,
        dsahed: true,
        stroke: '#ff0000',
      },
      movingPreview: {
        scaleGrid: true,
      },
      preferPageSize: true,
      centerZoom: false,
    })

    graph.batchUpdate(() => {
      const n1 = graph.addNode({

componentDidMount() {
    const graph = new Graph(this.container)

    graph.batchUpdate(() => {
      const style: Style = {
        shape: 'image',
        image:
          'https://gw.alipayobjects.com/zos/basement_prod/759f4922-517b-4e62-adea-5c431f049f47.svg', // tslint:disable-line
      }
      graph.addNode({
        x: 60,
        y: 40,
        width: 80,
        height: 80,
        label: 'Bottom',
        style: {
          ...style,
          labelVerticalPosition: 'bottom',

export function createGraph(container: HTMLDivElement) {
  return new Graph(container, {
    rotate: false,
    resize: true,
    folding: false,
    infinite: true, // 无限大画布
    // pageVisible: true,
    // pageBreak: {
    //   enabled: true,
    //   dsahed: true,
    //   stroke: '#c0c0c0',
    // },
    // pageFormat: {
    //   width: 800,
    //   height: 960,
    // },
    // mouseWheel: true,
    rubberband: true,

componentDidMount() {
    const graph = (this.graph = new Graph(this.container))

    graph.batchUpdate(() => {
      const node1 = graph.addNode({
        label: 'Hello',
        x: 60,
        y: 60,
        width: 80,
        height: 30,
      })
      const node2 = graph.addNode({
        label: 'World',
        x: 240,
        y: 240,
        width: 80,
        height: 30,
      })

function createTempGraph() {
  const container = util.createElement('div')
  container.style.visibility = 'hidden'
  container.style.position = 'absolute'
  container.style.overflow = 'hidden'
  container.style.height = '1px'
  container.style.width = '1px'

  document.body.appendChild(container)

  const graph = new Graph(container, {
    grid: false,
    tooltip: false,
    folding: false,
    connection: false,
    autoScroll: false,
    resetViewOnRootChange: false,
    backgroundColor: null,
  })

  graph.renderer.antialiased = true

  graph.renderer.minSvgStrokeWidth = 1.3

  return graph
}

componentDidMount() {
    this.graph = new Graph(this.container, {
      infinite: false,
      connection: {
        enabled: true,
        hotspotable: false,
      },
      anchor: {
        inductiveSize: 16,
      },
    })
    this.renderGraph()
  }

componentDidMount() {
    const graph = new Graph(this.container)

    graph.batchUpdate(() => {
      const node1 = graph.addNode({
        x: 60,
        y: 60,
        width: 80,
        height: 30,
        label: 'Custom',
        render(elem, cell) {
          const rect = elem.querySelector('rect') as SVGRectElement
          rect.style.stroke = '#ff0000'
          rect.style.strokeWidth = '2'
        },
      })
      const node2 = graph.addNode({
        x: 240,

componentDidMount() {
    const graph = (this.graph = new Graph(this.container, {
      infinite: true,
      connection: {
        enabled: true,
        hotspotable: false,
      },
      anchor: {
        inductiveSize: 16,
      },
      getAnchors(cell) {
        if (cell != null && this.model.isNode(cell)) {
          return [
            [0.25, 0],
            [0.5, 0],
            [0.75, 0],

            [0, 0.25],

constructor(container: HTMLElement) {
    super()

    this.graph = new Graph(container, {
      guide: {
        enabled: true,
        dashed: true,
      },
      grid: {
        enabled: true,
      },
      infinite: true,
      pageVisible: true,
      pageBreak: {
        enabled: true,
        dsahed: true,
        stroke: '#c0c0c0',
      },
      pageFormat: {
        width: 800,