---
title: Simple Usage
order: 1
---

本 Demo 演示一行文字的用法。

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.less';
import { treeNodeSources,listNodeSources,data } from './mockdata.ts';
import FlowEditor from '@aligov/flow-editor';
import Iconfont from '@ali/cinco-icon-font';

Iconfont.loadIconfont('font_2514914_45g2lsklmed');

class App extends Component {
  render() {
    return (
      <div style={{ height: 800 }}>
        <FlowEditor
          nodePanelConfig={{type:'tree'}}
          nodeSources={treeNodeSources}
          minimap={true}
          data={data}
          onAddNode={(item) => {
            return Promise.resolve({
              detail: item,
            });
          }}
          onValidateAddNode={(item) => {
            // return [`只能有一个${item.title}`];
          }}
          additionalMenuData={[
            {
              icon: 'icon-Result-Codex',
              title: `运行日志`,
              disabled: false,
              onClick: () => {},
            },
            {
              icon: 'icon-Result-itemx',
              title: `查看结果`,
              disabled: false,
              onClick: () => {},
            },
          ]}
          onNodeRightClick={(n) => {
            console.log(n);
          }}
          onNodeClick={(n) => {
            console.log(n);
          }}
          onGraphLoaded={(graph) => {
            window.graph = graph;
          }}
          // loading
        />
      </div>
    );
  }
}

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