思维导图mindmap的使用

已于 2023-03-13 09:41:06 修改
阅读量764 收藏 3
点赞数 2
分类专栏： 项目问题 文章标签： 前端
于 2022-11-01 16:20:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43239880/article/details/127635261
版权

效果
       可以根据数据量的大小，动态的增加或者减小高度，而不是在一个固定的宽高里面缩放（固定宽高数据量大时导出无法使用，上面的字很模糊）。

直接使用插件的效果（固定了宽高，数据量大就很难看）：
在这里插入图片描述

经过代码调整之后：
在这里插入图片描述

数据量大时，撑开盒子，保证清晰度
在这里插入图片描述

插件的选用
mindmap　@hellowuxin/mindmap　
github地址：https://github.com/hellowuxin/mindmap
使用方法：上面的地址有

选用的理由
主要是因为看起来比较好看，跟平时电脑端的思维导图比较像

本项目的gitee地址
gitee地址：https://gitee.com/rui-rui-an/mindmap

其他的一些思维导图
链接查看doc文档

吃炸鸡的前端
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
时间线MindMap里程碑的使用方法
wv_123456的博客
09-12 1249
小编曾经问过很多使用iMindMap的用户，发现大部分人使用的模板都是MindMap,而很少有人使用iMindMap的其它三个模板：捕获，灵感触发，时间线MindMap。后来小编试了下其它三个导图，效果也是杠杠的，只不过风格不一样而已。下面由我来给大家讲解时间线MindMap的使用。 1.首先，新建MindMap时间线，可以在新建时命名，也可在保存时命名。新建时，根据自己的需求选择时间范围，开始
我用FreeMind
jackei的测试生活
04-12 1617
原文出处:http://risker.org/tech/FreeMind/1. 所谓MindMap1.1 MindMap是什么MindMap是什么呢？其实是英国人托尼·巴赞创造的一种提出笔记方法，和传统的直线记录方法完全不同，它以直观形象的图示建立起各个概念之间的联系。在国内，MindMap又被称为脑图或思维导图。思维导图(Mind Mapping)以放射性思考(Radiant T
Vue中使用mind-map实现在线思维导图
LZUGIS
07-15 1591
给大家分享一下基于mind-map实现在线的思维导图，并实现：1. 导图导出为图片；2. 打开xmind文件。
MindMap
多数派的专栏
02-23 1278
MindMap是什么呢？其实是英国人托尼·巴赞创造的一种提出笔记方法，和传统的直线记录方法完全不同，它以直观形象的图示建立起各个概念之间的联系。在国内，MindMap又被称为脑图或思维导图。思维导图(Mind Mapping)以放射性思考(Radiant Thinking)为基础的收放自如方式，除了提供一个正确而快速的学习方法与工具外，运用在创意的发想与收敛、项目企划、问题解决与分析、会议管理
MindMap学习使用
qq_43529437的博客
09-05 615
MindMap学习使用使用MindMap作思维导图MindMapper思维导图美化 占坑 使用MindMap作思维导图 MindMapper思维导图美化 链接地址
在线MindMap脑图整理
我的鱼塘
10-17 620
最近要整理一些东西，所以就要用脑图。但是不想安装Mindmanage或FreeMain。前者我很喜欢，但太大了。如果你经常使用 MindMap，建议还是安装。FreeMind，很好很强大，而且免费，但需要安装Java虚拟机，所以我就不想装了。google一下，发现了在线脑图还不少，这样我就不用携带设备了。而且有网络就可以使用了。将我的MindMap也网络化。参考了天涯海阁的文章。整理一下比较适合我...
obsidian思维导图插件obsidian-enhancing-mindmap
09-07
而今天我们要探讨的是一个能够进一步提升其效能的插件——Obsidian Enhancing Mindmap，它为用户提供了丰富的思维导图功能，让复杂的思考过程变得井然有序。 Obsidian Enhancing Mindmap是专为Obsidian设计的一款...
PTES渗透测试执行标准思维导图_MindMap.pdf
11-25
以下是对PTES思维导图中涉及的知识点的详细解释： 1. **情报收集**： - 开放渠道情报：利用公开信息源，如社交媒体、公开注册信息、搜索引擎等了解目标。 - 业务资产分析：识别关键业务数据、知识产权、财务信息...
obsidian-mind-map:一个黑曜石插件，用于使用Markmap将降价笔记显示为思维导图
04-21
该存储库包含一个用于的插件，可使用将Markdown注释作为思维导图。 提供了类似的插件。 特征 将您当前的笔记预览为思维导图 当您选择其他窗格时，思维导图预览会更新，类似于“ ，“和“窗格 用法 您可以使用命令...
Joplin 思维导图插件 Kity Minder Mindmap Tools Plugin v1.0.2
09-02
1 先通过 https://github.com/xeden3/joplin-plugin-kity-minder/releases 下载最新版本的 com.sctmes.kity-minder.jpl 和 com.sctmes.kity-minder.json 文件，并放入同一个文件夹 ... Download the last release from ...
思维导图(mind map)-大脑的使用说明书.docx
10-27
思维导图被誉为“大脑的使用说明书”，因为它能帮助我们理解并充分利用大脑的工作原理。绘制思维导图时，遵循一定的规则至关重要，这些规则旨在与大脑的自然工作方式相契合，从而提高学习效率、记忆力和创造力。 ...
mindmap
04-05
软件项目开发的好工具
开源项目 `mind-map` 使用教程
最新发布
gitblog_00284的博客
08-08 953
开源项目 mind-map 使用教程 mind-map一个还算强大的Web思维导图。A relatively powerful web mind map.项目地址:https://gitcode.com/gh_mirrors/mi/mind-map 项目介绍 mind-map 是一个开源的思维导图工具，旨在帮助用户通过图形化的方式组织和展示思维过程。该项目提供了丰富的功能，包括节点编辑、样式定制...
时间线MindMap任务功能的使用方法
wv_123456的博客
09-18 969
之前我们已经讲解了时间线MindMap的里程碑功能，接下来我们来看看时间线MindMap的任务功能的使用方法。因为有了里程碑时间划分的阶段，我们可以为每个里程碑添加具体的任务。 1.首先，里程碑中自带添加任务，和连接任务两个选项，点击添加任务选项，任务框会出现在此里程碑中，自动分配给你所点击的里程碑，当然，这也是可自行选择的。   2.任务框左边的加号，点击可添加前置任务框，右边箭头可随意拉
心智图/思维导图（Mind Map/Mind Mapping），思维导图介绍
weixin_34152820的博客
11-04 4074
心智图（Mind Map），又称脑图、心智地图、脑力激荡图、思维导图、灵感触发图、概念地图、树状图、树枝图或思维地图，是一种图像式思维的工具以及一种利用图像式思考辅助工具来表达思维的工具。   心智图是使用一个中央关键词或想法引起形象化的构造和分类的想法; 它用一个中央关键词或想法以辐射线形连接所有的代表字词、想法、任务或其它关联项目的图解方式。它可以利用不同的方式去表现人们的想法，如引题...
思维导图组件@hellowuxin/mindmap的基本使用
m0_52364694的博客
11-07 1210
一、安装mindmap组件 npm install @hellowuxin/mindmap 二、准备数据并应用到mindmap组件 data minddata:[ { name:'如何学习D3', children:[ { name:'预备知识', children:[ {
时间线MindMap泳道的使用方法
wv_123456的博客
09-22 765
接着上次我们讲解的时间线MindMap之任务功能，我们已经能把时间线MindMap的大体框架给列出来了 ，基本上也算有个形了。但是如果我们列出的任务比较的多，比较杂乱，这个时候我们可以使用泳道将任务分层次，使得任务更加清楚分明一点。 1.双击生成快捷方式：泳道或者工具栏中直接有泳道。   2.生成泳道后，可以对其命名。   3.命名后，泳道最左边会出现泳道的名称，以便于区分。  
mind map 思维导图
Alan_EE的博客
10-19 2547
文章目录introduction introduction 单纯使用某一种方法，学习效果都不会很好。mind mapping 结合PQ4R/Smashin scope等方法，会有意外的惊喜。
MindMap：利用知识图谱中的精确、全面信息，并通过大模型进行有效的语义处理和推理
Debroon
06-12 1607
总体而言，MindMap通过创新性地融合知识图谱和大型语言模型，克服了单纯依赖LLM处理复杂查询时的多种限制，为用户提供了更精确、可靠、透明和解释性强的解决方案。MindMap 通过结合知识图谱提供实时知识更新和透明的推理路径，相比传统LLM在处理复杂查询时显著提升了准确性、透明度和解释能力。在此步骤中，我们使用推理图（Gpath m和Gnei m）提示LLM生成最终输出。在此阶段，LLM需要将不同的证据子图（Gq）整合为一个统一的推理图（Gm）。步骤三：LLM在思维图上的推理。
JavaScript如何生成思维导图(mindmap)
05-30
要在JavaScript中生成思维导图，可以使用第三方库，如jsMind或MindMaple。这些库提供了一个易于使用的API来创建和管理思维导图。 下面是使用jsMind库创建简单思维导图的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Mind Example</title> <script src="jsmind.js"></script> <link rel="stylesheet" type="text/css" href="jsmind.css" /> </head> <body> <div id="jsmind_container"></div> <script> var mind = { "meta": { "name": "My Mindmap", "author": "John Doe", "version": "1.0" }, "format": "node_array", "data": [ {"id":"root", "isroot":true, "topic":"Main Topic"}, {"id":"sub1", "parent":"root", "topic":"Subtopic 1"}, {"id":"sub2", "parent":"root", "topic":"Subtopic 2"}, {"id":"sub3", "parent":"root", "topic":"Subtopic 3"}, {"id":"sub4", "parent":"sub3", "topic":"Sub-subtopic 1"}, {"id":"sub5", "parent":"sub3", "topic":"Sub-subtopic 2"} ] }; var options = { container: 'jsmind_container', theme: 'primary', editable: false }; var jm = new jsMind(options); jm.show(mind); </script> </body> </html> ``` 这个示例创建了一个名为"My Mindmap"的思维导图，并包含一个名为"Main Topic"的根节点和一些子节点。你可以根据需要添加和删除节点。要使用这个示例，请下载jsMind库并将其引入到你的HTML文件中。 这只是一个简单的示例，你可以通过jsMind和MindMaple等库创建更复杂的思维导图。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值