// Guide for exporting mind maps as images using `@zumer/snapdom`.
Guide for understanding and converting Mind Elixir plaintext format. Covers format specification, parsing, and conversion to Mind Elixir data structure.
Guide for integrating Mind Elixir into a frontend project, covering installation, initialization, data structure, and basic usage.
Implement real-time streaming mindmap rendering using Mind Elixir in web applications. Supports streaming text parsing and incremental updates.
Guide for customizing markdown rendering in Mind Elixir nodes, including using third-party libraries.
| name | Export Mind Map as Image |
| description | Guide for exporting mind maps as images using `@zumer/snapdom`. |
Mind Elixir recommends using @zumer/snapdom for high-quality image exports. This tool allows you to convert the SVG nodes directly into image formats.
Install @zumer/snapdom as a dependency.
npm install @zumer/snapdom
Use the snapdom function to capture the mind map nodes and download them.
import { snapdom } from '@zumer/snapdom'
// Assuming `mind` is your MindElixir instance
const downloadImage = async () => {
// 1. Capture the nodes
const result = await snapdom(mind.nodes)
// 2. Download as JPG or PNG
await result.download({
format: 'jpg', // or 'png'
filename: 'mind-map-export',
})
}
You can add a button to your UI to trigger this function.
<button id="export-btn">Export Image</button>
<script>
document.getElementById('export-btn').addEventListener('click', downloadImage)
</script>
Note: The built-in
mind.exportSvg()method is deprecated. Please use the method above for new projects.