NPM 包

直接在您的 JavaScript 或 TypeScript 项目中构建思维导图。@clipmind/mindmap 包提供了一个强大而灵活的 API，用于创建、操作和导出专业的思维导图。

安装

使用 npm、yarn 或 pnpm 安装此包：

Terminalbash

# Using npm
npm install @clipmind/mindmap

# Using yarn
yarn add @clipmind/mindmap

# Using pnpm
pnpm add @clipmind/mindmap

快速入门

以下是一个创建和导出一个思维导图的基本示例：

示例TypeScript

import { useEffect, useState } from 'react';
import { MindMapEditor, generateStore, loadFromMarkdown } from '@clipmind/mindmap';
import styled from 'styled-components';
import type { MindMapStore } from '@clipmind/mindmap';

const Container = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

export function MindmapDemo() {
  const [store, setStore] = useState<MindMapStore | null>(null);

  useEffect(() => {
    // generateStore is async to ensure fonts are loaded before layout calculation
    generateStore().then(s => {
      loadFromMarkdown('# Hello World\n\n## Item 1\n### Item 1.1\n## Item 2', s);
      setStore(s);
    });
  }, []);

  if (!store) {
    return <Container>{'Loading...'}</Container>;
  }

  return (
    <Container>
      <MindMapEditor store={store} />
    </Container>
  );
}

功能

TypeScript 支持

提供完整的 TypeScript 支持及全面的类型定义，以获得更佳的开发体验。

多种布局

提供 6 种不同的布局类型供您选择，以最佳方式可视化您的想法和数据。

56+ 主题

拥有丰富的色彩主题库，可匹配您的品牌或个人偏好。

多种导出格式

可将您的思维导图导出为 SVG、PNG 或 PDF 格式，并提供可自定义的选项。

可用布局

从6种不同的布局类型中选择来组织您的思维导图：

Mindmap

Logic

Org

Tree

Fishbone

Timeline

主题库

超过56种内置颜色主题可自定义您的思维导图：

+44 更多

核心 API

方法	描述
`generateStore()`	初始化一个新的 MindMapStore 实例。
`loadFromMarkdown(md)`	从 Markdown 字符串加载思维导图结构。
`addChildNode(parentId)`	向指定的父节点添加一个新的子节点。
`deleteNodes(nodeIds)`	根据ID删除节点。
`setNodeText(nodeId, text)`	更新节点的文本内容。
`setLayout(type)`	更改思维导图的布局类型。
`setTheme(name)`	为思维导图应用颜色主题。
`saveSvg()`	将思维导图导出为SVG文件。
`savePng()`	将思维导图导出为PNG图像。
`savePdf()`	将思维导图导出为PDF文档。

开始使用

准备在您的项目中构建思维导图了吗？查看完整文档以获取详细的API参考和更多示例。

查看完整文档