Data Export Formats

Mind Map Wizard provides robust capabilities for exporting your generated mind maps into various formats, allowing for flexible usage, sharing, and integration with other tools. This section details the available export options and the underlying processes.

Available Export Formats

Users can save their AI-generated mind maps in several popular formats, each suited for different purposes:

• Markdown (.md): Ideal for text-based storage, further editing in markdown-compatible editors, or integration into documentation.
• SVG (.svg): A vector graphics format that allows for infinite scaling without loss of quality, perfect for high-resolution printing or professional design.
• PDF (.pdf): A universal document format that preserves the layout and appearance of the mind map, suitable for sharing and printing.
• JPG (.jpg): A widely supported raster image format, good for web sharing, presentations, and general image use.
• PNG (.png): Another raster image format offering lossless compression, suitable for web and digital use, especially when transparency is needed (though mind maps are typically on a solid background).

User Interaction for Download

The download functionality is initiated via the "Download" button, accessible through the toolbar when a mind map is displayed, or by using the <kbd>D</kbd> keyboard shortcut. Clicking this button triggers a pop-up window, allowing the user to select their preferred export format.

The initializeDownloadFeatures function in scripts/new.js sets up the event listeners for the download button, the options popup, and the format selection. When the "Download" button is clicked, the download-options-popup becomes visible. Users then select a format from the download-format dropdown and click the download-btn to proceed.

Download Process

The core logic for handling downloads resides in two main JavaScript functions: downloadMindmap and downloadAsImage, both located in scripts/new.js.

downloadMindmap(format)

This asynchronous function is the primary entry point for most download requests.

1. Retrieve Mind Map Elements: It first calls DownloadHandler.getMindmapElements() to get a reference to the SVG element representing the mind map and its current title. If no mind map is displayed, an error is thrown.
2. Markdown Export (.md):
   • If format is 'markdown', the function directly accesses the currentMarkdown variable (which holds the raw Markdown text of the mind map).
   • A Blob is created with the Markdown text, and DownloadHandler.triggerDownload() is used to initiate the download of a .md file.
3. Vector Graphics Export (.svg):
   • For SVG, DownloadHandler.getSVGData(svg, padding) is called. This function clones the SVG element, adjusts its width, height, and viewBox attributes to include a padding around the content, and then serializes it into an XML string. This ensures the exported SVG captures the entire mind map with appropriate margins.
   • A Blob is created from the SVG content, and DownloadHandler.triggerDownload() saves it as an .svg file.
4. PDF Export (.pdf):
   • The DownloadHandler.downloadPDF() function handles this. It takes the serialized SVG content, along with its dimensions (width, height), and the mind map topic.
   • It creates a temporary canvas element and uses an Image object to draw the SVG content onto the canvas. This is a crucial step for converting the vector graphic into a raster image, which can then be embedded into a PDF. A scale factor (1.8) is applied to enhance image quality within the PDF.
   • Once the image is drawn, it initializes a jsPDF instance. It calculates optimal positioning and scaling to fit the mind map within the PDF page, supporting both portrait and landscape orientations based on the mind map's aspect ratio.
   • Finally, pdf.addImage() embeds the canvas content (as a JPEG data URL) into the PDF, and pdf.save() triggers the download of the .pdf file.
5. JPG Export (.jpg):
   • The DownloadHandler.downloadJPG() function is used, which similarly uses the getSVGData method to obtain scaled SVG content.
   • It creates a temporary canvas element and draws the SVG content onto it, with a scale factor (2.0) for better image quality. The background is filled with white (#ffffff).
   • The canvas content is then converted to a JPEG data URL (canvas.toDataURL('image/jpeg', 1.0)).
   • DownloadHandler.dataURLToBlob() converts this data URL into a Blob, which is then passed to DownloadHandler.triggerDownload() to save the .jpg file.

downloadAsImage()

This function is specifically responsible for downloading the mind map as a PNG file.

• It mirrors much of the JPG download logic: it clones the SVG, sets its viewBox and dimensions, serializes it to an SVG string, and converts that to a Base64 data URL.
• An Image object loads this SVG data. Upon loading, it draws the image onto a canvas element, applying a scale factor (1.8).
• The key difference is canvas.toDataURL('image/png', 1.0), which generates a PNG image, supporting lossless compression.
• The resulting data URL is used to create a temporary anchor tag, triggering the download of mindmap.png.

Conversion Mechanics

For raster image formats (JPG, PNG) and PDF, the process typically involves:

1. SVG to Canvas: The scalable vector graphics (SVG) representation of the mind map is first rendered onto an HTML <canvas> element. This involves creating an Image object, setting its src to a data URL of the SVG, and then using the canvas's 2D rendering context (drawImage) to render the SVG.
2. Canvas to Image/PDF: Once on the canvas, the canvas.toDataURL() method is used to convert the canvas content into a data URL for either JPEG or PNG formats. For PDF, this image data is then passed to the jsPDF library. Scaling factors are often applied during this conversion to ensure higher resolution outputs.

Analytics Tracking

After a successful download, both downloadMindmap and downloadAsImage call trackEvent('mm_downloaded', { download_format: fileExtension, watermark_inserted: 'false' }) to send an analytics event, capturing which format was downloaded.

These features ensure that users can easily export their mind maps in the most appropriate format for their specific needs, as detailed in [Core Features].