Nuxt3中如何实现类似GoJs的流程图？求方案及案例

可行技术选型 #

针对Nuxt3生态，推荐以下几个替代GoJS的流程图库，均支持客户端渲染适配：

• Vue Flow：专为Vue3打造的轻量级流程图工具，API友好，自定义能力强，对Nuxt3支持完善
• mxGraph：老牌开源图形库，功能全面，适合复杂流程图需求
• JointJS：灵活的图形可视化库，支持自定义节点、连线和交互逻辑

Vue Flow实现案例（推荐） #

Vue Flow是Nuxt3环境下最省心的选择，步骤如下：

1. 安装依赖 #

npm install @vue-flow/core @vue-flow/background @vue-flow/controls

2. 编写流程图组件 #

创建components/FlowChart.vue：

<template>
  <div class="vue-flow-container">
    <VueFlow v-model:nodes="nodes" v-model:edges="edges">
      <!-- 背景网格 -->
      <Background pattern-color="#e5e7eb" :gap="16" />
      <!-- 控制工具栏 -->
      <Controls />
    </VueFlow>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VueFlow, Background, Controls } from '@vue-flow/core'
// 引入样式文件
import '@vue-flow/core/dist/style.css'
import '@vue-flow/controls/dist/style.css'
import '@vue-flow/background/dist/style.css'

// 节点数据
const nodes = ref([
  {
    id: 'start',
    type: 'input',
    data: { label: '流程开始' },
    position: { x: 300, y: 20 },
  },
  {
    id: 'process-1',
    data: { label: '用户信息验证' },
    position: { x: 150, y: 120 },
  },
  {
    id: 'process-2',
    data: { label: '数据处理' },
    position: { x: 450, y: 120 },
  },
  {
    id: 'end',
    type: 'output',
    data: { label: '流程结束' },
    position: { x: 300, y: 220 },
  },
])

// 连线数据
const edges = ref([
  { id: 'e-start-1', source: 'start', target: 'process-1' },
  { id: 'e-start-2', source: 'start', target: 'process-2' },
  { id: 'e-1-end', source: 'process-1', target: 'end' },
  { id: 'e-2-end', source: 'process-2', target: 'end' },
])
</script>

<style scoped>
.vue-flow-container {
  height: 650px;
  width: 100%;
  border: 1px solid #d1d5db;
}
</style>

3. 在页面中使用 #

创建pages/flow.vue，注意用<client-only>包裹组件（流程图库依赖DOM，必须在客户端渲染）：

<template>
  <div class="page-container">
    <h1>业务流程图</h1>
    <client-only>
      <FlowChart />
    </client-only>
  </div>
</template>

<style scoped>
.page-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}
</style>

mxGraph实现案例 #

mxGraph适合需要复杂图形逻辑的场景，实现步骤：

1. 安装依赖 #

npm install mxgraph

2. 编写mxGraph组件 #

创建components/MxGraphFlow.vue：

<template>
  <div ref="graphWrapper" class="mxgraph-container"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import mx from 'mxgraph'

// 初始化mxGraph核心对象
const { mxGraph, mxClient, mxUtils } = mx()

const graphWrapper = ref(null)

onMounted(() => {
  // 检查浏览器兼容性
  if (!mxClient.isBrowserSupported()) {
    mxUtils.error('当前浏览器不支持mxGraph', 200, false)
    return
  }

  // 创建图表实例
  const graph = new mxGraph(graphWrapper.value)
  graph.setConnectable(true)
  graph.setCellsResizable(true)

  // 获取默认父容器
  const parent = graph.getDefaultParent()

  // 批量操作事务
  graph.getModel().beginUpdate()
  try {
    // 添加节点
    const startNode = graph.insertVertex(parent, null, '订单创建', 50, 50, 100, 40)
    const checkNode = graph.insertVertex(parent, null, '库存检查', 220, 50, 120, 40)
    const payNode = graph.insertVertex(parent, null, '支付处理', 400, 50, 100, 40)
    const endNode = graph.insertVertex(parent, null, '订单完成', 220, 150, 120, 40)
    
    // 添加连线
    graph.insertEdge(parent, null, '', startNode, checkNode)
    graph.insertEdge(parent, null, '', checkNode, payNode)
    graph.insertEdge(parent, null, '', payNode, endNode)
  } finally {
    // 结束事务，渲染图表
    graph.getModel().endUpdate()
  }
})
</script>

<style scoped>
.mxgraph-container {
  height: 600px;
  width: 100%;
  border: 1px solid #e5e7eb;
}
</style>

3. 页面中使用 #

同样用<client-only>包裹组件，确保在客户端环境运行：

<template>
  <div class="page-container">
    <h1>订单流程示意图</h1>
    <client-only>
      <MxGraphFlow />
    </client-only>
  </div>
</template>

关键注意事项 #

• 所有流程图库均依赖DOM API，必须在Nuxt3的客户端环境运行，务必用<client-only>标记组件，或在组件文件名后加.client.vue（如FlowChart.client.vue）
• 若需要从服务端获取初始流程图数据，可在页面的asyncData或useAsyncData中请求数据，再传递给客户端组件
• 自定义节点样式、交互逻辑可参考对应库的官方文档，比如Vue Flow支持通过type属性绑定自定义节点组件

内容的提问来源于stack exchange，提问作者Lucas Cota