charts

Generate publication-ready charts and diagrams using matplotlib, seaborn, ECharts, D3.js, Mermaid, and Playwright+CSS.

Updated Apr 20, 2026
One-click install
npx skills add https://github.com/Kraits/cxc-ace --skill charts-kraits
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: charts
Source: https://github.com/Kraits/cxc-ace/tree/main/skills-backup/charts
Command: npx skills add https://github.com/Kraits/cxc-ace --skill charts-kraits

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a comprehensive, framework-agnostic toolkit to create, visualize, and publish professional charts and diagrams.

Core Features & Use Cases

  • Data charts: bar charts, line charts, pie charts, scatter plots, heatmaps, radar charts, candlestick charts, boxplots, histograms, area charts, waterfall charts, regression plots, distribution plots, and statistical visualizations.
  • Structural diagrams: flowcharts, mind maps, tree diagrams, org charts, architecture diagrams, network/relationship graphs, ER diagrams, class diagrams, Gantt charts, swimlane diagrams, and sequence diagrams.
  • Dashboards: data dashboards, KPI panels, multi-chart compositions, and interactive visualizations.
  • Design quality: professional color systems, anti-overlap rules, layout optimization, scene-based framework routing (matplotlib, seaborn, ECharts, D3.js, Mermaid, Playwright+CSS), and publication-ready output.

Quick Start

Install dependencies and start experimenting with the provided templates and reference guides.

Frequently Asked Questions about charts

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

FAQPage Schema
How do I create publication-ready charts and diagrams from raw data?

You can create publication-ready charts by transforming raw data using standardized templates. The system applies professional color systems, anti-overlap rules, and layout optimization to generate consistent, reusable visuals across multiple frameworks.

What's the best way to build interactive data dashboards with KPI panels?

The best way to build interactive data dashboards is using scene-based framework routing. This approach supports multi-chart compositions and KPI panels by leveraging frameworks like ECharts, D3.js, and Playwright+CSS for optimized visualization output.

Can I use matplotlib and seaborn for statistical visualizations like regression plots?

Yes, you can use matplotlib and seaborn for statistical visualizations. The framework supports regression plots, distribution plots, boxplots, and histograms, applying professional color systems and anti-overlap rules to ensure clear, publication-ready output.

Does it support structural diagrams like flowcharts, ER diagrams, and sequence diagrams?

It fully supports structural diagrams including flowcharts, ER diagrams, and sequence diagrams. You can generate these diagrams using Mermaid and other routing frameworks, ensuring consistent layout optimization and professional design quality.

When should I use Mermaid versus ECharts for data visualization?

Use Mermaid for structural diagrams like flowcharts and sequence diagrams, and ECharts for interactive data charts and dashboards. Scene-based framework routing automatically selects the appropriate tool based on your specific visualization requirements and output context.

Do I need to install dependencies to generate charts and diagrams?

You need to install dependencies before generating charts and diagrams. Once installed, you can start experimenting with provided templates and reference guides to produce visuals using frameworks like matplotlib, seaborn, ECharts, D3.js, and Playwright+CSS.