Exporting To Png

Name: Exporting To Png
Author: 0xAidan

ASecurity

Export code, terminal output, diagrams, or UI components to PNG images using headless browser rendering or CLI tools.

4 stars

0 votes

0 copies

0 views

Added 9/10/2026

toolspythonrustbashnodedocker

Works with

terminalcli

Security Analysis

A100/100

Scanned 9/10/2026

Install to Claude Code

$npx -y skills add 0xAidan/polymarket-bot-test --skill exporting-to-png --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Exporting To Png?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Exporting To Png

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/0xaidan-exporting-to-png/badge)](https://www.skillsdirectory.com/skills/0xaidan-exporting-to-png)

More formats (shields.io, HTML) on the badges page.

Download Zip

Files

SKILL.md

---
name: exporting-to-png
description: Export code, terminal output, diagrams, or UI components to PNG images using headless browser rendering or CLI tools.
user-invocable: true
---

# 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.

```bash
# 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:

```bash
# 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

```bash
# 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

```bash
# 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

```bash
# 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

Exporting To Png

Works with

Security Analysis

Attribution

Comments (0)