doubao-visualization

Routes visualization requests to ECharts charts, image overlays, interactive HTML, or generated illustrations.

2|Updated Aug 9, 2026
One-click install
npx skills add https://github.com/DeepJH/doubao-skill-and-info --skill doubao-visualization-deepjh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: doubao-visualization
Source: https://github.com/DeepJH/doubao-skill-and-info/tree/main/skills/doubao-visualization
Command: npx skills add https://github.com/DeepJH/doubao-skill-and-info --skill doubao-visualization-deepjh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Choosing the wrong visual format wastes effort and misleads readers: precise data gets handed to image generators, user photos get redrawn as fake evidence, and static charts get wrapped in pointless interactivity. This Skill unifies four visualization modes under one router so every request lands on the correct presentation. ## Core Features & Use Cases - Unified Routing: Classifies each request by goal, source material, and precision needs, then selects ECharts options, original-image annotation overlays, HTML/SVG interactive demos, generative knowledge illustrations, or plain text. - Progressive Spec Loading: Each mode has a mandatory reading gate of detailed reference files covering mobile layout, tooltip safety, coordinate systems, prompt rules, and tool contracts before any output is generated. - Fact and Safety Boundaries: Forbids fabricated statistics, map visualizations, and credential leakage; requires verified data sources and honest labeling of generated images as interpretive redraws. - Use Case: A user uploads a PC case photo asking about airflow planning. The Skill routes to image-overlay mode, produces a 0-999 relative-coordinate process, and renders a single annotated image with intake zones, airflow paths, and exhaust points plus a hover/tap legend. ## Quick Start Ask the assistant to visualize a trend, annotate an uploaded image, demonstrate a dynamic process interactively, or create a knowledge infographic, and it will pick the right format automatically.

Frequently Asked Questions about doubao-visualization

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

FAQPage Schema
How do I choose between ECharts, image annotation, and interactive HTML for a visualization?

Use ECharts for precise numeric data like trends and proportions, original-image overlay when conclusions depend on real positions in a user photo, and HTML/SVG interaction only when clicking, dragging, or playback adds causal understanding. The routing rules decide automatically based on goal and source material.

How do I annotate a user-uploaded image without distorting markers?

Express all positions as 0-999 relative coordinates in a process JSON, then render lines and rectangles in an SVG layer with a non-uniform viewBox while placing dots and labels as HTML divs positioned by percentage. This keeps circles round and text unstretched regardless of image aspect ratio.

Can this Skill generate maps or geographic visualizations?

No. Map visualizations are strictly forbidden, including ECharts geo/map components, administrative boundaries, coordinate plotting, and tile maps. Geographic requests fall back to plain text, lists, or non-map flow diagrams.

What happens when real data cannot be verified for a chart?

The Skill refuses to fabricate statistics, rankings, prices, or events. It delivers an empty state, a clearly labeled example template, or a data-acquisition plan instead, and marks any sample data explicitly as illustrative.

Why must reference files be read before generating output?

Each presentation mode has a mandatory loading gate listing specific reference files that contain the execution specifications for that branch. Generating options, HTML, or prompts without reading them is prohibited to prevent protocol violations and inconsistent output.

When should generative image illustration not be used?

Avoid it for precise data, evidence that must remain pixel-faithful, real UI operation paths, exact maps, and strict measurements. Generated images are interpretive redraws and must never be presented as original photos or factual proof.