vyuhDiagram
Core

SVG and PNG downloads ​

Loading interactive example…Open in new tab ↗
Opening the live canvas…

Edit the cards or connector label, then download SVG or PNG. Output captures the resolved document with padding, independent of camera zoom and selection. Neither format includes editor handles or toolbar controls.

SVG uses native text and embeds the bundled font faces. PNG has a white background and a scale capped at two pixels per world unit, with its longest side limited to 4096 pixels. Resource preparation finishes before capturing the crop and publication. Downloads run locally in the browser.

This fixture includes shapes, text regions, a bound connector and label, plus two embedded image resources. The round photo uses a registered elliptical outline to clip its cover image; the rectangular image uses contain. Resize either photo and compare the two exports. The live CDX Select the cards button uses its canonical caption as a portable text fallback in both outputs; exports do not include its click action. SVG text appearance depends on the fonts available to the viewer. See Output for resource limits and failure handling.

Source ​

dart
Future<void> exportExample(
  DiagramController controller, {
  required bool svg,
  PlaygroundDownload download = downloadPlaygroundFile,
}) async {
  final fonts = svg ? await loadDiagramExportFonts() : <SvgFont>[];
  // Prepare resources first, then capture crop and content synchronously.
  final bounds = controller.scene.bounds.inflate(32);
  final Uint8List bytes;
  if (svg) {
    final result = await controller.exportSvg(
      SvgOptions(bounds: bounds, fonts: fonts),
    );
    bytes = Uint8List.fromList(utf8.encode(result.svg));
  } else {
    final result = await controller.exportPng(
      PngOptions(
        bounds: bounds,
        pixelRatio: math.min(2, 4096 / math.max(bounds.width, bounds.height)),
        background: const DiagramColor(0xFFFFFFFF),
      ),
    );
    bytes = result.bytes;
  }
  await download(
    bytes,
    'connected-cards.${svg ? 'svg' : 'png'}',
    svg ? 'image/svg+xml' : 'image/png',
  );
}

Document and shape definition ​

Source: fixture.dart.

Portable widget content ​

Source: portable_widget.dart.

Font resources ​

The playground and this example share the same bundled font loader.

Source: export_fonts.dart.