flow-mindmap

flow-mindmap

A modern, minimalist mind mapping tool — xmind-style, embeddable as a Vue 3 component.

特性

• 纯 SVG 渲染,矢量缩放无损
• 拖拽、缩放、平移画布
• 节点文字可直接拖选复制:在文字上横向拖动是选中文字,拖出文字范围才搬动节点
• 多选: Shift+点击 追加/取消,拖动任一选中节点即可整组搬移(拖到节点上成为其子节点,拖到上/下边缘调整为同级)
• 键盘快捷键: Tab 添加子节点 / Enter 添加同级 / F2 编辑 / Delete 删除节点
• 一键折叠/展开子树
• 多种布局模式: mindmap(默认) / tree(右向树) / org(向下组织结构)
• 可调画板: 渐变锥形连线、彩虹分支、节点背景/边框/字体样式、嵌入图片、超链接、节点笔记(Markdown + 实时预览)
• 撤销/重做、JSON 导入导出
• 扁平化 SVG 线框图标,无任何 Emoji
• Apache-2.0 开源协议,可在 npm 安装作为组件使用

预览

三种布局

mindmap(默认)	tree(右向树)	org(向下组织结构)

可调画板

右键画布 → 设置 打开右侧抽屉,所有视觉项实时生效:

安装

pnpm add flow-mindmap

快速开始

全局注册(Vue 插件)

import { createApp } from 'vue'
import App from './App.vue'
import FlowMindmap from 'flow-mindmap'
import 'flow-mindmap/style.css'

const app = createApp(App)
app.use(FlowMindmap) // 注册为 <FlowMindMap />
app.mount('#app')

<template>
  <FlowMindMap :data="data" style="width: 100vw; height: 100vh" />
</template>

局部导入

<script setup lang="ts">
import { MindMap } from 'flow-mindmap'
import 'flow-mindmap/style.css'
import type { MindMapNode } from 'flow-mindmap'

const data: MindMapNode = {
  id: 'root',
  text: '中心主题',
  children: [
    { id: 'a', text: '分支 A', children: [] },
    { id: 'b', text: '分支 B', children: [] },
  ],
}
</script>

<template>
  <MindMap :data="data" style="width: 100vw; height: 100vh" />
</template>

从 Markdown 渲染

<script setup lang="ts">
import { ref } from 'vue'
import { MindMap } from 'flow-mindmap'
import 'flow-mindmap/style.css'

const md = ref(`# 项目计划

## 第一阶段

调研 / 设计

## 第二阶段

实现

## 第三阶段

上线`)

// 监听变化把 markdown 同步回外部存储(可选)
function onMdChange(next: string) {
  // 写入 localStorage / autosave / 远端等
  console.log('md changed, length =', next.length)
}
</script>

<template>
  <MindMap
    :markdown="md"
    :theme="{ fontSize: 16, rainbowBranch: true }"
    :line-colors="['#5eead4', '#fbbf24', '#f472b6', '#a78bfa']"
    @markdown-change="onMdChange"
    style="width: 100vw; height: 100vh"
  />
</template>

markdown prop 接受标准 markdown:# / ## / ### 作为节点层级;紧跟 heading 的 [label](https://github.com/xz333221/flow-mindmap/blob/HEAD/url) 作为节点的 link;```note ... ``` 围栏作为节点的 note;![alt](https://raw.githubusercontent.com/xz333221/flow-mindmap/HEAD/url) 作为图片。改节点文字会自动 emit markdownChange,你可以把它写回输入框或远端。

Props

MindMapTheme 字段

Emits

Expose 方法(通过 ref 访问)

<MindMap ref="mm" :data="data" />
<script setup>
const mm = ref()
mm.value.addChild('a') // 给 id=a 的节点加一个子节点
</script>

节点增删改

节点内容扩展

视图

撤销/重做

导入/导出

设置项

通过 MindMapSettings 控制画板、布局、连线、分支色板等行为。

调色板

连线宽度(高级)

数据类型

import type {
  MindMapNode,
  MindMapImage,
  MindMapOptions,
  MindMapTheme,
  MindMapSettings,
  MindMapExpose,
  NodeStyle,
  LineStyle,
  LayoutMode,
  BranchPalette,
  BranchPaletteId,
} from 'flow-mindmap'

MindMapNode

interface MindMapNode {
  id: string
  text: string
  children: MindMapNode[]
  collapsed?: boolean   // 初始折叠状态
  image?: MindMapImage  // 节点上方嵌入的图片
  link?: { url: string }// 节点超链接(图标点击跳转)
  note?: { text: string }// 节点笔记(图标悬浮预览、点击展开编辑)
  _x?: number           // 内部:拖拽后的位置覆盖(库内部使用,勿读勿写)
  _y?: number
}

MindMapImage

interface MindMapImage {
  src: string           // 远程 URL 或 data URL
  naturalW: number      // 源图原始宽(用于锁定长宽比)
  naturalH: number      // 源图原始高
  width: number         // 当前渲染宽(用户可拖拽调整,24~400 px)
  height: number        // 当前渲染高
}

NodeStyle

interface NodeStyle {
  bg?: string                       // 背景色
  textColor?: string                // 文字色
  borderColor?: string              // 边框色
  fontWeight?: 400 | 600            // 字重
}

MindMapSettings

interface MindMapSettings {
  autoBalanceOnChange: boolean   // 增删/拖拽后自动回到平衡布局
  lineWidthStart: number         // 父端连线粗细
  lineWidthEnd: number           // 子端连线粗细
  rainbowBranch: boolean         // 顶层分支按色板循环配色
  branchPaletteId: string        // 当前色板 id
  customPalettes: BranchPalette[]// 用户自定义色板
  lineStyle: 'curve' | 'straight'// 连线形状:曲线(xmind 默认) / 直线
  layoutMode: 'mindmap' | 'tree' | 'org'  // 布局模式
  taperedEdge: boolean           // 锥形连线(每条独立锥化)
  showOrderBadge: boolean        // 节点上显示兄弟序号角标(调试用)
}

BranchPalette

interface BranchPalette {
  id: string      // 唯一 id
  name: string    // 在选择器里显示的名字
  colors: string[]// 十六进制色值,按顺序循环
}

工具函数

import {
  uid,         // 生成不重复 id
  clone,       // 深克隆节点
  findNode,    // (root, id) => 节点
  findParent,  // (root, id) => 父节点
  removeNode,  // (root, id) => 移除子树
  addChild,    // (parent, text) => 新子节点
  addSibling,  // (node, text) => 新同级节点
  markdownToMindMap, // (md, rootText?) => MindMapNode — 与 MindMap 内部解析逻辑一致
  mindMapToMarkdown, // (node, depth?) => string — 与 MindMap 内部序列化逻辑一致
} from 'flow-mindmap'

全局组件

app.use(FlowMindmap) 会把组件注册为 <FlowMindMap />(驼峰式),所有 prop / event 与 <MindMap> 一致。

本地开发

pnpm install
pnpm dev      # http://localhost:7851  — 应用 demo
pnpm build    # 打包为 npm 库

发版走 scripts/release.mjs（版本号 +1 → 类型检查/单测/冒烟 → 构建 → 发布物自检 → commit + tag + push → npm publish → 核对线上 tarball）：

pnpm release                # 全流程，patch 版本 +1
pnpm release -- --dry-run   # 只打印计划，不改文件、不发布
pnpm release -- --help      # 全部参数

协议

Apache-2.0 © xuze