mindmapcn - 给 shadcn/ui 加个思维导图组件

就像你平时 npx shadcn add button 一样，现在思维导图也能这么安装了。

为什么要做这个?

最近在项目里想加个思维导图功能，试了几个库，要么配置贼复杂，要么样式跟我的 shadcn 项目完全不搭。想着既然 shadcn/ui 那么好用，为什么不能有个思维导图组件呢?

于是就有了 mindmapcn。

一行命令搞定

npx shadcn@latest add https://mindmapcn.vercel.app/mindmaps/mindmap.json

装完就能用，不用配一堆东西，不用费心搞 SSR 异步加载那堆代码，这就是我开发 mindmapcn 的初衷。

它长什么样?

如果你在用 shadcn/ui，那这个组件应该会让你觉得很舒服:

• 自动适配你的主题(亮色/暗色)
• 用的是 Tailwind CSS,想改样式很方便
• 完整的 TypeScript 类型,写起来很爽
• 看起来就像是 shadcn 自带的组件

底层用的什么?

核心是基于 Mind Elixir 这个库。选它是因为:

1. 功能齐全 - 拖拽、缩放、编辑、导出
2. 性能不错 - 节点多了也不卡
3. 数据结构灵活 - 支持标签、图标、颜色这些
4. API 开放 - 想做点高级功能也能实现

mindmapcn 做的事情就是把它包装成 shadcn 风格,让它用起来更顺手。

基本用法

装完之后，代码大概长这样:

import { MindMap } from "@/components/ui/mindmap";

export default function MyMindMap() {
  const data = {
    nodeData: {
      topic: "我的思维导图",
      root: true,
      children: [{ topic: "子节点 1" }, { topic: "子节点 2" }],
    },
  };

  return (
    <div className="h-screen w-full">
      <MindMap data={data} />
    </div>
  );
}

注意: 记得给容器设个高度，不然组件不知道该渲染多大。可以用 h-screen 或者 h-[600px] 这种。

能用来干嘛?

我自己用它做过这些:

• 知识图谱展示
• 项目任务规划
• 组织架构图
• 头脑风暴工具

基本上需要树状结构可视化的场景都能用。

主题适配

如果你的项目有亮色/暗色主题切换，思维导图会自动跟着变。不用写任何额外代码，它会自己检测 CSS 变量然后调整颜色。（当然这个还是要跟 Tailwind 的主题系统配合使用）

定制化

shadcn 生态的优势就是文件直接到你代码库里，所以定制化是很简单的事情，以下是一些常见的定制方式:

• 思维导图配置
• 样式变更
• 事件监听
• 数据导入导出

不过你可能需要先熟悉 Mind Elixir 的 API。

快速开始

安装

npx shadcn@latest add https://mindmapcn.vercel.app/mindmaps/mindmap.json

用起来

import { MindMap } from "@/components/ui/mindmap";

function App() {
  return (
    <div className="h-screen w-full">
      <MindMap
        data={{
          nodeData: {
            topic: "开始",
            root: true,
            children: [{ topic: "简单" }, { topic: "好用" }],
          },
        }}
      />
    </div>
  );
}

更多例子可以看官网文档。

设计想法

做这个组件的时候，我就想着三点:

简单 - 不想让用户配一堆东西。装上就能用，这是最基本的。

好看 - 既然是 shadcn 生态的，样式得跟得上。主题适配、响应式这些都得有。

够用 - 基础功能要全，但也不能太复杂。大部分场景能覆盖到就行，不够用户也可以根据自己需求改。

技术栈

• React/Next.js
• TypeScript
• Tailwind CSS
• Mind Elixir
• shadcn/ui

都是 React 生态标准配置，也是 AI 前端的主流技术栈，所以交给 AI 接入思维导图问题也不大。

开源

代码都在 GitHub 上:https://github.com/SSShooter/mindmapcn

MIT 协议，随便用。有问题可以提 issue，想贡献代码也欢迎 PR~

感谢

这个项目能做出来，得感谢:

• Mind Elixir - 提供了核心功能
• shadcn/ui - 设计理念和组件系统
• mapcn - 给了一些灵感

试试看

ebook-to-mindmap 已经率先用上这个小组件了，目前效果还不错。

如果你正好需要在项目里加个思维导图，欢迎试用:

npx shadcn@latest add https://mindmapcn.vercel.app/mindmaps/mindmap.json

有任何问题或建议，欢迎在 GitHub 上交流。

相关链接

• 官网: https://mindmapcn.vercel.app
• GitHub: https://github.com/SSShooter/mindmapcn
• 文档: https://mindmapcn.vercel.app/docs