Generate Graph Image with Transparent Background

This example demonstrates how to generate a screenshot of the graph with a transparent background. Using the prepareForImageGeneration and restoreAfterImageGeneration methods, the graph automatically prepares for image capture and restores its state afterward. The generated image can be used as an overlay in other applications or documents where transparency is required.

Key features include: prepare and restore pattern with dedicated graph instance methods, transparent background configuration using backgroundColor: null, tree layout with wide horizontal spacing using levelGaps array. The example demonstrates overlay and compositing for documents and websites, design asset creation for icons and stickers, and multi-format export with PNG and SVG integration.

Generate Graph Image with Transparent Background

Functional Overview

This example demonstrates how to generate a screenshot of the graph with a transparent background. Using the prepareForImageGeneration and restoreAfterImageGeneration methods, the graph automatically prepares for image capture and restores its state afterward. The generated image can be used as an overlay in other applications or documents where transparency is required.

Implementation of Key Features

Prepare and Restore Pattern

The graph instance provides dedicated methods for image generation workflow:

const generateImageBase64 = async () => {
    // Prepare the graph for image generation
    const canvasDom = await graphInstance.prepareForImageGeneration();

    // Generate the image with transparent background
    const imageBlob = await domToImageByModernScreenshot(canvasDom, {
        backgroundColor: null // null = transparent
    });

    // Restore the graph state after generation
    await graphInstance.restoreAfterImageGeneration();

    if (imageBlob) {
        const base64 = await blobToBase64(imageBlob);
        setBase64String(base64);
    }
};

This pattern ensures proper state management during the image generation process.

Transparent Background Configuration

Setting backgroundColor: null in the image generation options creates a transparent background:

const imageBlob = await domToImageByModernScreenshot(canvasDom, {
    backgroundColor: null
});

This is particularly useful when the image needs to be composited over other backgrounds.

Tree Layout Configuration

The graph uses a tree layout with wide horizontal spacing:

const graphOptions: RGOptions = {
    reLayoutWhenExpandedOrCollapsed: true,
    defaultExpandHolderPosition: 'right',
    defaultNodeShape: RGNodeShape.rect,
    defaultNodeBorderWidth: 1,
    defaultNodeColor: '#fff',
    defaultLineColor: '#666',
    defaultLineShape: RGLineShape.Curve2,
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultLineTextOnPath: true,
    layout: {
        layoutName: 'tree',
        from: 'left',
        levelGaps: [400, 400, 400, 400]
    }
};

The levelGaps array controls spacing between tree levels, creating a horizontally expanded structure.

Creative Use Cases

Overlay and Compositing

Transparent background images enable:

• Document overlays: Place graph over document content without white borders
• Website integration: Embed graphs seamlessly into web pages
• Video production: Use graphs as overlays in video editing
• Presentation layers: Add graphs over presentation backgrounds

Design Asset Creation

Transparent exports support:

• Icon sets: Create graph-based icons for UI design
• Sticker packs: Generate shareable graph illustrations
• Template assets: Build reusable graph components
• Brand materials: Incorporate graphs into branded materials

Multi-Format Export

The prepare/restore pattern facilitates:

• PNG export: Lossless compression with transparency
• SVG integration: Vector-based exports for scalability
• Batch processing: Generate multiple images with consistent settings
• Automated workflows: Integrate into build pipelines or CI/CD