mcpField
E
exporting-to-png

exporting-to-png

github.com/spencerpaulyCreative & media868407 installsUpdated 13w ago
Repository

About exporting-to-png

A skill for converting code, Markdown, terminal output, diagrams, or rendered UI into PNG images. It outlines several methods, including headless browsers, code screenshot tools, and format-specific converters.

Key features

  1. 01Renders HTML with a headless browser
  2. 02Captures styled code with Carbon or Silicon
  3. 03Converts Mermaid diagrams to PNG
  4. 04Converts SVG files to PNG
  5. 05Captures terminal output as an image

Use cases

  1. 01Creating a PNG of a code snippet
  2. 02Exporting a Mermaid diagram for documentation
  3. 03Saving terminal output as an image

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill exporting-to-png

After installing, type/exporting-to-pngin Claude Code to confirm it loaded.

Details

From the project README

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:

  1. Generate an HTML file with the content styled appropriately (syntax highlighting, padding, fonts)
  2. Use a headless browser to render and capture
  3. 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

  1. Determine the content type (code, diagram, HTML, terminal, SVG)
  2. Check which tools are available in the environment (which silicon, npx --help, etc.)
  3. Choose the best method and generate the PNG
  4. Verify the output exists and is non-empty: file output.png && ls -la output.png
  5. 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

Comments

Markdown supported