当前位置：首页 > news >正文

vue展示graphviz和dot流程图

news 来源：原创 2025/5/7 9:34:36

vue展示graphviz和dot流程图
功能点包括：
1.在组件挂载后，加载指定的DOT文件。
2.使用d3-graphviz库将DOT内容渲染成图形显示在页面上。
3.错误处理，显示加载或渲染失败的信息。
效果图：
在这里插入图片描述

step1：下载依赖

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

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

{"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

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

<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

<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>