<h1 align="center">简单思维导图</h1>

npm下载量许可证

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

本项目包含两部分：

1.一个JavaScript思维导图库，不依赖任何框架，可以使用它来快速完成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。百度云盘：地址。

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

【云存储版本】如果你需要带后端的云存储版本，可以尝试我们开发的另一个项目理想文档。

特性

官方提供了如下插件，可根据需求按需引入（某个功能不生效大概率是因为你没有引入对应的插件），具体使用方式请查看文档：

RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、OuterFrame（外框插件）、HandDrawnLikeStyle（手绘风格插件）[收费]、Notation（节点标记插件）[收费]、Numbers（节点编号插件）[收费]

本项目不会实现的特性：

1.自由节点，即多个根节点；

2.概要节点后面继续添加节点；

如果你需要以上特性，那么本库可能无法满足你的需求。

安装

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: [],
  },
});

即可得到一个思维导图。

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

许可证

微信交流群

一群已满，可以扫描如下二维码进入二群，如已过期，可以微信添加wanglinguanfang拉你入群。思维导图相关问题皆可在群里提问，不必私聊作者。

星标

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

关于定制

如果你有个性化的商用定制需求，可以联系我们，我们提供付费开发服务，无论前端、后端、还是部署，都可以帮你一站式搞定。

请作者喝杯咖啡

Open source development is not easy. If this project has been helpful to you, please consider buying the author a cup of coffee. Your support is the biggest motivation for developers to continue maintaining the project!

We recommend using Alipay, as WeChat doesn't provide avatars. Please include "Mind Map" in the transfer note.

