Generate Graph Image with Custom Background Watermark

This example demonstrates how to generate a screenshot of the graph with a custom background pattern (watermark). Using the RGBackground slot, a grid pattern with semi-transparent orange overlay is applied to the canvas. The generated image captures both the graph content and the custom background, useful for branding or adding visual context to exported images.

Key features include: RGBackground slot for custom background rendering, base64-encoded background image for grid pattern, layered background styling combining grid texture with semi-transparent tint, and image generation with preserved background using prepare/restore pattern. The example demonstrates branded exports with watermarks and logos, contextual visualization with grid overlays, and design integration for print and marketing materials.

Generate Graph Image with Custom Background Watermark

Functional Overview

This example demonstrates how to generate a screenshot of the graph with a custom background pattern (watermark). Using the RGBackground slot, a grid pattern with semi-transparent orange overlay is applied to the canvas. The generated image captures both the graph content and the custom background, useful for branding or adding visual context to exported images.

Implementation of Key Features

RGBackground Slot for Custom Backgrounds

The RGBackground slot allows custom background rendering:

<RelationGraph options={graphOptions}>
    <RGSlotOnView>
    </RGSlotOnView>
    <RGBackground>
        <div
            style={{
                width: '100%',
                height: '100%',
                backgroundImage: 'url(data:image/png;base64,...)',
                backgroundSize: '200px 200px',
                backgroundRepeat: 'repeat',
                backgroundColor: 'rgba(246, 167, 87, 0.1)'
            }}
        />
    </RGBackground>
</RelationGraph>

The background div spans the full canvas area and can include any CSS styling.

Base64-Encoded Background Image

The example uses a base64-encoded PNG image for the grid pattern:

backgroundImage: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGuCAYAAAC+z1AR...)'

This approach embeds the background image directly in the code, avoiding external file dependencies.

Layered Background Styling

The background combines multiple visual elements:

• Grid pattern: Base64-encoded PNG providing a grid texture
• Tint color: Semi-transparent orange overlay (rgba(246, 167, 87, 0.1))
• Tiling: backgroundRepeat: 'repeat' for seamless coverage
• Sizing: backgroundSize: '200px 200px' controls pattern dimensions

Image Generation with Preserved Background

Using the same prepare/restore pattern:

const generateImageBase64 = async () => {
    const canvasDom = await graphInstance.prepareForImageGeneration();
    const imageBlob = await domToImageByModernScreenshot(canvasDom, {
        backgroundColor: null
    });
    await graphInstance.restoreAfterImageGeneration();

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

The custom background is automatically included in the generated image.

Creative Use Cases

Branded Exports

Custom backgrounds enable:

• Company watermarks: Add logos or subtle branding to exports
• Document classification: Visual indicators for confidential/internal/public
• Copyright protection: Subtle watermarks to protect intellectual property
• Template consistency: Ensure all exports follow brand guidelines

Contextual Visualization

Background patterns support:

• Grid overlays: Show scale or measurement reference
• Themed backgrounds: Match graph purpose (technical, artistic, corporate)
• Visual hierarchy: Use background to distinguish different graph types
• Status indication: Color tints to show graph state (draft, approved, archived)

Design Integration

Watermark functionality facilitates:

• Print design: Prepare graphs for printed materials
• Presentation graphics: Match presentation template styles
• Marketing materials: Create branded visualizations for marketing use
• User-generated content: Let users customize background for their needs