simple-mind-map简单而强大的Web思维导图
2024-11-11T00:00:00Z | 1分钟阅读 | 更新于 2024-11-11T00:00:00Z
@
i68.ltd
simple-mind-map简单而强大的Web思维导图
简介
- 简单而强大的Web思维导图
- 项目仓库:https://github.com/wanglin2/mind-map
- 相关文档:https://wanglin2.github.io/mind-map-docs
特点
功能丰富
- 你能想到的和想不到的思维导图的功能它都有。
插件化
- 除核心功能外，其他能力都作为插件提供，按需选择，减少不必要的代码。
易于使用
- 开箱即用，上手简单，配置丰富，文档清晰。
是js库也是工具
- 提供一个框架无关的js库，同时也提供了一个完整功能的网页版和客户端思维导图工具。
使用
cdn示例
<html>
<head>
<title>Mind Map Demo</title>
<link rel="stylesheet" href="https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.esm.css">
<script src="https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.umd.min.js"></script>
<style>
#mindMapContainer * {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="mindMapContainer" style="width: 900px; height: 1000px;"></div>
<script>
const MindMap = simpleMindMap.default;
const mindMap = new MindMap({
el: document.getElementById('mindMapContainer'),
data: {
"data": {
"text": "根节点"
},
"children": [
{
"data": {
"text": "二级节点"
},
"children": [
{
"data": {
"text": "分支主题"
},
"children": []
},
{
"data": {
"text": "分支主题"
},
"children": []
}
]
}
]
}
});
</script>
</body>
</html>
vue示例
pnpm create vue@latest
cd mindmap
pnpm install
pnpm install simple-mind-map
<template>
<div id="mindMapContainer" style="width: 600px; height: 600px" ref="mindMapContainer"></div>
</template>
<style>
#mindMapContainer * {
margin: 0;
padding: 0;
}
</style>
<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue'
import MindMap from 'simple-mind-map'
const mindMapContainer = useTemplateRef('mindMapContainer')
onMounted(() => {
const mindMap = new MindMap({
el: mindMapContainer.value,
data: {
data: {
text: '根节点',
},
children: [],
},
} as any)
})
</script>
pnpm run dev