markdown-to-image

Convert Markdown content into paginated 3:4 poster images with SVG headers.

1|Updated May 12, 2026
One-click install
npx skills add https://github.com/cocyuhao/my-ai-skills-library --skill markdown-to-image-cocyuhao
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: markdown-to-image
Source: https://github.com/cocyuhao/my-ai-skills-library/tree/main/markdown-to-image
Command: npx skills add https://github.com/cocyuhao/my-ai-skills-library --skill markdown-to-image-cocyuhao

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires markdown, playwright, requests, and includes scripts (resource) components.

What problem does it solve?

将 Markdown 内容转化为可直接用于社交媒体的图片海报,省去手工排版的繁琐。

Core Features & Use Cases

  • 固定 3:4 比例(1080×1440 像素),便于社交平台封面和分享图
  • 自动分页,内容多时自动分成多张图片
  • 智能 SVG 头图,按主题生成风格化图形
  • 智能标题提取,自动从内容中生成嘉宾/主题信息
  • 白色背景 + 大字号,清晰易读
  • 自适应布局,优化排版避免留白
  • 支持 YouTube 封面图作为首图

Quick Start

将指定的 Markdown 文件输入到脚本中,即可生成多页海报图片并输出到输出目录。

Frequently Asked Questions about markdown-to-image

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert markdown to a social media poster image automatically?

To convert markdown to a social media poster, this skill renders markdown content into fixed 3:4 images using a headless browser. It automatically paginates long content and generates themed SVG headers for ready-to-share social media posts.

Does the markdown rendering support automatic pagination for long blog posts?

Yes, markdown rendering supports automatic pagination for long content. If your notes or transcripts exceed a single page, the script automatically splits the text into multiple 3:4 aspect ratio images without manual intervention.

Can I use YouTube cover images as the header when converting markdown to images?

Yes, you can use YouTube cover images as the first image when converting markdown to images. The script fetches these cover images via requests to integrate them into the final paginated poster layout.

How does the script generate visual headers for markdown notes?

The script generates visual headers for markdown notes by creating intelligent SVG graphics based on the content theme. It automatically extracts titles and topic information to produce stylized header artwork for each poster.

What is the best way to render markdown transcripts into fixed aspect ratio images?

The best way to render markdown transcripts into fixed aspect ratio images is using a headless browser with Playwright. This approach enforces a strict 1080×1440 pixel layout, ensuring white backgrounds and large fonts for clear readability.

Do I need Playwright installed to generate markdown posters?

Yes, you need Playwright installed to generate markdown posters. It serves as the headless browser engine required to render the SVG headers, apply adaptive layouts, and export the final image files.