菜单
Teaches agents how to author content and configure write_png so PNGs render at the correct size, with tight cropping, readable text, and consistent scaling.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | png-press |
| description | Teaches agents how to author content and configure write_png so PNGs render at the correct size, with tight cropping, readable text, and consistent scaling. |
| version | 1.0.0 |
| category | document-creation |
| tags | ["png","rendering","html","markdown","mermaid"] |
| when_to_use | ["Rendering Mermaid diagrams to PNG","Rendering HTML layouts to PNG","Rendering Markdown snippets to PNG","Fixing tiny or mostly-blank PNG output","Improving readability via zoom/scale","Verifying Mermaid renders correctly (syntax + visual check) when needed"] |
| author | kdcube |
| created | "2026-02-18T00:00:00.000Z" |
| namespace | public |
The write_png tool renders HTML, Markdown, or Mermaid into PNG via headless Chromium.
The most common failure is tiny diagrams centered in a large blank canvas.
Use fit='content' (default) + correct selectors/width/zoom to crop and scale properly.
fit='content' to crop to the real content bounds.content_selector to a stable wrapper (e.g. #render-root).padding_px for margin around the crop.format='mermaid' with raw Mermaid text (no ``` fences).format='markdown' and fenced ```mermaid blocks.format='html' with a single wrapper element.width for wide diagrams (2200–3200px typical).zoom=1.2–1.8 when text is too small.device_scale_factor (2 or 3) for crisper output.mermaid_font_size_px (e.g. 16–22) and/or mermaid_scale (1.1–1.6).mermaid_font_family for consistent typography.render_delay_ms=1000–2000 for complex diagrams.Wrap your content in a root container so cropping is reliable.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body { margin: 0; background: white; }
#render-root {
display: inline-block;
padding: 16px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div id="render-root">
<!-- content here -->
</div>
</body>
</html>
Then call:
format='html'content_selector='#render-root'fit='content'format='mermaid' and set width high enough for the diagram.zoom.Example:
write_png(
path="diagram.png",
content="graph LR\nA[\"Start\"]-->B[\"Process\"]",
format="mermaid",
width=2400,
zoom=1.4,
mermaid_font_size_px=18,
device_scale_factor=3,
fit="content",
render_delay_ms=1200
)
If Mermaid syntax breaks, use the public.mermaid skill to fix labels/quotes.
Example:
write_png(
path="summary.png",
format="markdown",
content="""
# Summary\n\n```mermaid\nflowchart LR\nA-->B\n```\n""",
fit="content",
width=2000
)
Problem: Tiny diagram in the middle of a blank page
fit='content' (default).content_selector for HTML.zoom and/or width.Problem: Diagram clipped on the right
width or reduce diagram complexity.max-width: 100% on SVG if it shrinks.Problem: Text too small
zoom to 1.4–1.8.device_scale_factor=2 or 3.mermaid_font_size_px (16–22) or mermaid_scale (1.2–1.5).Problem: Mermaid fails to render
public.mermaid skill.Create, inspect, edit, archive, delete, run, and search scheduled or executable automation assets.
Execution behavior for one saved automation job running in a fresh agent conversation.
Teaches agents how to author Markdown that renders cleanly into DOCX via write_docx, with heading hierarchy (up to 6 levels), tables, lists, blockquotes, code blocks, citations, embedded images, SVG diagrams (rendered to PNG first), and document structure patterns for reports, proposals, and technical documents.
Teaches agents how to write syntactically correct Mermaid diagrams that render without errors across all supported diagram types. Covers quoting rules, common syntax pitfalls, diagram-type-specific syntax (flowchart, sequence, class, ER, Gantt, state, pie, mindmap), subgraphs, styling with classDef and theme variables, KDCube brand color integration, renderer usage patterns, readability tuning, and complexity limits.
Teaches agents how to generate Markdown, HTML (with embedded SVG), and Mermaid content that renders beautifully to multi-page PDF via write_pdf, with proper page breaks, compact professional layouts, brand and domain-adaptive color schemes, multi-column support for scientific papers, magazine-style editorial documents, and iterative render-review-fix workflow.
Teaches agents how to author slide-structured HTML that renders professionally to PPTX via write_pptx, with proper sizing, styling, brand and domain-adaptive color schemes, SVG diagram integration, citation handling, deck narrative flow, and content budgets for business presentations, technical decks, and executive briefings.