with one click
export-mind-map-as-image
// Guide for exporting mind maps as images using `@zumer/snapdom`.
// Guide for exporting mind maps as images using `@zumer/snapdom`.
| 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.
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.