wanglin2 / mind-map

一个还算强大的Web思维导图。A relatively powerful web mind map.

Simple mind map

中文名：思绪思维导图。一个简单&强大的 Web 思维导图。

本项目包含两部分：

1.一个 js 思维导图库，不依赖任何框架，可以使用它来快速完成 Web 思维导图产品的开发。

开发文档：https://wanglin2.github.io/mind-map/#/doc/zh/。

2.一个 Web 思维导图，基于思维导图库、Vue2.x、ElementUI 开发，可以操作电脑本地文件，可以当做一个在线版思维导图应用使用，也可以自部署和二次开发。

在线地址：https://wanglin2.github.io/mind-map/。

此外也提供了客户端可供下载使用，支持Windows、Mac及Linux，下载地址：

Github：releases。百度云盘：地址。

客户端版本会落后于在线版本，尝试最新功能请优先使用在线版。

特性

• 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积
• 支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构
• 内置多种主题，允许高度自定义样式，支持注册新主题
• 节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式
• 节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容
• 支持画布拖动、缩放
• 支持鼠标按键拖动选择和 Ctrl+左键两种多选节点方式
• 支持导出为json、png、svg、pdf、markdown、xmind，支持从json、xmind、markdown导入
• 支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条
• 提供丰富的配置，满足各种场景各种使用习惯
• 支持协同编辑
• 支持演示模式

安装

npm i simple-mind-map

使用

提供一个宽高不为 0 的容器元素：

<div id="mindMapContainer"></div>

另外再设置一下css样式：

#mindMapContainer * {
  margin: 0;
  padding: 0;
}

然后创建一个实例：

import MindMap from "simple-mind-map";

const mindMap = new MindMap({
  el: document.getElementById("mindMapContainer"),
  data: {
    data: {
      text: "根节点",
    },
    children: [],
  },
});

即可得到一个思维导图。

想要实现更多功能？可以查看开发文档。

License

MIT。保留mind-map版权声明的情况下可随意商用。

微信交流群

群聊人数较多，无法通过二维码入群，可以微信添加wanglinguanfang拉你入群。

star

如果喜欢本项目，欢迎点个 star，这对我们很重要。

请作者喝杯咖啡

开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡~

推荐使用支付宝，微信获取不到头像。转账请备注【思维导图】。

Think 志斌 小土渣的宇宙 qp ZXR 花儿朵朵 suka Chris 水车 仓鼠 千帆 才镇 小米bbᯤ²ᴳ *棐 Luke 布林 南风 蜉蝣撼大叔 乙 敏 沐风牧草 有希 樊笼 达仁科技 小逗比 天清如愿 敬明朗 飞箭 戚永峰 moom 张扬 长沙利奥软件 HaHN 继龙 欣 易空小易 国发 建明 汪津合 博文 慕智打印-兰兰 锦冰 旭东 俊奇 橘半 pluvet 皇登攀 风格 SR 逆水行舟 LiuJL L sunniberg 在下青铜五 木星二号

mind-map's Issues

Unable to add Hyperlink

