使用joinjs繪製流程圖（一）

效果圖

程式碼

<template>
  <div class="app">
    <div ref="myholder" id="paper" @drop="drop" @dragover="allowDrop"></div>
  </div>
</template>

<script>
import * as joint from '@joint/core'
export default {
  data() {
    return {}
  },
  mounted() {
    const namespace = joint.shapes
    // 1.  建立畫板
    var graph = new joint.dia.Graph({}, { cellNamespace: namespace })

    var paper = new joint.dia.Paper({
      el: this.$refs.myholder,
      model: graph,
      width: 600,
      height: 100,
      gridSize: 1,
      cellViewNamespace: namespace,
    })

    // 建立矩形
    var rect = new joint.shapes.standard.Rectangle()
    rect.position(100, 30)
    rect.resize(100, 40)
    rect.attr({
      body: {
        fill: 'blue',
      },
      label: {
        text: 'Hello',
        fill: 'white',
      },
    })
    rect.addTo(graph)

    // 建立矩形-2
    var rect2 = rect.clone()
    rect2.translate(300, 0)
    rect2.attr('label/text', 'World!')
    rect2.addTo(graph)

    // 建立連線線
    var link = new joint.shapes.standard.Link()
    link.source(rect)
    link.target(rect2)
    link.addTo(graph)
  },
  methods: {
    drop() {},
    allowDrop() {},
  },
}
</script>

<style lang="less" scoped></style>

官網文件

https://resources.jointjs.com/tutorial