Conversion Examples

Example 1: Academic Diagram

Converting an architecture diagram for a research paper.

Context: You have docs/architecture_diagram.html and need docs/architecture_diagram.png.

# Navigate to project root
cd /path/to/project

# Convert with full-page capture
playwright screenshot --full-page "file://$(pwd)/docs/architecture_diagram.html" docs/architecture_diagram.png

# Verify dimensions
sips -g pixelHeight -g pixelWidth docs/architecture_diagram.png

Example 2: Bar Chart

Converting a bar chart visualization.

Context: You have docs/loophole_rate_diagram.html showing experimental results.

# High-resolution output for publication
playwright screenshot --full-page --scale=2 "file://$(pwd)/docs/loophole_rate_diagram.html" docs/loophole_rate_diagram.png

Example 3: Batch Conversion

Converting all HTML files in a directory.

Context: Multiple diagrams in docs/figures/.

# Create output directory
mkdir -p docs/figures/png

# Batch convert all HTML files
for f in docs/figures/*.html; do
  filename=$(basename "$f" .html)
  playwright screenshot --full-page "file://$(pwd)/$f" "docs/figures/png/${filename}.png"
  echo "Converted: $f"
done

Example 4: Dark Mode Variant

Creating light and dark mode versions of a diagram.

# Light mode (default)
playwright screenshot --full-page "file://$(pwd)/diagram.html" diagram-light.png

# Dark mode
playwright screenshot --full-page --color-scheme=dark "file://$(pwd)/diagram.html" diagram-dark.png

Example 5: From Empathy Experiment

Real example from paralleLLM project:

# Convert the loophole rate bar chart
playwright screenshot --full-page "file://$(pwd)/docs/loophole_rate_diagram.html" docs/loophole_rate_diagram.png

# Convert architecture pipeline diagram
playwright screenshot --full-page "file://$(pwd)/docs/architecture_diagram_v2.html" docs/architecture_diagram_v2.png

Example 6: With Wait for Animations

When HTML has CSS transitions or animations:

# Wait 1 second for animations to complete
playwright screenshot --full-page --wait-for-timeout=1000 "file://$(pwd)/animated-diagram.html" output.png

Shell Script for Project Integration

Create a reusable script scripts/html-to-png.sh:

#!/bin/bash
# html-to-png.sh - Convert HTML diagrams to PNG
# Usage: ./scripts/html-to-png.sh <input.html> [output.png]

set -e

INPUT="$1"
OUTPUT="${2:-${INPUT%.html}.png}"

if [ -z "$INPUT" ]; then
  echo "Usage: $0 <input.html> [output.png]"
  exit 1
fi

if [ ! -f "$INPUT" ]; then
  echo "Error: File not found: $INPUT"
  exit 1
fi

echo "Converting: $INPUT -> $OUTPUT"
playwright screenshot --full-page "file://$(pwd)/$INPUT" "$OUTPUT"
echo "Done! Dimensions:"
sips -g pixelHeight -g pixelWidth "$OUTPUT"

Make executable:

chmod +x scripts/html-to-png.sh

Use:

./scripts/html-to-png.sh docs/diagram.html docs/diagram.png

2.9 KiB Raw Blame History