Skip to main content

Rendering

Render to SVG​

const diagram = Diagram("My Diagram");
// ... add nodes

const svg = await diagram.render();
// Returns SVG string

Render to PNG​

const png = await diagram.render({ format: "png" });
// Returns Uint8Array

Render to JPG​

const jpg = await diagram.render({ format: "jpg" });
// Returns Uint8Array

Render as Data URL​

Get the diagram as a base64 data URL for direct use in HTML:

// SVG as data URL
const svgDataUrl = await diagram.render({ dataUrl: true });
// Returns: data:image/svg+xml;base64,...

// PNG as data URL
const pngDataUrl = await diagram.render({ format: "png", dataUrl: true });
// Returns: data:image/png;base64,...

// JPG as data URL
const jpgDataUrl = await diagram.render({ format: "jpg", dataUrl: true });
// Returns: data:image/jpeg;base64,...

Browser Usage with Data URLs​

Use data URLs to display diagrams in <img> tags or download them:

const dataUrl = await diagram.render({ dataUrl: true });

// Display in an image element
const img = document.createElement("img");
img.src = dataUrl;
document.body.appendChild(img);

// Or create a download link
const link = document.createElement("a");
link.href = dataUrl;
link.download = "diagram.svg";
link.click();

Save to File​

// Auto-detects format from extension
await diagram.save("diagram.svg");
await diagram.save("diagram.png");

Render Options​

const svg = await diagram.render({
  format: "svg", // 'svg' | 'png' | 'jpg' | 'dot'
  width: 800, // Output width (for PNG/JPG)
  height: 600, // Output height (for PNG/JPG)
  scale: 2, // Scale factor (default: 2 for PNG/JPG)
  dataUrl: true, // Return as base64 data URL
});

Browser Usage​

// Get SVG string
const svg = await diagram.render();

// Insert into DOM
document.getElementById("diagram").innerHTML = svg;

Node.js Usage​

import { writeFile } from "fs/promises";

const svg = await diagram.render();
await writeFile("output.svg", svg);

const png = await diagram.render({ format: "png" });
await writeFile("output.png", Buffer.from(png));