vue展示graphviz和dot流程图

功能点包括：

1.在组件挂载后，加载指定的DOT文件。

2.使用d3-graphviz库将DOT内容渲染成图形显示在页面上。

3.错误处理，显示加载或渲染失败的信息。

效果图：

step1：下载依赖

bash 复制代码

npm install viz.js @hpcc-js/wasm d3 d3-graphviz

step2：package.json

C:\Users\wangrusheng\PycharmProjects\untitled18\package.json

bash 复制代码

{
  "name": "untitled18",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@hpcc-js/wasm": "^2.22.4",
    "d3": "^7.9.0",
    "d3-graphviz": "^5.6.0",
    "lodash": "^4.17.21",
    "viz.js": "^2.1.2",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.3",
    "vite": "^6.2.4",
    "vite-plugin-vue-devtools": "^7.7.2"
  }
}

step3：dot代码文件

C:\Users\wangrusheng\PycharmProjects\untitled18\public\flow.dot

bash 复制代码

digraph {
    rankdir="LR";

    graph [fontname="helvetica", fontsize=12];
    node [fontname="helvetica", fontsize=10];
    edge [fontname="helvetica", fontsize=10];

    start [shape="plaintext", style="rounded", label="I want to extract\nmembers from a zip file."];
    
    fewlarge [shape="box", label="Do you have a few\nlarge files zip files\nwith tens\nof thousands\nof members?"];
    manysmall [shape="box", label="Do you have\nmany small files\nwith a few\ndozen members?"];
    extractsome [shape="box", label="Do you need\nto extract many\nmembers but\nnot all?"];

    end [shape="plaintext", style="rounded", label="Use vanilla unzip."];
    unzippa [shape="plaintext", style="rounded", label="Maybe unzippa is faster."];

    {
        rank=same; start; fewlarge; manysmall; end;
    }
    {
        rank=same; extractsome; unzippa;
    }

    start -> fewlarge;
    fewlarge -> manysmall[label="No"];
    fewlarge -> extractsome[label="Yes"];
    manysmall -> end[label="No"];
    manysmall -> extractsome[label="Yes"];
    extractsome -> end[label="No"];
    extractsome -> unzippa[label="Yes"];
}

step4：父组件

C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\Home.vue

typescript 复制代码

<template>
  <div>
    <h1>流程图展示</h1>
    <FlowChart />
  </div>
</template>

<script>
import FlowChart from './FlowChart.vue';

export default {
  components: {
    FlowChart,
  },
};
</script>

step5：子组件

C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\FlowChart.vue

typescript 复制代码

<template>
  <div>
    <div ref="graphContainer"></div>
    <div v-if="error">{{ error }}</div>
  </div>
</template>

<script>
import Viz from 'viz.js'; // 默认导入
import { Module, render } from 'viz.js/full.render.js'; // 确认路径是否正确
import * as d3 from 'd3';
import { graphviz } from 'd3-graphviz';

export default {
  data() {
    return {
      error: null,
    };
  },
  async mounted() {
    try {
      const response = await fetch('/flow.dot');
      const dotContent = await response.text();

      // 使用正确的参数初始化Viz实例
      const viz = new Viz({ Module, render });
      const svg = await viz.renderSVGElement(dotContent);

      // 使用d3-graphviz渲染
      graphviz(this.$refs.graphContainer)
        .renderDot(dotContent)
        .onerror((err) => {
          this.error = `渲染错误: ${err}`;
        });

    } catch (err) {
      this.error = `加载失败: ${err.message}`;
    }
  },
};
</script>

end