Hi sir, @wanglin2 , while adding a hyperlink ( with http:// ) in the node, unable to add // (Slash) in the hyperlink text area sir. even i tried copying and pasting hyperlinks in the hyperlink text area. but can't do it sir
is there any other way to add a hyperlink in the node?

vue中实例化

在vue中使用时实例化时数据报错是咋回事

切换主题后，边框颜色消失且不再支持修改

您好，大佬，能否新增一个全局导航图，当节点层级较深时，可通过移动红色方块快速定位到指定节点，如下图：

支持同时选中多个节点？

Let's do not use these comments

If would you use the right tools (vscode & gitlens (FREE)) you can quickly see who made changes and when.

So you don't need to place the author and date all around. I'm not sure how these descriptions are useful (setMode, as it written, should set the mode. No need to repeat again and again) but it might make sense if you automatically generate documentation.

In this setMode example, there are enum types that are read-only, and edit should be in the documentation as its written. BTW this is why Typescript is useful.

来自匿名用户的反馈

bug反馈：
1、导出时只传递后缀，名称没有传过去（好像固定了是思维导图）。
2、增加备注后，显示备注时无法选择复制文本。（不知道是不是禁用了）
能否增加新功能：
备注能否支持markdown，比如增加tui.editor这类编辑器。
建议：
快捷键 Enter 和 backspace 估计很多人打字时习惯用到。快捷键占用后，输入字时，按了回车键，结果增加了节点。

实例化失败 是怎么回事

节点边框形状，可否增加横线样式

如是图所示，最后一个节点层级，想设置为下面的横线样式。

请问是否适用于移动端呢

请问是否适用于移动端呢？或者如何使用移动浏览器访问？

如何修改快捷键，比如我想把上移节点的快捷键修改为ALT + ↑

添加图标后，无法删除

图标添加后，只能替换，无法删除。

这个好像不支持vue3版本

这个好像不支持vue3版本

可以支持 按住cmd/ctrl 多选节点操作吗

大佬，有没有一些概要和关联线方面的研究，可以分享么

插入图片的节点，能否新增一个图片预览功能~~~

新增关联线

新增节点之间的关联线

默认开启小地图，当渲染几百个以上的节点时，小地图会处于长时间空白，只有当移动节点时，小地图才能立即渲染数据

小地图关闭时，报错

Cannot add Capital Letters

Hi there, i tried this code.. it's really good.. 👍
But is there some limitations i faced such as using capital letters by using SHIFT and keys, trying to add different colours for each connections, and user defined connection style (like straight line, curved line, boxed line...)

Is there any way to do it?

当某父节点下的子节点为收起状态时，将该父节点移动到其他节点下时，只有父节点被移动过来，其子节点全部被删除（具体操作如下图）

Hi sir, is there any way to change color of the each brach?

Hi @wanglin2 sir, is there an option to change each branch color separately as shown in the image?

嗨@wanglin2 先生，是否可以选择单独更改每个分支颜色，如图所示？

cdn的引入方式

作者你好，我修改了一下代码，但是想以cdn的形式引入，如何打包放入呢？

npm的版本什么时候更新呀~~

要是有个概括就更完美了

就是同一级的连续多个兄弟节点，可以有个大括号

建议：浮动节点，翻译优化

对不起，我正在使用翻译器可能造成的误解。

非常感谢您提供如此丰富而复杂的免费工具，喜欢它。

作为可能的实现要建议浮动节点。能够将它们从树中分离出来，这使得开发思维导图非常有用。

此外，正在努力翻译它。如果 div 中的所有文本都在标签中而不是空的，那将非常有帮助。< span > 或者也许将所有单词包装到单独的字典中。如果您打算使其翻译友好。

非常感谢。

有react版本的实现吗

如果在ToolBar 上面有一些文章列表， 想拖拽一段文字 插入到一个节点上， 要如何实现， 希望给些提示

Is it possible to Move connectors Lines in user preferred manner?

Hi, @wanglin2 is it possible to add a menu item while editing the nodes as mentioned in the first image? [it will be handy for the users to use or edit URLs/image/text styling in the nodes]

Suggestion: moving the connector lines for the nodes in user preferred location, [this will improve the users to adjust the look/style of the mind map]

URLs in the nodes not accessible in pdf export

Suggestion: Adding sub-nodes at the top and bottom of the root nodes [this will helps the user to build the mind map more compactly]

Suggestion: Adding node editing option in 大纲 section

is it possible to inport content from excel file?

Hi @wanglin2 sir, is it possible to import the mindmap data using an excel file?
it will be useful to edit data in the user-preferred method (most users will use excel files to collect mindmap data). so if there is an option to import data using an excel file it will be useful for most users

禁用状态仍然可用

不选择节点，工具栏显示的灰色的，鼠标悬浮显示禁止点击。但是事实上仍然可以点击打开对应的弹窗。

win操作下，编辑节点文本时，当失去焦点后，节点文本并未改变，只能通过回车修改节点文本（mac和linux下正常）

Hi @wanglin2 sir, is it possible to export an generated image in pdf format?

Hi @wanglin2 sir, can you please tell me if is there any way to export generated mind map images in pdf format (now only .smm, JSON, png, and SVG options only available)

逻辑图和思维导图两种类型的连接线支持直线风格

当复制的节点其子节点为收起状态下，其子节点不能跟随父节点被一起复制

二级节点后无子节点，展开所有/收起所有操作后的报错信息

simple-mind-map库中,src/Node.js文件中需添加判断条件。

vite中使用是报错

依赖不支持导致,参照下面的issues
不知道有没有什么替代方案
nashwaan/xml-js#54

抽离出来的独立web文件夹下如何进行打包操作~~~

npm升级至0.2.10时，切换结构为思维导图结构时，报错（我是在vue3情况下，具体报错如下），降至0.2.9版本正常使用。

事件冲突: 编辑节点时，退格键会冒泡触发删除节点

在双击节点编辑后，使用退格键backspace会触发绑定的删除节点事件

可否支持多人共享

我看到目前的数据只是存档到localstorage中，可否考虑将数据存放到服务端或者本地文件中，这样就可以支持多人共享了。

根节点插入超过2个子节点会爆栈

当画布位置left，top不为0时，拖拽节点有位置偏差

实际节点，不好意思打成时间了

您好，能否提供一个下拉选项或操作按钮，来控制展开节点的层级数量（当多个节点层级很深时，可一键展开到指定节点层级）例如下图

节点不可编辑

有计划支持增加某个节点禁止操作的commod吗

Is there a way to show history tab/page in the mind map workspace itself?

Hi @wanglin2 sir, is there is a way to save the developed mind map and store it in history tab/page in the workspace itself like portfolio of the project, option to delete/share those mind map histories?
And option to export .Smm/.json/.png/.pdf though email

It will be helpful for users using this tool simultaneously.

能否新增xmind格式的文件导入导出功能

Is it possible to keep nods in the user defiend position?

I came across your project. it's very cool.. but when I try to include more than 20 nodes in the root node the mind map cannot fit into the page. I am trying to export it as png and include it in the PowerPoint presentation but it is difficult to do it with auto position.. is it possible to mode nodes freely to rearrange the nodes so that I could use this code in my project?

有没有只读功能

如果子节点为收起状态，在其父节点新建子节点，子节点应该为展开状态并聚焦是不是会好一点...