【前言】%（&（&……（）*

最近刚好做了个项目，给大家分享一个Vue3 TS setup 如何引入 markmap 思维导图,markmap可以通过markdown解析成思维导图。我们如何将它集成到自己项目中？

【看图】还是先看图再继续

【文档】官方也有文档，如果这个帖子沉了，大家可以直接去官方找最新的

• 官网文档 http://markmap.js.org

• 官方示例 https://markmap.js.org/repl

【实战】如何继承到Vue3项目中

1. 添加依赖

pnpm add markmap-lib
pnpm add markmap-view... tailwindcss

2. 创建vue文件

<template><div class="flex-1"><textarea class="w-full h-full border border-gray-400" v-model="value" /></div><svg class="flex-1" ref="svgRef" />
</template><script lang="ts" setup>
import { ref, onMounted, onUpdated } from 'vue';
import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view/dist/index.esm';const transformer = new Transformer();
const initValue = `# 思维导图
1. 标题1- 子标题1- 子标题2
3. 标题2
4. 标题3
`;
const mm = ref()
const value = ref('')
const svgRef = ref()
const update = () =>{const { root } = transformer.transform(value.value);mm.value.setData(root);mm.value.fit();
}watch(()=>value.value,(n)=>{// 监听输入变化更新思维导图update()
})
onMounted(()=>{// 初始化markmap思维导图mm.value = Markmap.create(svgRef.value);value.value = initValue.value// 更新思维导图渲染update();
})
</script>

ps: 可以集成到chatgpt，具体怎么搞大家先自己玩，路子很多也很野

【结语】纯本人手写，没有科技加持，点赞再走