article-visual-planner

Analyzes WeChat article drafts and proposes Mermaid or ECharts chart placements as JSON.

5|1|Updated Jul 31, 2026
One-click install
npx skills add https://github.com/shiker1996/wechat-editroom --skill article-visual-planner-shiker1996
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: article-visual-planner
Source: https://github.com/shiker1996/wechat-editroom/tree/main/skills/article-visual-planner
Command: npx skills add https://github.com/shiker1996/wechat-editroom --skill article-visual-planner-shiker1996

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Finished WeChat articles often contain complex relationships or data that are hard to follow in plain text. This Skill reviews a final article draft and decides where Mermaid or ECharts diagrams would genuinely improve reader comprehension, returning exact insertion points and ready-to-render chart code. ## Core Features & Use Cases - Chart Placement Planning: Returns up to 3 placements, each anchored to an existing article heading, with purpose, rationale, and fact-source references. - Strict Chart Constraints: Mermaid diagrams are limited to flowchart, sequenceDiagram, and stateDiagram-v2 with at most 8 nodes and 12 edges; ECharts options must be strict JSON using only bar, line, pie, scatter, or radar with numbers verified against the fact base. - Policy-Aware Output: Honors a visualPolicy=off setting (default for opinion pieces) by returning empty placements, and splits oversized diagrams into two readable charts when mobile complexity limits are exceeded. - Use Case: After finishing a hotspot news article in the editor, run the chart suggestion stage to receive JSON placements that the workbench renders as diagrams without altering the article text. ## Quick Start Ask the assistant to analyze the final article draft and suggest Mermaid or ECharts charts with insertion positions and chart code.

Frequently Asked Questions about article-visual-planner

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

FAQPage Schema
How do I add Mermaid diagrams to a WeChat article?

Run the chart suggestion stage on the final article draft. It returns JSON placements with Mermaid code anchored to existing headings, limited to flowchart, sequenceDiagram, and stateDiagram-v2 with at most 8 nodes and 12 edges.

How to generate ECharts options from article data?

The planner emits strict JSON ECharts options using only bar, line, pie, scatter, or radar types. Every number must exist in the article's fact base; if verified data is missing, no ECharts chart is suggested.

Does the chart planner modify the article text?

No. It only returns a JSON visual plan with insertion positions after existing level-one to level-three headings. The article body is never edited, and purely decorative charts are not suggested.

Why does the planner return empty placements?

Empty placements occur when visualPolicy=off is passed (the default for opinion pieces) or when no chart would add comprehension value. Multiple fact points alone do not trigger a chart suggestion.

What happens when a Mermaid diagram exceeds mobile limits?

When the workbench reports a diagram exceeding 8 nodes or 12 edges, the planner splits it into two independent charts while preserving facts and intent, returning the full JSON without explanation.