@jitword/mind-sdk

A self-contained mindmap editor SDK wrapping the mind engine. Provides structured APIs for data manipulation, theming, import/export, permissions, and real-time collaboration.

一个 支持本地部署 的独立思维导图 SDK。提供数据操作、主题管理、导入导出、权限控制和实时协作等结构化 API。

Installation (CDN)

安装（CDN）

Load the SDK via <script> tags. The full bundle includes all dependencies (mind-elixir, jsPDF, JSZip, etc.) in a single file.

通过 <script> 标签加载 SDK。完整包将所有依赖打包为单一文件。

<!-- 1. Process polyfill (required for bundled Node.js deps) -->
<script>
  if (typeof window.process === 'undefined') {
    window.process = {
      env: { NODE_ENV: 'production' },
      versions: { node: '' },
      nextTick: function(fn) { setTimeout(fn, 0) },
      browser: true
    };
  }
</script>

<!-- 2. JitMind SDK (full bundle, UMD) -->
<script src="./lib/jit-mind.full.js"></script>

Quick Start

快速开始

// Access the constructor from UMD global
// 从 UMD 全局变量获取构造函数
var JitMind = window.JitMind.JitMind

// 1. Create instance | 创建实例
var mindmap = new JitMind({
  container: '#mindmap-root',
  locale: 'zh_CN',
  editable: true,
  direction: 'side',
  onChange: function(data) {
    console.log('Mindmap updated:', data)
  }
})

// 2. Initialize (renders into DOM) | 初始化（渲染到 DOM）
mindmap.init().then(function() {
  // 3. Use sub-APIs | 使用子 API
  mindmap.data.addChild('root', 'New Branch')
  mindmap.theme.setTheme('Rainbow')
  mindmap.io.exportPng({ name: 'my-map' })
})

// 4. Listen to events | 监听事件
mindmap.on('change', function(data) {
  console.log('Mindmap updated:', data)
})

// 5. Cleanup | 销毁
mindmap.destroy()

Configuration Options

配置选项

JitMind Facade (formerly JitMindmap)

The main entry point. All functionality is accessed through its sub-API properties.

主入口类。所有功能通过其子 API 属性访问。

DataAPI mindmap.data

CRUD operations for mindmap nodes and data.

思维导图节点与数据的增删改查操作。

Example: Programmatic node manipulation

示例：通过代码操作节点

// Add nodes | 添加节点
const id = mindmap.data.addChild('root', 'Market Research')
mindmap.data.addChild(id, 'Competitor Analysis')
mindmap.data.addSibling(id, 'User Interviews')

// Style the selected node | 设置选中节点样式
mindmap.data.patchNodeStyle({ fontSize: '18px', fontWeight: 'bold' })
mindmap.data.setBranchColor('#ef4444')

// Serialize for saving | 序列化用于保存
const snapshot = mindmap.data.getData()
localStorage.setItem('mindmap', JSON.stringify(snapshot))

ThemeAPI mindmap.theme

Manage visual themes (15 built-in + custom registration).

管理视觉主题（15 个内置 + 自定义注册）。

Built-in Themes

内置主题

Available names: Light, Minimal, Classic, Rainbow, Blue, Green, Orange, Purple, Teal, Sakura, Candy, Dawn, Dark, Midnight, Forest

可用主题名：Light（浅色）、Minimal（极简灰）、Classic（经典商务）、Rainbow（彩虹）、Blue（海洋蓝）、Green（清新绿）、Orange（活力橙）、Purple（优雅紫）、Teal（薄荷青）、Sakura（樱花粉）、Candy（糖果）、Dawn（晨曦）、Dark（深色）、Midnight（午夜蓝）、Forest（森林）

mindmap.theme.setTheme('Midnight')

// Register custom theme | 注册自定义主题
mindmap.theme.registerCustomTheme({
  name: 'Corporate',
  label: 'Corporate Blue',
  group: 'basic',
  preview: ['#f0f9ff', '#1e40af', '#3b82f6'],
  theme: {
    name: 'Corporate',
    palette: ['#1e40af', '#3b82f6', '#0ea5e9'],
    cssVar: { '--main-color': '#1e3a8a', '--bgcolor': '#f0f9ff' }
  }
})

IOAPI mindmap.io

Export and import mindmap in various formats. All export methods trigger a browser download.

以多种格式导入导出思维导图。所有导出方法会触发浏览器下载。

await mindmap.io.exportPng({ name: 'project-plan' })
await mindmap.io.exportXMind({ name: 'project-plan' })

PermissionAPI mindmap.permission

Runtime permission toggling — switch between edit and readonly modes.

运行时权限切换 — 在编辑和只读模式间切换。

// Toggle based on user role | 根据用户角色切换
if (user.role === 'viewer') {
  mindmap.permission.setReadonly()
}

CollabAPI mindmap.collab

Real-time collaboration via CRDT. Uses snapshot-level sync with 300ms debounce.

基于 CRDT算法 的实时协作。采用快照级同步，300ms 防抖。

// Manual connection | 手动连接
await mindmap.collab.connect({
  wsUrl: 'wss://collab.example.com',
  docId: 'doc-123',
  token: 'eyJhbGciOi...',
  userId: 'user-1',
  username: 'Alice',
})

mindmap.on('collab:users', (users) => {
  console.log('Online:', users.map(u => u.name))
})

Events EventBus

事件 EventBus

Types TypeScript

类型定义 TypeScript

interface MindmapData {
  nodeData: NodeData
  linkData?: Record<string, LinkData>
  direction?: number  // 0=right, 1=side, 2=left
  theme?: ThemeConfig
}

interface NodeData {
  id: string
  topic: string
  root?: boolean
  children?: NodeData[]
  style?: NodeStyle
  tags?: string[]
  icons?: string[]
  hyperLink?: string
  memo?: string
  expanded?: boolean
}

interface NodeStyle {
  color?: string
  background?: string
  fontSize?: string
  fontWeight?: string
}

interface ThemeConfig {
  name: string
  palette: string[]
  cssVar: Record<string, string>
}

type PermissionMode = 'edit' | 'readonly'
type CollabStatus = 'idle' | 'connecting' | 'connected' | 'disconnected'

Built-in Themes Reference

内置主题一览

Access via window.JitMind.builtinThemes and window.JitMind.themeGroups

通过 window.JitMind.builtinThemes 和 window.JitMind.themeGroups 获取

Helper: Default Data

工具函数：默认数据

var createDefaultMindmapData = window.JitMind.createDefaultMindmapData

// Creates a default tree with root + 2 branches
// 创建一棵默认树：根节点 + 2 个分支
var data = createDefaultMindmapData('zh_CN')
// → { nodeData: { id: 'root', topic: '中心主题', children: [...] }, linkData: {} }