How to use the @antv/x6.util.createElement function in @antv/x6

renderReactComponent() {
    const bounds = this.bounds.clone()
    let transform = `translate(${bounds.x},${bounds.y})`
    const deg = this.getShapeRotation()
    if (deg !== 0) {
      transform += ` rotate(${deg},${bounds.width / 2},${bounds.height / 2})`
    }

    const g = util.createSvgElement('g')
    g.setAttribute('transform', transform)

    const fo = util.createSvgElement('foreignObject')
    util.setAttributes(fo, { width: bounds.width, height: bounds.height })

    const div = util.createElement('div')
    div.style.width = util.toPx(bounds.width)
    div.style.height = util.toPx(bounds.height)
    div.style.overflow = 'hidden'

    g.appendChild(fo)
    fo.appendChild(div)

    if (this.container == null) {
      this.container = util.createElement('div')
      if (this.component != null) {
        ReactDOM.render(this.component, this.container)
      }
    }

    const container = this.container
    container.style.overflow = 'hidden'

const g = util.createSvgElement('g')
    g.setAttribute('transform', transform)

    const fo = util.createSvgElement('foreignObject')
    util.setAttributes(fo, { width: bounds.width, height: bounds.height })

    const div = util.createElement('div')
    div.style.width = util.toPx(bounds.width)
    div.style.height = util.toPx(bounds.height)
    div.style.overflow = 'hidden'

    g.appendChild(fo)
    fo.appendChild(div)

    if (this.container == null) {
      this.container = util.createElement('div')
      if (this.component != null) {
        ReactDOM.render(this.component, this.container)
      }
    }

    const container = this.container
    container.style.overflow = 'hidden'
    container.style.width = util.toPx(Math.round(bounds.width / this.scale))
    container.style.height = util.toPx(Math.round(bounds.height / this.scale))
    container.style.transform = `scale(${this.scale})`
    container.style.transformOrigin = '0 0'

    div.appendChild(this.container)

    if (this.elem) {
      this.elem.appendChild(g)

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,

const bounds = graph.getGraphBounds()
  const scale =
    Math.floor(
      Math.min(
        (thumbWidth - 2 * thumbBorder) / bounds.width,
        (thumbHeight - 2 * thumbBorder) / bounds.height,
      ) * 100,
    ) / 100

  graph.view.scaleAndTranslate(
    scale,
    Math.floor((thumbWidth - bounds.width * scale) / 2 / scale - bounds.x),
    Math.floor((thumbHeight - bounds.height * scale) / 2 / scale - bounds.y),
  )

  let node = util.createElement('div')
  if (graph.dialect === 'svg') {
    const stage = graph.view.getStage() as SVGGElement
    const svg = stage.ownerSVGElement!.cloneNode(true) as SVGElement
    svg.style.position = 'relative'
    svg.style.overflow = 'hidden'
    svg.style.left = ''
    svg.style.top = ''
    svg.style.width = util.toPx(thumbWidth)
    svg.style.height = util.toPx(thumbHeight)

    node.appendChild(svg)
  } else {
    node.innerHTML = graph.container.innerHTML
  }

  container.appendChild(node)