Mind Elixir × WordPress 自作プラグイン：SVG／PNGエクスポート機能を実装

2025-06-042025-09-06

Mind Elixirをwordpressに組み込んだ自作プラグインに、Mind ElixirのエクスポートAPI（exportSvg／exportPng）を活用して、管理画面のマインドマップエディタに「SVG ダウンロード」「PNG ダウンロード」ボタンを追加しました。

ボタン追加：PHPで管理画面にボタンを出力
JavaScript実装：jQueryの.on('click',…)ハンドラで画像生成・ダウンロードを実装
文字化け回避：noForeignObject: trueオプションを使ったテキスト描画

環境準備

プラグイン構成

プラグインファイル：wp-mind-elixir-admin.php
スクリプト：js/wp-mind-elixir-admin.js
CSS：css/wp-mind-elixir-admin.css

Mind Elixir 画像エクスポートAPI概要

Mind Elixirは以下のメソッドを提供します：

exportSvg(noForeignObject?: boolean, injectCss?: string)

noForeignObject = trueで<foreignObject>を排除し、純粋な<text>要素で描画
injectCssにはSVG内に埋め込むCSS文字列を渡せる

ボタンの出力（PHP側）

マインドマップエディタ画面の上部に、ダウンロード用ボタンを追加します。

 <button id="mea-export-svg" class="button">SVG ダウンロード</button>
<button id="mea-export-png" class="button">PNG ダウンロード</button>

ボタンIDを#mea-export-svg/#mea-export-pngとし、jQueryでセレクトしやすくしています。

JavaScriptでの実装

js/wp-mind-elixir-admin.js内で、以下のように書きます。

 async function downloadImage(type) {
let blob;
try{
if (type === 'png') {
blob = await mind.exportPng(true, '');
} else {
blob = mind.exportSvg(true, '');
}
} catch (err) {
console.error('エクスポート失敗:', err);
return;
}
if (!blob) return;
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `mindmap.${type}`;
a.click();
URL.revokeObjectURL(url);
}

$('#mea-export-png').on('click', function(){
downloadImage('png');
})
$('#mea-export-svg').on('click', function(){
downloadImage('svg');
})

5. 注意点と応用

exportSvg／exportPng の noForeignObject を false にすると文字の下部が切れてしまう問題があったため、当面は noForeignObject を true に設定しています。
injectCss を活用すればよりきれいに整形できる可能性がありますが、まずはこの対策を優先しました。