---
title: BPMN 编辑器
order: 2
---

```jsx
import React, { useRef } from "react";
import ReactDOM from "react-dom";
import { Button } from "@alifd/next";
import { BpmnEditor } from "@alibsp/process-designer-cq";

//======= 仅限 demo 时需要单独引，项目中应有包括样式，不需要使用组件时单独引 ======
import "@alifd/next/index.css";
//=======

function App() {
  const modelerRef = useRef();
  const showXML = async () => {
    const xml = await modelerRef.current?.getXML();
    console.log(xml);
    window.prompt("xml", xml);
  };

  return (
    <div style={{ height: 400 }}>
      <div>
        <Button onClick={showXML}>获取 XML</Button>
      </div>
      {/**/}
      <BpmnEditor
        // xml={xml} {/* 不配置则使用内置的默认初始值 */}
        ref={modelerRef}
      />
    </div>
  );
}

ReactDOM.render(<App />, mountNode);
```