<img src="https://yellow-cdn.veclightyear.com/835a84d5/4105841f-1af1-4ff8-96fe-b02610320521.jpg" style="width: 300px" /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/87a3da24-1fe3-49d8-a660-f29dcff455b8.jpg" style="width: 300px" /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/9bb8c54b-2034-4b15-9df3-8c82416bcda3.jpg" style="width: 50px;height: 50px;" /> 思考 <img src="https://yellow-cdn.veclightyear.com/835a84d5/a6d9e701-c70c-4caa-be9a-fa2912253dd0.jpg" style="width: 50px;height: 50px;" /> 志斌 <img src="https://yellow-cdn.veclightyear.com/835a84d5/d2660bfb-3ffc-4741-9258-f150bfc5c25e.jpeg" style="width: 50px;height: 50px;" /> 小土渣的宇宙 <img src="https://yellow-cdn.veclightyear.com/835a84d5/74448120-3c13-4117-8ce0-ceefea9dc4b7.jpg" style="width: 50px;height: 50px;" /> qp <img src="https://yellow-cdn.veclightyear.com/835a84d5/8bf473dd-0556-404d-bdcb-398bceeecd8e.jpg" style="width: 50px;height: 50px;" /> ZXR <img src="https://yellow-cdn.veclightyear.com/835a84d5/a0780873-cd87-4847-b7b0-54494017581a.jpg" style="width: 50px;height: 50px;" /> 花儿朵朵 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5e5ce8bd-0181-47a0-8e26-8098dfc6bb61.jpg" style="width: 50px;height: 50px;" /> suka <img src="https://yellow-cdn.veclightyear.com/835a84d5/e90585cf-7a04-43c4-b2ae-70913cb86fd5.jpg" style="width: 50px;height: 50px;" /> 克里斯 <img src="https://yellow-cdn.veclightyear.com/835a84d5/484ecaf7-fed3-44af-a6bb-689000785a97.jpg" style="width: 50px;height: 50px;" /> 水车 <img src="https://yellow-cdn.veclightyear.com/835a84d5/9d5082d3-8e72-4043-8e14-0669bc4deb22.jpg" style="width: 50px;height: 50px;" /> 仓鼠 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5b34d09f-3078-4ffa-b513-b610b08e374c.jpg" style="width: 50px;height: 50px;" /> 千帆 <img src="https://yellow-cdn.veclightyear.com/835a84d5/ba1fa9de-196c-4507-839c-0c21be2dd0b0.jpg" style="width: 50px;height: 50px;" /> 才镇 <img src="https://yellow-cdn.veclightyear.com/835a84d5/cda8e259-3337-461d-80b5-3e8d84067c60.jpg" style="width: 50px;height: 50px;" /> 小米bbᯤ²ᴳ <img src="https://yellow-cdn.veclightyear.com/835a84d5/42d61259-1e72-431a-8473-ba29a6acefac.jpg" style="width: 50px;height: 50px;" /> *棐 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> 卢克 <img src="https://yellow-cdn.veclightyear.com/835a84d5/3a2572a4-e143-4a45-a13a-67faf0933f9a.jpg" style="width: 50px;height: 50px;" /> 布林 <img src="https://yellow-cdn.veclightyear.com/835a84d5/37ce5f9e-ba80-4f55-8bad-0bd24f6d3b95.jpg" style="width: 50px;height: 50px;" /> 南风 <img src="https://yellow-cdn.veclightyear.com/835a84d5/2e6ed039-402b-4a4d-8394-c25639fd1e8f.jpg" style="width: 50px;height: 50px;" /> 蜉蝣撼大叔 <img src="https://yellow-cdn.veclightyear.com/835a84d5/fdd85a1d-c9b3-4e6d-b7de-59c055e8f133.jpg" style="width: 50px;height: 50px;" /> 乙 <img src="https://yellow-cdn.veclightyear.com/835a84d5/4d27061a-40bc-420b-9889-262a619f6890.jpg" style="width: 50px;height: 50px;" /> 敏 <img src="https://yellow-cdn.veclightyear.com/835a84d5/e309e1a1-a50b-4bd8-a2bb-dc9f0f0294bb.jpg" style="width: 50px;height: 50px;" /> 沐风牧草 <img src="https://yellow-cdn.veclightyear.com/835a84d5/6467d854-67b0-4ce6-97ed-6ff97b2a5f30.jpg" style="width: 50px;height: 50px;" /> 有希 <img src="https://yellow-cdn.veclightyear.com/835a84d5/6bfba70c-eaf1-487e-bd2b-6583f151f59e.jpg" style="width: 50px;height: 50px;" /> 樊笼 <img src="https://yellow-cdn.veclightyear.com/835a84d5/46752a91-7b74-4a04-ac46-a638d766841e.jpg" style="width: 50px;height: 50px;" /> 达仁科技 <img src="https://yellow-cdn.veclightyear.com/835a84d5/773d9e0d-e505-4a36-bad7-fbd4237b3ac7.png" style="width: 50px;height: 50px;" /> 小逗比 <img src="https://yellow-cdn.veclightyear.com/835a84d5/1e82f590-d598-4ab6-a5db-10a6172b9dba.jpg" style="width: 50px;height: 50px;" /> 天清如愿 <img src="https://yellow-cdn.veclightyear.com/835a84d5/198af67c-3488-4b1e-8c7d-e4dfc159dd41.jpg" style="width: 50px;height: 50px;" /> 敬明朗 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> 飞箭 <img src="https://yellow-cdn.veclightyear.com/835a84d5/357d0213-27bc-4d39-83e4-d2c5762a53d4.png" style="width: 50px;height: 50px;" /> 戚永峰 <img src="https://yellow-cdn.veclightyear.com/835a84d5/51da657c-b28a-4a58-b53b-b29f7c8b5c2f.jpg" style="width: 50px;height: 50px;" /> moom <img src="https://yellow-cdn.veclightyear.com/835a84d5/5d70ff83-a8e9-4369-8620-e48013d0f6df.png" style="width: 50px;height: 50px;" /> 张扬 <img src="https://yellow-cdn.veclightyear.com/835a84d5/6a50ca53-2a80-4b42-88b5-382165130fc7.jpg" style="width: 50px;height: 50px;" /> 长沙利奥软件 <img src="https://yellow-cdn.veclightyear.com/835a84d5/25eee652-c2a5-49a0-a2ef-f4533affd740.jpg" style="width: 50px;height: 50px;" /> HaHN <img src="https://yellow-cdn.veclightyear.com/835a84d5/8e757318-71c0-42f0-900b-13209e0b7adf.jpg" style="width: 50px;height: 50px;" /> 继龙 <img src="https://yellow-cdn.veclightyear.com/835a84d5/938b935e-9f1f-43e3-80af-76600e4dba21.jpg" style="width: 50px;height: 50px;" /> 欣 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> 易空小易 <img src="https://yellow-cdn.veclightyear.com/835a84d5/99d31533-1559-428e-8dac-3ad5eb1da268.jpg" style="width: 50px;height: 50px;" /> 国发 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> 建明 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5deff39c-e34a-4849-ac59-8dd50b4c07ad.jpg" style="width: 50px;height: 50px;" /> 汪津合 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> 博文 <img src="https://yellow-cdn.veclightyear.com/835a84d5/9c9733a0-5472-44d2-b895-621f6cd5329c.jpg" style="width: 50px;height: 50px;" /> 慕智打印-兰兰 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> 锦冰 <img src="https://yellow-cdn.veclightyear.com/835a84d5/0f6493dd-ff84-4823-8740-05a7406ab387.png" style="width: 50px;height: 50px;" /> 旭东 <img src="https://yellow-cdn.veclightyear.com/835a84d5/00b76220-f4d0-4134-ae61-ad559d2daf04.jpg" style="width: 50px;height: 50px;" /> 俊奇 <img src="https://yellow-cdn.veclightyear.com/835a84d5/532ef6ae-7a18-4a2b-9b52-df6e1a659e5e.jpg" style="width: 50px;height: 50px;" /> 橘半 <img src="https://yellow-cdn.veclightyear.com/835a84d5/45aaf9ec-00db-4f9b-a331-c1ce3168ae0d.jpg" style="width: 50px;height: 50px;" /> pluvet <img src="https://yellow-cdn.veclightyear.com/835a84d5/0a192376-f450-4046-bab8-a16a317bd081.jpg" style="width: 50px;height: 50px;" /> 皇登攀 <img src="https://yellow-cdn.veclightyear.com/835a84d5/1425d077-eec6-41e3-99d2-da935dee52e2.jpg" style="width: 50px;height: 50px;" /> 风格 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> SR <img src="https://yellow-cdn.veclightyear.com/835a84d5/727d8b77-1477-4374-9620-e80031a3ef33.jpg" style="width: 50px;height: 50px;" /> 逆水行舟 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> LiuJL <img src="https://yellow-cdn.veclightyear.com/835a84d5/6664a454-7a36-4ff1-b0c6-f93777529cf6.jpg" style="width: 50px;height: 50px;" /> L <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> sunniberg <img src="https://yellow-cdn.veclightyear.com/835a84d5/5d5fa856-456e-437f-acc3-4fe4cb4b77bc.jpg" style="width: 50px;height: 50px;" /> 在下青铜五 <img src="https://yellow-cdn.veclightyear.com/835a84d5/c7183dc2-7019-4a47-9d81-6a0ab4c44c75.jpg" style="width: 50px;height: 50px;" /> 木星二号 <img src="https://yellow-cdn.veclightyear.com/835a84d5/9f35b8de-4e7c-4935-9b2c-a6857a698da2.jpg" style="width: 50px;height: 50px;" /> 阿晨 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> 铁 <img src="https://yellow-cdn.veclightyear.com/835a84d5/ce8777a6-eb81-44ce-adc3-b15c2eea86c4.jpg" style="width: 50px;height: 50px;" /> 庆国 <img src="https://yellow-cdn.veclightyear.com/835a84d5/9f946d9b-cad1-43ad-b221-337b0636673f.jpg" style="width: 50px;height: 50px;" /> Alex <img src="https://yellow-cdn.veclightyear.com/835a84d5/05b542ca-4b2a-46cc-8725-fe5234af72b3.jpg" style="width: 50px;height: 50px;" /> 子豪 <img src="https://yellow-cdn.veclightyear.com/835a84d5/b2b249bd-f527-440f-93de-05eb1a013b0c.jpg" style="width: 50px;height: 50px;" /> 宏涛 <img src="https://yellow-cdn.veclightyear.com/835a84d5/1552a3a7-2e65-4eb8-9019-d36c9122a614.jpg" style="width: 50px;height: 50px;" /> 最多5个字 <img src="https://yellow-cdn.veclightyear.com/835a84d5/56f65ba4-2bef-40c5-9079-265aab484fb6.jpg" style="width: 50px;height: 50px;" /> 雨馨 <img src="https://yellow-cdn.veclightyear.com/835a84d5/221dd5ec-1a7a-4173-8abf-e3ee9416d355.jpg" style="width: 50px;height: 50px;" /> ZX <img src="https://yellow-cdn.veclightyear.com/835a84d5/e2049137-e62e-4220-b5f2-f98a90e0a3a2.jpg" style="width: 50px;height: 50px;" /> 峰 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> 协成 <img src="https://yellow-cdn.veclightyear.com/835a84d5/9d4e72cc-95f7-4ee2-90d8-c18fe79ed634.jpg" style="width: 50px;height: 50px;" /> 木木 <img src="https://yellow-cdn.veclightyear.com/835a84d5/f7d286dd-5a1c-4216-ae6e-16bf5c312d0d.jpg" style="width: 50px;height: 50px;" /> 好名字 <img src="https://yellow-cdn.veclightyear.com/835a84d5/1c8b1f91-0532-4deb-a57a-ae34db41c71b.jpg" style="width: 50px;height: 50px;" /> Kyle <img src="https://yellow-cdn.veclightyear.com/835a84d5/fe674d94-0ef3-402e-ab58-3f36c339949d.jpg" style="width: 50px;height: 50px;" /> lsytyrt <img src="https://yellow-cdn.veclightyear.com/835a84d5/0e856a20-450a-4a69-bb0c-33eec708707e.jpg" style="width: 50px;height: 50px;" /> 秀树因馨雨 <img src="https://yellow-cdn.veclightyear.com/835a84d5/b2f0bff1-9069-4a07-9352-0b6a7d9987d6.jpg" style="width: 50px;height: 50px;" /> 巴迪 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> 小川 <img src="https://yellow-cdn.veclightyear.com/835a84d5/2c83b2f6-7f24-40d3-bb06-bebe18bb57cc.jpg" style="width: 50px;height: 50px;" /> 托宾 <img src="https://yellow-cdn.veclightyear.com/835a84d5/a179aa64-0c0d-46b3-a141-65f4fab94ac0.jpg" style="width: 50px;height: 50px;" /> 夏虫不语冰 <img src="https://yellow-cdn.veclightyear.com/835a84d5/faeed567-7186-4171-8151-98c3bb2a0ca3.jpg" style="width: 50px;height: 50px;" /> 晴空 <img src="https://yellow-cdn.veclightyear.com/835a84d5/5de49c0d-47df-4eaa-b35e-0ad4b8f9a30c.png" style="width: 50px;height: 50px;" /> 黄泳 <img src="https://yellow-cdn.veclightyear.com/835a84d5/040deebd-71fc-4792-9bc6-25522b1f81b6.jpg" style="width: 50px;height: 50px;" /> ccccs <img src="https://yellow-cdn.veclightyear.com/835a84d5/bc91da63-bafa-4e9f-b6d8-33345b40dbfe.png" style="width: 50px;height: 50px;" /> 。 <img src="https://yellow-cdn.veclightyear.com/835a84d5/e8bb9a44-9a25-481e-a87a-c79a22ddbf5f.jpg" style="width: 50px;height: 50px;" /> 杰弗里 <img src="https://yellow-cdn.veclightyear.com/835a84d5/cb8cbe8b-3d18-4b70-915d-d3451d406908.jpg" style="width: 50px;height: 50px;" /> 张文建