Relation Graph

Functional Overview

This example demonstrates how to export the entire graph visualization as an image, regardless of the current zoom level or viewport position. The export captures the complete graph content at full resolution, making it ideal for creating high-quality documentation, presentations, or sharing visualizations. The demo integrates a “Download Image” button into the toolbar and shows how to handle the export workflow properly.

Implementation of Key Features

Graph Image Export API

The core export functionality uses the prepareForImageGeneration method:

const downloadImage = async () => {
    const canvasDom = await graphInstance.prepareForImageGeneration();
    const imageBlob = await domToImageByModernScreenshot(canvasDom, {
        backgroundColor: '#ffffff'
    });
    if (imageBlob) {
        downloadBlob(imageBlob, 'my-image-name');
    }
    await graphInstance.restoreAfterImageGeneration();
};

The process involves three steps: prepare the canvas, capture the image, and restore the graph state.

Custom Toolbar Button

A download button is added to the mini toolbar:

<RGMiniToolBar positionV='bottom' direction='v'>
    <div
        className="w-8 h-8 border rounded flex place-items-center justify-center bg-red-700 animate-pulse text-white cursor-pointer hover:text-yellow-200 hover:animate-none"
        onClick={downloadImage}
    >
        <ImageIcon size={20} />
    </div>
</RGMiniToolBar>

The button uses pulsing animation to draw attention to the export feature.

Background Color Configuration

The image export includes a white background for better visibility:

const imageBlob = await domToImageByModernScreenshot(canvasDom, {
    backgroundColor: '#ffffff'
});

This ensures the exported image looks good regardless of the original graph background.

State Management During Export

The demo properly handles state restoration after export:

await graphInstance.restoreAfterImageGeneration();

This is crucial for maintaining the graph’s interaction state after the temporary modifications made for image generation.

Integration with Third-Party Screenshot Library

The demo uses modern-screenshot for the actual image capture:

import { domToImageByModernScreenshot, downloadBlob } from '../simples-common-components/domToImageByModernScreenshot';

Relation-graph provides the prepared DOM element, but any screenshot library can be used.

Creative Use Cases

Documentation Generation

Automatically generate documentation images that always show the complete graph. Useful for API documentation, technical reports, or system architecture documents that need up-to-date visualizations.

Presentation Slides

Create presentation slides with graph visualizations. The export ensures high-resolution images that look professional when projected or printed, regardless of how the graph was being viewed.

Social Media Sharing

Enable users to share interesting graph visualizations on social media. The export creates clean, complete images suitable for Twitter, LinkedIn, or other platforms.

Automated Report Generation

Integrate into automated reporting systems that periodically generate status reports with embedded graph visualizations. The export can be triggered on a schedule.

Graph Comparison and Versioning

Export graphs at different points in time to create visual records of evolution. Useful for showing growth, changes, or comparisons in presentations or archives.

Print and Publication

Create print-ready images of graphs for publications, posters, or physical reports. The export captures everything at full resolution, ensuring quality when printed.

Collaborative Review

Export graphs to include in design reviews, stakeholder presentations, or client deliverables. The consistent image format ensures everyone sees the same visualization.

Generate an image from graph content