skills.rest
shiker1996
shiker1996COMMUNITY
Explore all skills by this author →
WebsiteGitHub

wechat-echarts-blocks-to-images

Renders ECharts configuration fences in Markdown into PNG images via headless Chrome.

5|1|Updated Jul 31, 2026
Search Tags:#markdown#png#data visualization#puppeteer#wechat#echarts#chart rendering
One-click install
npx skills add https://github.com/shiker1996/wechat-editroom --skill wechat-echarts-blocks-to-images-shiker1996
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wechat-echarts-blocks-to-images
Source: https://github.com/shiker1996/wechat-editroom/tree/main/skills/wechat-echarts-blocks-to-images
Command: npx skills add https://github.com/shiker1996/wechat-editroom --skill wechat-echarts-blocks-to-images-shiker1996

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires echarts, puppeteer, and includes scripts (resource) components.

What problem does it solve? WeChat articles cannot embed interactive ECharts charts, so data visualizations written as code blocks in Markdown must be converted into static PNG images before publishing. ## Core Features & Use Cases - Deterministic Rendering: Extracts fenced blocks marked as echarts from a Markdown working file, validates each configuration as a JSON object (up to 200K characters), and renders it with Puppeteer at 2x resolution. - Safe In-Place Replacement: Replaces each successfully rendered fence with a relative PNG image reference while preserving failed fences with error details, never substituting blank images. - Use Case: After drafting a WeChat article containing ECharts data charts, run the pipeline to convert every chart block into echarts-N.png files referenced from the Markdown, ready for the typesetting stage. ## Quick Start Convert all ECharts code blocks in my article Markdown file into PNG images and update the file to reference them.

Frequently Asked Questions about wechat-echarts-blocks-to-images

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

FAQPage Schema
How do I convert ECharts code blocks in Markdown to images?▼

Run the render-echarts.mjs script with an input Markdown path, an output path, and an optional image directory. It extracts fences marked as echarts, renders each with Puppeteer at 2x resolution, and replaces them with relative PNG references.

What chart configuration formats are supported for rendering?▼

Only JSON objects are accepted as ECharts configurations, with a maximum length of 200,000 characters. Arbitrary JavaScript is never executed, and non-object or array configurations are rejected with an error.

Does ECharts rendering require a local Chrome installation?▼

Yes, rendering uses Puppeteer with headless Chrome. The script reuses the Puppeteer installation and browser cache from the sibling html-pages-to-images skill, or an executable set via PUPPETEER_EXECUTABLE_PATH.

What happens when an ECharts block fails to render?▼

The failed fence is preserved in the output Markdown along with an error message, and no blank image is substituted. The JSON report lists failures and the process exits with code 1.

Can this skill render Mermaid diagrams or other code blocks?▼

No, it only processes fences explicitly marked with the echarts language tag. Mermaid diagrams, plain code blocks, and inline modules are left untouched and handled by other pipeline stages.

Related Skills

Explore More Content & Communication Skills→
OldCoderIsMeOldCoderIsMe

extract-metadata

Extract titles, authors, sources, dates, summaries, and tags from article URLs.

Community
Intermediate
tentacle-protentacle-pro
4

tentacle-post2wechat

Compress local images, upload them, and submit HTML articles as WeChat drafts.

Community
Intermediate
danielmiesslerdanielmiessler
18.8k

Art

Generates static visual content across 20+ formats using workflow-routed image generation models.

Community
Advanced
genesis-agentsgenesis-agents
2

chart-renderer

Render charts as SVG strings from data using ECharts server-side.

Community
Intermediate