FactFoundry.BlazorDiagramExporter 1.0.0

FactFoundry.BlazorDiagramExporter

Export Z.Blazor.Diagrams canvases to SVG, PNG, and PDF by rendering directly from the diagram model — bypassing the DOM entirely. Uses an SVG-first architecture: builds a complete SVG from the diagram snapshot, then optionally rasterizes to PNG or PDF. The output is pixel-perfect regardless of the current pan/zoom state and captures the entire diagram, not just the visible viewport. Zero external NuGet dependencies.

The Problem

Blazor.Diagrams renders nodes as HTML/CSS and links as SVG paths inside a viewport with CSS transforms for pan/zoom. The problems I encountered with other libraries includes:

• CSS transforms cause phantom artifacts and incorrect positioning -- nodes appear offset or duplicated
• SVG elements (links, arrows) are not rendered at all -- only the nodes appear in the export
• Large diagrams only partially capture -- content outside the browser's rendering limits is clipped
• Capture is viewport-dependent -- only what is currently visible on screen gets rendered

FactFoundry.BlazorDiagramExporter solves all four problems by reading the diagram model directly and building a standalone SVG. PNG and PDF are produced by rasterizing that SVG via an offscreen canvas.

Installation

dotnet add package FactFoundry.BlazorDiagramExporter

Supported frameworks: .NET 8.0, .NET 9.0, .NET 10.0

Dependencies: Z.Blazor.Diagrams 3.x (tested minimum version)

Quick Start

Register the exporter in Program.cs:

using FactFoundry.BlazorDiagramExporter;

builder.Services.AddBlazorDiagramExporter();

Inject and use in a Blazor component:

@using FactFoundry.BlazorDiagramExporter
@inject DiagramExporter Exporter

<button @onclick="ExportSvg">Export SVG</button>
<button @onclick="ExportPng">Export PNG</button>

@code {
    private BlazorDiagram _diagram = new();

    private async Task ExportSvg()
    {
        await Exporter.ExportAsSvgAsync(_diagram, new DiagramExportOptions
        {
            FileName = "my-diagram"
        });
    }

    private async Task ExportPng()
    {
        await Exporter.ExportAsPngAsync(_diagram, new DiagramExportOptions
        {
            Scale = 2.0,
            FileName = "my-diagram"
        });
    }
}

Export Options

API Methods

Orthogonal Routing

Important: Orthogonal (right-angle) link routing is not automatic. Blazor.Diagrams computes orthogonal waypoints at runtime in its rendering pipeline and does not persist them on the link model. The exporter reads from the model, so links without waypoints are drawn as straight lines. If you need orthogonal routing in exports, you must supply waypoints yourself via link vertices. See docs/orthogonal-routing.md for details and code examples.

PDF Export

The library includes a built-in minimal PDF builder that requires no external PDF library. It creates a single-page PDF with the diagram rendered as an embedded PNG image.

For advanced PDF features (multi-page, text layers, metadata), call RenderToPngBytesAsync and pass the bytes to your preferred PDF library (QuestPDF, iText, PDFSharp, etc.). See docs/pdf-export.md for examples.

Documentation

Full documentation is available in the /docs directory:

• Overview & Installation
• Getting Started
• Export Options Reference
• Custom Node Renderer
• Custom Link Renderer
• Diagram Snapshot
• PDF Export
• Fonts
• Orthogonal Routing
• Future Enhancements

Contributing

Contributions are welcome. See CONTRIBUTING.md for guidelines on building, testing, and submitting pull requests.

License

MIT License. See LICENSE for details.