Vue3 TS setup 引入 markmap 思维导图,通过markdown解析成思维导图，集成到自己项目中

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

最近刚好做了个项目，给大家分享一个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，具体怎么搞大家先自己玩，路子很多也很野

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