Exporting to PNG

Convert code snippets, Markdown content, terminal output, diagrams, or rendered UI components into PNG image files.

Methods

1. HTML → PNG via Headless Browser

The most flexible approach. Render any content as HTML and screenshot it.

# Using Playwright (if available)
npx playwright screenshot --full-page "file:///path/to/content.html" output.png

# Using Puppeteer one-liner
node -e "
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(\`<html>...</html>\`);
  await page.screenshot({ path: 'output.png', fullPage: true });
  await browser.close();
})();
"

Steps:

Generate an HTML file with the content styled appropriately (syntax highlighting, padding, fonts)
Use a headless browser to render and capture
Crop if needed using an image tool

2. Code → PNG with Carbon or Silicon

For styled code screenshots:

# silicon (Rust CLI, fast)
silicon --language python --output code.png source.py
silicon --from-clipboard --output code.png

# Or generate a Carbon URL for browser capture
# https://carbon.now.sh/?l=python&code=<url-encoded-code>

3. Mermaid Diagrams → PNG

# Using mermaid-cli
npx @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.png -b transparent

# Or with Docker
docker run --rm -v "$(pwd)":/data minlag/mermaid-cli mmdc -i /data/diagram.mmd -o /data/diagram.png

4. SVG → PNG

# Using sharp (Node.js)
node -e "
const sharp = require('sharp');
sharp('input.svg').png().toFile('output.png');
"

# Using Inkscape CLI
inkscape input.svg --export-type=png --export-filename=output.png

# Using ImageMagick
convert input.svg output.png

5. Terminal Output → PNG

# Using termshot (if installed)
termshot -- ls -la

# Manual approach: capture output, wrap in HTML with monospace font, screenshot

Workflow

Determine the content type (code, diagram, HTML, terminal, SVG)
Check which tools are available in the environment (which silicon, npx --help, etc.)
Choose the best method and generate the PNG
Verify the output exists and is non-empty: file output.png && ls -la output.png
Report the file path and dimensions

Tips

For code screenshots, use a dark theme with generous padding (32px+) for a polished look
Set deviceScaleFactor: 2 in Playwright/Puppeteer for retina-quality output
For transparent backgrounds, use --background transparent or omitBackground: true
If no specialized tool is installed, fall back to the HTML + headless browser method — it works for everything

exporting-to-png