vue + gojs 实现拖拽流程图（实战项目）

<template>
  <div id="diagram-container"></div>
</template>
 
<script>
import { Gojs } from "gojs";
 
export default {
  name: "DiagramComponent",
  data() {
    return {
      myDiagram: null,
      // 定义节点和连线的模型数据
      nodeDataArray: [
        { key: "Start" },
        { key: "End" },
        // 更多节点...
      ],
      linkDataArray: [
        { from: "Start", to: "End" },
        // 更多连线...
      ]
    };
  },
  mounted() {
    this.initDiagram();
  },
  methods: {
    initDiagram() {
      const $ = Gojs;
      const myDiagram =
        $(this.$el).find("#diagram-container").gojs({
          // 定义模板节点和连线
          nodeTemplate: $(
            $(Gojs.TextBlock, {
              font: "10pt 'Segoe UI', Verdana, Helvetica, Arial, sans-serif",
              stroke: '#333333',
              margin: 4,
              maxSize: new Gojs.Size(150, NaN),
              wrap: Gojs.TextWrap.Word,
              text: $(Gojs.Binding, 'key')
            })
          ),
          link: $(Gojs.Link,
            { routing: Gojs.Go.Link.Orthogonal, corner: 5 },
            $(Gojs.Shape, { strokeWidth: 1.5, stroke: '#30adf5' }), // the link shape
            $(Gojs.Arrow, 'OpenTriangle', { width: 10, height: 10, fill: '#30adf5' })
          ),
          model: new Gojs.GraphLinksModel(this.nodeDataArray, this.linkDataArray),
          // 更多配置...
        });
 
      this.myDiagram = myDiagram;
    }
  }
};
</script>
 
<style>
/* 样式调整 */
#diagram-container {
  width: 100%;
  height: 800px;
  background-color: #dae4e4;
}
</style>

这个简化版的代码实例展示了如何在Vue组件中初始化GoJS流程图编辑器，并设置基本的模板和样式。在实际项目中，你需要根据具体需求进一步配置GoJS的各项参数，例如事件处理、自定义行为等。