simple-mind-map基础功能办

于 2025-01-22 15:18:27 发布
阅读量286 收藏
点赞数 3
文章标签： vue3实现思维导图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/aeoliancrazy/article/details/145304177
版权

本人做了一个只含有基础功能版本，如果需要其他功能，请从参考的1和3中自行迁移
https://gitee.com/ZuiMengShiHua/vue3-simple-mind-map/tree/develop/
develop分支

使用的事vue3+vite+element+ts

简单的页面展示
在这里插入图片描述

参考相关资料如下
1.vue3使用simple-mind-map，开发思维导图
https://blog.youkuaiyun.com/qq_31676725/article/details/141498637

2.官方文档
https://wanglin2.github.io/mind-map-docs/

3.github上一个很好demo，基于vue3.2+element-UI开发的
https://github.com/huangyuanyin/hyy-vue3-mindMap

4.在线示例
https://wanglin2.github.io/mind-map/#/

aeoliancrazy
关注
vue3-mindmap:开发中
04-09
vue3-mindmap（开发中） 相比更新了技术栈：Vue3、d3v6、Vite 目前打算对项目进行重构，解决一些老旧问题（图片生成、加载慢...） 在线演示： 安装 npm install vue3-mindmap PROPS Name Type Default Description v-model Data[] undefined 设置思维导图数据 x-gap Number 50 设置节点横向间隔 y-gap Number 18 设置节点纵向间隔 branch Number 4 设置连线的宽度 drag Boolean false 设置节点是否可拖拽 zoom Boolean false 是否可缩放、拖移 edit Boolean false 是否可编辑 center-btn Boolean false 是否显示居中按钮 fit-btn Boolean false 是否显示缩放按钮
vue-mindmap：VueMindmap是mindnode贴图的vue组件
02-06
Vue思维导图 VueMindmap是用于mindnode贴图的vue组件，其灵感来自 。 在真棒之上构建的。 安装 npm install --save vue-mindmap 用法 捆绑器（Webpack，汇总） ...import 'vue-mindmap/dist/vue-mindmap.css'
Vue3 思维导图组件安装与配置指南
gitblog_07986的博客
09-13 801
Vue3 思维导图组件安装与配置指南 vue3-mindmap Mindmap component for Vue3 项目地址: https://gitcode.com/gh_mirrors/vu/vue3-mindmap ...
vue3使用simple-mind-map，分分钟开发思维导图
qq_31676725的博客
08-24 8589
思维导图？感觉很复杂的样子，这种很牛p的东西应该不是我三两天就能手写搞定的，于是我`github`转了一圈，果然不出我所料，对比了几个插件以后我是先选择了它
simpleMindMap.js 思维脑图-vue
南山高尔夫的博客
04-01 4359
2、我在utils文件夹中创建了一个simpleMindMap文件夹，里面存放一些封装的方法。个人使用simpleMindMap绘制脑图一点经验。3、创建脑图vue组件。
Vue中使用mind-map实现在线思维导图
LZUGIS
07-15 5649
给大家分享一下基于mind-map实现在线的思维导图，并实现：1. 导图导出为图片；2. 打开xmind文件。
Simple Mind Map：探索GitHub上的开源宝藏，一个强大的Web思维导图工具
10-25 2209
Simple Mind Map 是一个开源的 JavaScript 思维导图库，不依赖任何框架，可以快速集成到 Web 应用中。它不仅支持多种思维导图结构，如逻辑结构图、思维导图、组织结构图等，还提供了丰富的插件和配置选项，满足各种使用场景和习惯。Simple Mind Map 是一款功能强大、简单易用的 Web 思维导图工具，可以帮助我们更好地梳理思路、提升效率、更好地理解和记忆知识。
VUE2项目中应用simple-mind-map实现思维导图功能
weixin_42560947的博客
12-16 1229
其他功能暂不进行演示，功能菜单需要自己手动封装实现，相关监听事件可参考官网进行引用，需要完整代码的可留言。
卸载 simple-mind-map
最新发布
04-18
好的，我现在需要帮助用户找到如何卸载simple-mind-map的方法。首先，我需要确定用户是如何安装这个软件的，因为不同的安装方式对应不同的卸载步骤。常见的安装方式可能有通过包管理器（如npm、Homebrew）、直接下载...
simple-mind-map和antd
02-14
import MindMap from "simple-mind-map"; import "simple-mind-map/dist/style/simple-mind-map.min.css"; // 导入简单思维导图的默认样式表 import { Button } from 'antd'; function App() { useEffect(() => { ...
simple-mind-map vue3使用
02-28
.mindmap-node { font-size: 18px; } .mindmap-edge { stroke-width: 2; } ``` 以上就是将 `simple-mind-map` 整合进 Vue 3 工程的大致流程。需要注意的是实际开发过程中可能遇到更多细节上的差异，具体实现还需...
WebFamily 开源项目教程
gitblog_00863的博客
08-20 338
WebFamily 开源项目教程 WebFamily项目地址:https://gitcode.com/gh_mirrors/we/WebFamily 1. 项目的目录结构及介绍 WebFamily 项目的目录结构如下： WebFamily/ ├── README.md ├── package.json ├── public/ │ ├── index.html │ └── favicon....
Vue3思维导图组件——高效可视化思考工具
gitblog_07985的博客
09-13 1518
Vue3思维导图组件——高效可视化思考工具 vue3-mindmap Mindmap component for Vue3 项目地址: https://gitcode.com/gh_mirrors/vu/vue3-mindmap ...
Vue3-Mindmap 开源项目教程
gitblog_00561的博客
08-21 1308
Vue3-Mindmap 开源项目教程 项目地址:https://gitcode.com/gh_mirrors/vu/vue3-mindmap 项目介绍 Vue3-Mindmap 是一个基于 Vue 3 和 TypeScript 开发的心智图（Mind Map）组件库。它允许开发者快速集成心智图功能到他们的 Vue 3 项目中，提供了丰富的功能和良好的用户体验。该项目遵循 MIT 许可证，鼓励社区...
vue绘制思维导图
水车
07-20 2876
前言 在做web的思维导图功能时，搜索了一些开源项目，在这里整理记录一下 正文 vue-power-tree vue3 github: https://github.com/yj-liuzepeng/vue-power-tree star：9 介绍 本插件在element-plus树形组件基础上，进行了二次封装。适用于vue3项目，在具备了element-plus 的Tree组件的所有功能的...
vue项目中使用思维导图mindmap
TianQiWanLaiQiu的博客
02-23 6441
安装 npm install @hellowuxin/mindmap or yarn add @hellowuxin/mindmap vue中使用 <template> <div class="nav"> <mindmap height="500" width="100%" nodeClick zoomable showNodeAdd v-model="data" &gt...
Vue3 前端 生成 思维导图
m0_59006402的博客
05-21 1176
首先安装markamap 包。
【好用的个人工具】在Docker环境下部署Simple mind map思维导图工具
jks212454的博客
11-28 3070
【好用的个人工具】在Docker环境下部署Simple mind map思维导图工具
如何引入 并使用simple-mind-map
qq_23084251的博客
10-27 1694
simple-mind-map提供了api可以自定义各种节点和样式操作。这个思维导图库只提供画布，更多功能需要自己写按钮或者添加面板进行操作。
simple-mind-map
01-18
### 开源思维导图工具推荐 对于创建基础思维导图的需求，存在多种开源工具能够满足这一目的[^1]。这些工具不仅易于使用而且功能强大，适合不同层次的用户。 #### FreeMind FreeMind 是一款流行的 Java 应用程序，支持跨平台运行。它提供了直观的操作界面以及丰富的节点样式设置选项。通过简单的拖拽操作即可快速构建复杂的思维结构图。 ```xml <mindmap version="0.9.0"> <node TEXT="中心主题"> <node TEXT="分支一"/> <node TEXT="分支二"/> </node> </mindmap> ``` #### XMind XMind 同样是一款广受好评的思维导图软件。除了基本的功能外，还增加了甘特图、鱼骨图等多种图表形式的支持。其社区版完全免费开放给个人用户使用。 #### Draw.io (diagrams.net) Draw.io 提供了一个在线环境让用户无需安装任何额外软件就能立即开始创作。该服务兼容主流浏览器，并且可以直接嵌入到 Google Drive 或 Confluence 中方便文件管理和协作编辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值