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.png4. 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.png5. Terminal Output → PNG
# Using termshot (if installed)
termshot -- ls -la
# Manual approach: capture output, wrap in HTML with monospace font, screenshotWorkflow
- 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: 2in Playwright/Puppeteer for retina-quality output - For transparent backgrounds, use
--background transparentoromitBackground: true - If no specialized tool is installed, fall back to the HTML + headless browser method — it works for everything