GitHub 地址

安装

npm install vue3-mindmap --registry https://registry.npmmirror.com/

配置组件(包含主题)

建一个静态文件目录public/img/mindmap，将图标文件放入其中

相关的 图标 可以在 GitHub 中找到

npm安装后，在 .vitepress/theme/components 中新建一个组件 mindmap.vue 并写入以下内容

<template>
    <mindmap :data-theme="theme" v-model="data"></mindmap>
</template>

<script setup>
import {ref, watch} from 'vue'
import {defineClientComponent, useData} from 'vitepress'
const mindmap = defineClientComponent(() => {
  return import('vue3-mindmap')
})
import 'vue3-mindmap/dist/style.css'
const { isDark } = useData()
const theme = ref(isDark.value ? 'dark' : 'light')
const data = ref([{
  "name": "如何学习D3",
  "children": [
    {
      "name": "预备知识",
      "children": [
        { "name": "HTML & CSS" },
        { "name": "JavaScript" },
        // Add more children as needed
      ]
    },
    {
      "name": "安装",
      "collapse": true,
      "children": [{ "name": "折叠节点" }]
    },
    { "name": "进阶", "left": true },
  ]
}])

watch(
    () => isDark.value,
    (value) => {
      theme.value = value ? 'dark' : 'light'
    },
);
</script>

<style>
/* 亮色主题 */
[data-theme="light"]{
  --mindmap-bg-color: #f5f5f5; /* 背景色 */
  --mindmap-text-color: #333333; /* 文本颜色 */
  --mindmap-path-color: #ccc; /* 浅灰色路径 */
  --mindmap-button-bg-color: #f0f0f0; /* 按钮背景色 */
  --mindmap-button-text-color: #333; /* 按钮文本颜色 */
  --mindmap-border-color: #ccc; /* 边框颜色 */
  --mindmap-button-hover-color: rgba(0, 0, 255, 0.1); /* 按钮悬停效果 */
  --mindmap-menu-bg-color: #ffffff; /* 菜单背景色 */
  --mindmap-menu-text-color: #333333; /* 菜单文本颜色 */
  --mindmap-icon-color: #3f51b5; /* 图标颜色 */
  --mindmap-selected-border-color: rgba(0, 0, 255, 0.15); /* 选中时边框颜色 */
  --mindmap-createBox-border-color: #fff; /* 新增时边框颜色 */
}

/* 暗黑主题 */
[data-theme="dark"] {
  --mindmap-bg-color: #121212; /* 背景色 */
  --mindmap-text-color: #eaeaea; /* 文本颜色 */
  --mindmap-path-color: #555; /* 深灰色路径 */
  --mindmap-button-bg-color: #333; /* 按钮背景色 */
  --mindmap-button-text-color: #fff; /* 按钮文本颜色 */
  --mindmap-border-color: #444; /* 边框颜色 */
  --mindmap-button-hover-color: rgba(255, 255, 255, 0.1); /* 按钮悬停效果 */
  --mindmap-menu-bg-color: #2c2c2c; /* 菜单背景色 */
  --mindmap-menu-text-color: #eaeaea; /* 菜单文本颜色 */
  --mindmap-icon-color: #fff; /* 图标颜色 */
  --mindmap-selected-border-color: rgba(0, 0, 255, 0.15); /* 选中时边框颜色 */
  --mindmap-createBox-border-color: #1e1e1e; /* 新增时边框颜色 */
}

/* 样式 */
.Mindmap_container_fgvb6 svg text {
  white-space: pre;
  fill: var(--mindmap-text-color); /* 文本颜色 */
}

.Mindmap_svg_fgvb6 {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--mindmap-bg-color); /* 背景色 */
}

.Mindmap_svg_fgvb6 text {
  fill: var(--mindmap-text-color); /* 文本颜色 */
  cursor: default;
}

.Mindmap_svg_fgvb6 foreignObject {
  background-color: var(--mindmap-createBox-border-color); /* 更深的背景 */
  border: 1px solid var(--mindmap-border-color); /* 边框颜色 */
}

.Mindmap_svg_fgvb6 foreignObject div {
  display: inline-block;
  outline: 0;
  width: max-content;
  min-width: 22px;
  padding: 1px;
  white-space: pre;
  color: var(--mindmap-text-color); /* 文本颜色 */
}

.Mindmap_svg_fgvb6 .Mindmap_add-btn_fgvb6 rect {
  stroke-width: 1;
  stroke: var(--mindmap-path-color); /* 边框颜色 */
  fill: var(--mindmap-button-bg-color); /* 按钮背景色 */
}

