markdown-to-image

Original：🇨🇳 Chinese
Translated
2 scriptsChecked / no sensitive code detected

Convert Markdown content into exquisite image posters. Ideal for turning podcast summaries and article content into social media share images. Fixed 3:4 aspect ratio, supports using YouTube video covers as header images. Trigger phrases: "Convert to Image", "Markdown to Image", "Generate Poster", "Generate Share Image", "Turn this into an Image".

6installs
Sourcezephyrwang6/myskill
Added on

NPX Install

npx skill4agent add zephyrwang6/myskill markdown-to-image

Tags

Translated version includes tags in frontmatter
markdown-to-imagesocial-media-posterspython-scriptsvg-generationcontent-sharing

SKILL.md Content (Chinese)

View Translation Comparison →

Markdown to Exquisite Image

Render Markdown content into beautiful shareable poster images, suitable for platforms like WeChat, Xiaohongshu, and Weibo.

Core Features

  • Fixed 3:4 aspect ratio (1080×1440 pixels)
  • Auto-pagination - Generate multiple images when content is extensive
  • Smart SVG Header Image - Automatically generate hand-drawn line art in corresponding styles based on topic keywords
  • Smart Title - Automatically extract guest names and topics in the format "Guest: Topic"
  • White background + large font - Clear and readable, professional layout
  • Adaptive layout - Evenly distribute content to reduce blank space
  • Wide character and line spacing - Referencing excellent poster layouts

Quick Start

Basic Usage

bash
# Convert Markdown file to images (auto-paginated)
python3 scripts/md_to_image.py --file /path/to/content.md

# Specify output directory
python3 scripts/md_to_image.py --file /path/to/content.md --output-dir /path/to/output

# Adjust number of items per page
python3 scripts/md_to_image.py --file /path/to/content.md --items-per-page 4

Parameter Description

ParameterDescriptionDefault Value
--file
, 
-f
Path to Markdown fileRequired
--output-dir
, 
-o
Output directory
attachments/MMDD
--width
, 
-w
Image width (pixels)
1080
--items-per-page
Number of items displayed per page
5

Output Specifications

  • Aspect Ratio: Fixed 3:4 (1080×1440 pixels)
  • Format: PNG
  • Pagination: Automatically generate multiple images based on content
  • Naming: 
    page_1.png
    , 
    page_2.png
    , ...
  • Save Location: Default 
    attachments/MMDD
    (MMDD is the current date)

Smart SVG Header Image

Automatically generate different styles of SVG decorative images based on article topics:
Topic KeywordsGenerated SVG Style
AI
, 
AGI
, 
通用
(General)		Neural network nodes → Brain → Dialogue bubbles
开源
(Open Source), 
open source
Open source symbols → Code brackets → Share icons
Others (Default)Microphone → Sound waves → Character dialogue
SVG Features:
  • Hand-drawn style, black lines on white background
  • Wide 16:9 aspect ratio
  • 140px height, centered display
  • With topic text label at the bottom

Smart Title Extraction

Automatically extract guests and topics from Markdown meta-information:
Input Format:
markdown
# Podcast Name

> **Guest**: Sebastian Raschka (LLM Researcher)
> **Topic**: AI Technology Trends in 2025
Output Title: 
Sebastian Raschka: AI Technology Trends in 2025

Markdown Format Processing

FormatRendering Effect
# Heading
Automatically extracted and combined into "Guest: Topic" format
> **Guest**: ...
Extract guest name (remove 
**
markers)
> **Topic**: ...
Extract topic content
**Bold Text**
Red bold text (remove 
**
markers)
1、2、3、
Red circular numbering
"Quoted Content"
Blue highlighted quote

Workflow

When a user requests to convert Markdown to images:
  1. Determine Input Content
    • If the user specifies a file path, use that file
    • If the user has a Markdown file open, use that file by default
  2. Automatic Processing
    • Extract guest and topic to generate title
    • Generate corresponding SVG header image based on topic keywords
    • Extract short summary (section marked 
      📱 Short Summary
      )
    • Remove all 
      **
      markdown markers and convert to actual bold style
    • Automatically paginate based on number of items
  3. Output Results
    • Return all image paths to the user
    • Images are saved in the 
      attachments/MMDD
      directory

Common Usage

User InputAction
「把这个转成图片」Convert the currently open Markdown file
「生成分享海报」Same as above
「这个播客摘要转图片」Convert the podcast summary file
「Markdown 转图片」Same as above

Dependencies

The script depends on the following Python packages:
  • playwright
    - Browser automation rendering
  • markdown
    - Markdown parsing
  • requests
    - Network requests (backup)
Install for first use:
bash
pip3 install playwright markdown requests
playwright install chromium

Changelog

v1.1 (2026-02-01)

  • ✅ Smart SVG Header Image: Automatically generate corresponding styles based on topic keywords
  • ✅ Smart Title: Automatically extract in "Guest: Topic" format
  • ✅ Remove 
    **
    markers: Correctly convert markdown bold in meta-information and body content
  • ✅ Larger and more prominent SVG: 140px height, 600px width
  • ✅ Optimized layout: Larger font, wider spacing, adaptive layout

v1.0 (2026-02-01)

  • Initial version
  • Fixed 3:4 aspect ratio
  • Auto-pagination
  • White background design