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));

Export to JSON​

const diagram = Diagram("Web Architecture");
diagram.add(EC2("Web Server"));
diagram.add(RDS("Database"));

// Export to JSON
const json = diagram.toJSON();
console.log(JSON.stringify(json, null, 2));

JSON Output Example​

{
  "name": "Web Architecture",
  "nodes": [
    {
      "id": "n1",
      "label": "Web Server",
      "provider": "aws",
      "service": "compute",
      "type": "EC2"
    },
    {
      "id": "n2",
      "label": "Database",
      "provider": "aws",
      "service": "database",
      "type": "RDS"
    }
  ],
  "edges": [{ "from": "n1", "to": "n2" }]
}

Import from JSON​

Restore a diagram from JSON using the static Diagram.fromJSON() method:

import { Diagram } from "diagrams-js";

const json = {
  name: "My Architecture",
  nodes: [
    {
      id: "web",
      label: "Web Server",
      provider: "aws",
      service: "compute",
      type: "EC2",
    },
    {
      id: "db",
      label: "Database",
      provider: "aws",
      service: "database",
      type: "RDS",
    },
  ],
  edges: [{ from: "web", to: "db", label: "SQL" }],
};

const diagram = await Diagram.fromJSON(json);
const svg = await diagram.render();

JSON Schema​

The JSON format follows a JSON Schema for validation. Reference it in your JSON files:

{
  "$schema": "https://diagrams-js.hatemhosny.dev/schema/diagram.json",
  "name": "My Architecture",
  "nodes": [...]
}