mcpField
E
Export Mind Map as Image

Export Mind Map as Image

github.com/ssshooter开发3.2k65 次安装1 周前更新
代码仓库

关于 Export Mind Map as Image

本指南介绍使用 `@mind-elixir/export-mindmap` 将 Mind Elixir 思维导图导出为图像，涵盖 PNG、JPEG、WEBP 下载、URL 处理和 SCST DOM 截图。

主要功能

  1. 01将导图下载为 PNG、JPEG 或 WEBP
  2. 02以 URL 形式导出图像
  3. 03使用 SCST 截取 DOM 元素
  4. 04生成 Blob、数据 URL 和对象 URL

适用场景

  1. 01下载思维导图图像
  2. 02通过 URL 预览或处理导出图像
  3. 03将其他 DOM 元素截取为图像

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/ssshooter/mind-elixir-core --skill export-mind-map-as-image

安装后在 Claude Code 中输入/export-mind-map-as-image确认已加载。

详细介绍

将思维导图导出为图像

Mind Elixir 通过 @mind-elixir/export-mindmap 内置的 SCST 引擎导出图像。SCST 是一个轻量、高性能的 DOM 转图像库，基于 SVG <foreignObject> + Canvas 构建，无需依赖第三方截图工具。

1. 安装

将 @mind-elixir/export-mindmap 安装为依赖项。

npm install @mind-elixir/export-mindmap

2. 用法

使用 downloadImage / exportImage 函数捕获思维导图节点并将其下载。

import { downloadImage, exportImage } from '@mind-elixir/export-mindmap'
// Assuming `mind` is your MindElixir instance

// Download as PNG / JPEG / WEBP
await downloadImage(mind, 'png') // format: 'png' | 'jpeg' | 'webp'

// Or get the URL for preview / custom handling instead of downloading
const url = await exportImage(mind, 'png')

3. 直接使用 SCST

SCST 也从此软件包导出，可用于截取任意 DOM 元素。

import { domToBlob, domToDataURL, domToObjectURL } from '@mind-elixir/export-mindmap'

const blob = await domToBlob(element, 'png', options)
const dataUrl = await domToDataURL(element, 'jpeg', options)
const objectUrl = await domToObjectURL(element, 'webp', options) // most memory-efficient for downloads

注意：内置的 mind.exportSvg() 方法已弃用。新项目请使用上述方法。

评论

支持 Markdown