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參考和更多範例。

查看完整文件