Render Pipeline

def validate_excalidraw(data: dict) -> list[str]:
    """Validate Excalidraw JSON structure. Returns list of errors (empty = valid)."""
    errors: list[str] = []

    if data.get("type") != "excalidraw":
        errors.append(f"Expected type 'excalidraw', got '{data.get('type')}'")

    if "elements" not in data:
        errors.append("Missing 'elements' array")
    elif not isinstance(data["elements"], list):
        errors.append("'elements' must be an array")
    elif len(data["elements"]) == 0:
        errors.append("'elements' array is empty — nothing to render")

    return errors

def compute_bounding_box(elements: list[dict]) -> tuple[float, float, float, float]:
    """Compute bounding box (min_x, min_y, max_x, max_y) across all elements."""
    min_x = float("inf")
    min_y = float("inf")
    max_x = float("-inf")
    max_y = float("-inf")

    for el in elements:
        if el.get("isDeleted"):
            continue
        x = el.get("x", 0)
        y = el.get("y", 0)
        w = el.get("width", 0)
        h = el.get("height", 0)

        # For arrows/lines, points array defines the shape relative to x,y
        if el.get("type") in ("arrow", "line") and "points" in el:
            for px, py in el["points"]:
                min_x = min(min_x, x + px)
                min_y = min(min_y, y + py)
                max_x = max(max_x, x + px)
                max_y = max(max_y, y + py)
        else:
            min_x = min(min_x, x)
            min_y = min(min_y, y)
            max_x = max(max_x, x + abs(w))
            max_y = max(max_y, y + abs(h))

    if min_x == float("inf"):
        return (0, 0, 800, 600)

    return (min_x, min_y, max_x, max_y)

min_x, min_y, max_x, max_y = compute_bounding_box(elements)
padding = 80
diagram_w = max_x - min_x + padding * 2
diagram_h = max_y - min_y + padding * 2

# Cap viewport width, let height be natural
vp_width = min(int(diagram_w), max_width)
vp_height = max(int(diagram_h), 600)

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page(
        viewport={"width": vp_width, "height": vp_height},
        device_scale_factor=scale,
    )

    # Load the template
    page.goto(template_url)

    # Wait for the ES module to load (imports from esm.sh)
    page.wait_for_function("window.__moduleReady === true", timeout=30000)

    # Inject the diagram data and render
    json_str = json.dumps(data)
    result = page.evaluate(f"window.renderDiagram({json_str})")

    # Wait for render completion signal
    page.wait_for_function("window.__renderComplete === true", timeout=15000)

    # Screenshot the SVG element
    svg_el = page.query_selector("#root svg")
    svg_el.screenshot(path=str(output_path))
    browser.close()

<script type="module">
  import { exportToSvg } from "https://esm.sh/@excalidraw/excalidraw?bundle";

  window.renderDiagram = async function(jsonData) {
    try {
      const data = typeof jsonData === "string" ? JSON.parse(jsonData) : jsonData;
      const elements = data.elements || [];
      const appState = data.appState || {};
      const files = data.files || {};

      // Force white background in appState
      appState.viewBackgroundColor = appState.viewBackgroundColor || "#ffffff";
      appState.exportWithDarkMode = false;

      const svg = await exportToSvg({
        elements: elements,
        appState: {
          ...appState,
          exportBackground: true,
        },
        files: files,
      });

      // Clear any previous render
      const root = document.getElementById("root");
      root.innerHTML = "";
      root.appendChild(svg);

      window.__renderComplete = true;
      window.__renderError = null;
      return { success: true, width: svg.getAttribute("width"), height: svg.getAttribute("height") };
    } catch (err) {
      window.__renderComplete = true;
      window.__renderError = err.message;
      return { success: false, error: err.message };
    }
  };

  // Signal that the module is loaded and ready
  window.__moduleReady = true;
</script>

[project]
name = "excalidraw-render"
version = "0.1.0"
requires-python = ">=3.11"
dependencies = [
    "playwright>=1.40.0",
]