## 在vue + ts 中引入 mxgraph
首先引入mxgraph 相關包
- [mxgraph](https://github.com/jgraph/mxgraph)
- [mxgraph-typeings](https://github.com/lgleim/mxgraph-typings)
```bash
yarn add mxgraph
yarn add -D lgleim/mxgraph-typings
```
在代碼中引入
```tsx
import { Component, Vue, Ref } from 'vue-property-decorator'
import { mxgraph } from 'mxgraph'
require('mxgraph/javascript/src/css/common.css')
import style from './style.scss'
const mx: typeof mxgraph = require('mxgraph')({
mxBasePath: 'mxgraph'
});
@Component
export default class Workflow extends Vue {
private graph!: mxgraph.mxGraph;
private v1!: mxgraph.mxCell;
private v2!: mxgraph.mxCell;
private edge!: mxgraph.mxCell;
@Ref('containerRef') readonly graphContainer!: HTMLDivElement;
public mounted() {
this.init();
}
private init() {
this.graph = new mx.mxGraph(this.graphContainer);
mx.mxEvent.disableContextMenu(this.graphContainer);
const parent = this.graph.getDefaultParent();
this.graph.getModel().beginUpdate();
try {
this.v1 = this.graph.insertVertex(parent, null, '節點1', 20, 20, 80, 30);
this.v2 = this.graph.insertVertex(parent, null, '節點2', 20, 120, 80, 30);
this.edge = this.graph.insertEdge(parent, null, '', this.v1, this.v2)
} finally {
this.graph.getModel().endUpdate();
}
}
render() {
return (
<div class={style.container} ref="containerRef"></div>
)
}
}
```
