vue3 + jsmind实现自定义流程图

原创已于 2025-11-23 01:16:55 修改 · 197 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript #流程图

于 2025-11-23 01:15:54 首次发布

前言：jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 html5 canvas 和 svg 进行设计。jsMind 以 BSD 协议开源，在此基础上你可以在你的项目上任意使用。

简单来说，jsMind 是一个 js实现得思维流程图，可以在vue 项目中使用

效果图：

一、安装

yarn add jsmind

二、使用案例

不废话，直接上干活，下面是一个简单得实现案例，帮助你快速在项目中使用jsmind:

<template>
   <div class="mindmap-container">
       <div id="jsmind_container"></div>
    </div>
</template>
<script setup>
import { ref,reactive} from "vue"
import jsMind from 'jsmind';

// 初始化思维导图选项
const options = {
    container: 'jsmind_container',//jsmind 容器ID
    editable: true,
    theme: 'primary', //'dark',
    mode: 'full',
    support_html: true,
    view: {
        draggable: true,
        engine: 'canvas', // 思维导图各节点之间线条的绘制引擎
        hmargin: 120, // 思维导图距容器外框的最小水平距离
        vmargin: 50, // 思维导图距容器外框的最小垂直距离
        line_width: 1, // 思维导图线条的粗细
        line_color: '#ddd', // 思维导图线条的颜色
        line_style: 'curved', // 思维导图线条的样式，直线(straight)或者曲线(curved)
        zoom: {
            // 配置缩放
            min: 0.5, // 最小的缩放比例
            max: 2.1, // 最大的缩放比例
            step: 0.1 // 缩放比例间隔
        }
    },
    layout: {
        hspace: 30,
        vspace: 20,
        pspace: 13
    },
    // 启用拖拽功能
    draggable: true
};
// 初始化思维导图数据
const mindData = ref({
	meta: {
		name: '示例思维导图',
		author: 'user',
		version: '1.0'
	},
	format: 'node_tree',
	data: {
		id: 'root',
		topic: '中心主题',
		//'background-color': '#ffffff',
		children: [
			{
				id: 'sub1',
				topic: '主要分支 1',
				//'background-color': '#e1f5fe',
				direction: 'right',
				children: [
					{
						id: 'sub11',
						topic: '子主题 1'
						//'background-color': '#e8f5e9'
					},
					{
						id: 'sub12',
						topic: '子主题 2'
						//'background-color': '#fff3e0'
					},
					{
						id: 'sub13',
						topic: '子主题 3'
						//'background-color': '#fce4ec'
					}
				]
			},
			{
				id: 'sub2',
				topic: '主要分支 2',
				//'background-color': '#f3e5f5',
				direction: 'right',
				children: [
					{
						id: 'sub21',
						topic: '子主题 1'
						//'background-color': '#e0f2f1'
					},
					{
						id: 'sub22',
						topic: '子主题 2'
						//'background-color': '#e8eaf6'
					}
				]
			},
			{
				id: 'sub3',
				topic: '主要分支 3',
				//'background-color': '#fff8e1',
				direction: 'left',
				children: [
					{
						id: 'sub31',
						topic: '子主题 1'
						//'background-color': '#f9fbe7'
					},
					{
						id: 'sub32',
						topic: '子主题 2'
						//'background-color': '#ffebee'
					},
					{
						id: 'sub33',
						topic: '子主题 3'
						//'background-color': '#e3f2fd'
					}
				]
			}
		]
	}
});
const jm = ref(null);

onMounted(()=>{
    // 初始化思维导图
    jm.value = new jsMind(options);
    jm.value.show(mindData.value);

})
</script>