.Mindmap_svg_fgvb6 .Mindmap_add-btn_fgvb6 path {
  fill: #8685ff; /* 明亮的按钮颜色 */
}

.Mindmap_svg_fgvb6 .Mindmap_expand-btn_fgvb6:hover rect {
  fill: var(--mindmap-button-bg-color); /* 悬停背景色 */
}

.Mindmap_svg_fgvb6 .Mindmap_expand-btn_fgvb6:hover circle {
  fill: #8685ff; /* 悬停时的按钮颜色 */
}

.Mindmap_svg_fgvb6 .Mindmap_text_fgvb6 > rect {
  opacity: 0;
  fill: rgba(0, 0, 255, .15); /* 半透明蓝色 */
  stroke-width: 1;
  stroke: #fff; /* 白色边框 */
}

.Mindmap_svg_fgvb6 .Mindmap_root_fgvb6.Mindmap_selected_fgvb6 > .Mindmap_content_fgvb6 > .Mindmap_text_fgvb6 > rect {
  stroke-width: 3;
  stroke: var(--mindmap-selected-border-color); /* 选中时的边框颜色 */
}

.Mindmap_svg_fgvb6 .Mindmap_outline_fgvb6 > .Mindmap_content_fgvb6 > .Mindmap_text_fgvb6 > rect {
  opacity: 1;
  fill: transparent;
  stroke-width: 3;
  stroke: var(--mindmap-selected-border-color); /* 高亮边框颜色 */
}

.Mindmap_svg_fgvb6 .Mindmap_root_fgvb6 > .Mindmap_content_fgvb6 > .Mindmap_text_fgvb6 > rect {
  opacity: 1;
  fill: var(--mindmap-button-bg-color); /* 按钮背景色 */
}

.Mindmap_button-list_fgvb6 button {
  position: relative;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: var(--mindmap-button-text-color); /* 按钮文本颜色 */
}

#Contextmenu_menu_154ic {
  position: absolute;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
  padding: 4px 4px;
  background-color: var(--mindmap-menu-bg-color); /* 菜单背景色 */
  color: var(--mindmap-menu-text-color); /* 菜单文本颜色 */
  font-weight: 700;
  font-size: small;
  white-space: nowrap;
}

#Contextmenu_menu_154ic ul:not(:last-child)::after {
  display: block;
  content: "";
  background-color: var(--mindmap-path-color); /* 分隔线颜色 */
  height: 1px;
  margin: 4px 10px;
}

#Contextmenu_menu_154ic ul li::before {
  border-radius: inherit;
  background-color: #fff;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: .3s cubic-bezier(.25, .8, .5, 1);
}

#Contextmenu_menu_154ic ul li.Contextmenu_disabled_154ic {
  color: #777; /* 灰色禁用文本 */
  pointer-events: none;
}

.Mindmap_button-list_fgvb6 button i.Mindmap_gps_fgvb6 {
  background-image: url(/img/mindmap/crosshairs-gps.png)
}

.Mindmap_button-list_fgvb6 button i.Mindmap_fit_fgvb6 {
  background-image: url(/img/mindmap/fit-to-page-outline.png)
}

.Mindmap_button-list_fgvb6 button i.Mindmap_download_fgvb6 {
  background-image: url(/img/mindmap/download.png)
}

.Mindmap_button-list_fgvb6 button i.Mindmap_prev_fgvb6 {
  background-image: url(/img/mindmap/prev.png)
}

.Mindmap_button-list_fgvb6 button i.Mindmap_next_fgvb6 {
  background-image: url(/img/mindmap/next.png)
}

.Mindmap_button-list_fgvb6 button i.Mindmap_close_fgvb6 {
  background-image: url(/img/mindmap/close.png)
}
</style>

全局注册组件

在 .vitepress/theme/index.ts 中进行注册，例如：

import mindmap from "./components/mindmap.vue"

export default {
    enhanceApp({ app , router }) {
        app.component('mind-map' , mindmap)
    }
}

使用

在 .md 中写入以下内容

<script setup>
import {ref} from 'vue'

const data = ref([{
  "name": "如何学习123456",
  "children": [
    {
      "name": "预备知识",
      "children": [
        { "name": "HTML & CSS" },
        { "name": "JavaScript" },
        // Add more children as needed
      ]
    },
    {
      "name": "安装",
      "collapse": true,
      "children": [{ "name": "折叠节点" }]
    },
    { "name": "进阶", "left": true },
  ]
}])
</script>


<mind-map style="height: 70vh;" v-model="data" :drag="false" />