Mind Elixir × WordPress Custom Plugin: Implementing SVG/PNG Export Features

2026-08-30

By utilizing Mind Elixir’s export APIs (exportSvg / exportPng) within the custom WordPress plugin that integrates Mind Elixir, we have added “SVG Download" and “PNG Download" buttons to the mind map editor in the administration screen.

Button Addition: Outputs the buttons in the admin screen using PHP
JavaScript Implementation: Implements image generation and downloading using jQuery’s .on('click',…) handler
Preventing Garbled Text: Text rendering utilizing the noForeignObject: true option

Environment Setup

Plugin Structure

Plugin file: wp-mind-elixir-admin.php
Script: js/wp-mind-elixir-admin.js
CSS: css/wp-mind-elixir-admin.css

Mind Elixir Image Export API Overview

Mind Elixir provides the following methods:

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

Eliminates <foreignObject> with noForeignObject = true and renders with pure <text> elements
Allows passing a CSS string to injectCss to embed inside the SVG

Outputting Buttons (PHP Side)

Add download buttons at the top of the mind map editor screen.

 <button id="mea-export-svg" class="button">SVG Download</button>
<button id="mea-export-png" class="button">PNG Download</button>

The button IDs are set to #mea-export-svg and #mea-export-png to make them easy to select with jQuery.

Implementation in JavaScript

Write the following code inside 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('Export failed:', 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. Notes and Applications

Setting noForeignObject to false in exportSvg / exportPng caused an issue where the bottom of the text was cut off, so noForeignObject is set to true for the time being.
While utilizing injectCss might allow for cleaner formatting, prioritizing this workaround came first.

Summary

Added SVG/PNG download buttons to the administration screen
Called the Mind Elixir export API using jQuery’s .on('click',…) to implement Blob generation and downloading
Avoided garbled text using noForeignObject: true, and adjusted styles using injectCss or post-processing as needed

This allows users to export mind maps in high-quality SVG/PNG formats with a single click right from the plugin’s administration screen. Be sure to try implementing it!