Generate data visualization charts from natural language descriptions. Creates single-file HTML with inline SVG that can be opened in any browser. Use this skill whenever the user asks to create, draw, or generate: bar chart, column chart, 柱状图, 条形图, pie chart, donut chart, 饼图, 环形图, line chart, area chart, 折线图, 面积图, scatter chart, scatter plot, 散点图, radar chart, spider chart, 雷达图, 蜘蛛图, funnel chart, 漏斗图, conversion, bubble chart, 气泡图, data table, table chart, 表格, 数据表, data visualization, chart, 数据可视化, 图表, or wants to visualize data, compare values, show trends, show proportions, analyze correlation, multi-dimensional comparison. Supports 9 chart types and 12 visual styles. Supports 4 output formats: html, svg, mermaid, png/pdf (via export script).
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Generate data visualization charts from natural language descriptions. Creates single-file HTML with inline SVG that can be opened in any browser. Use this skill whenever the user asks to create, draw, or generate: bar chart, column chart, 柱状图, 条形图, pie chart, donut chart, 饼图, 环形图, line chart, area chart, 折线图, 面积图, scatter chart, scatter plot, 散点图, radar chart, spider chart, 雷达图, 蜘蛛图, funnel chart, 漏斗图, conversion, bubble chart, 气泡图, data table, table chart, 表格, 数据表, data visualization, chart, 数据可视化, 图表, or wants to visualize data, compare values, show trends, show proportions, analyze correlation, multi-dimensional comparison. Supports 9 chart types and 12 visual styles. Supports 4 output formats: html, svg, mermaid, png/pdf (via export script).
gmdiagram — GM Data Chart Skill
What This Skill Does
Generate publication-quality data visualization charts as standalone files. The output can be:
HTML: Single .html file with inline SVG and embedded CSS (default, no JavaScript)
SVG: Standalone .svg file
Mermaid: Text syntax (limited chart support, see Mermaid rules)
PNG/PDF: Via the export script at ../gm-architecture/skills/gm-architecture/scripts/export.sh
Output Directory Structure
All example files must be output to the correct directory structure:
assets/examples/
├── {example-name}.json # JSON schema file
├── {example-name}.html # HTML rendered output (same name as JSON)
└── images/ # For preview screenshots only
└── {example-name}-preview.png
Rules
Correct approach:
HTML and JSON files go in the examples/ root directory
Preview images go in the examples/images/ subdirectory
Filenames must be consistent (only extensions differ)
Prohibited approach:
Do NOT put HTML files in the images/ directory
Do NOT generate any non-image files in the images/ directory
Do NOT put JSON files in subdirectories (unless there's explicit categorization need)
assets/examples/images/chrome-architecture.html (WRONG: HTML should not be in images/)
Interactive Selection
When the user's request does NOT already specify all three choices (chart type, style, output format), use the AskUserQuestion tool to let the user choose.
Important: AskUserQuestion supports at most 4 options per question and 4 questions per call.
Selection Strategy
For each dimension, follow this logic:
Can the choice be inferred from the user's description? → Skip asking, use the inferred value directly.
Does the user explicitly state it? → Skip asking, use the stated value.
Still ambiguous? → Ask via AskUserQuestion.
Question 1 — Chart Type (ask only if ambiguous)
The user's description usually makes the type obvious. Only ask when multiple types could fit. Since there are 9 chart types, split into groups:
First ask which group:
question: "Which chart category fits your needs?"
header: "Category"
options:
- label: "Comparison"
description: "Bar chart — compare categories with bars"
- label: "Proportion"
description: "Pie / Donut — show proportions of a whole"
- label: "Trend / Distribution"
description: "Line / Area / Scatter — show trends, area, or correlation"
- label: "Special"
description: "Radar / Funnel / Bubble / Table — multi-axis, pipeline, 3D data, or grid"
Then drill down within the category:
Comparison → Bar Chart (no further question needed)
Proportion → Ask: "Pie or Donut?" (2 options, simple)
Trend / Distribution → Ask: "Line / Area / Scatter?"
Special → Ask: "Radar / Funnel / Bubble / Table?"
Question 2 — Visual Style
Use the same 3-family approach as architecture-diagram:
First ask:
"Which style family?" → Dark / Light+Clean / Creative
Then drill down within the family.
Infer from context when possible: technical content → dark, business → light-corporate, creative → cyberpunk/pastel.
Question 3 — Output Format
Default is HTML. Only ask if the user mentions a specific use case (GitHub → Mermaid, print → SVG/PDF).
ALL chart generation follows exactly two steps. Never skip to output directly.
Step 1 — Extract to JSON Schema
Extract data from the user's natural language description into the typed JSON schema for the chosen chart type.
Schema files:
Chart Type
Schema File
bar
assets/schema-bar.json
pie
assets/schema-pie.json
line
assets/schema-line.json
area
assets/schema-area.json
scatter
assets/schema-scatter.json
radar
assets/schema-radar.json
funnel
assets/schema-funnel.json
bubble
assets/schema-bubble.json
table
assets/schema-table.json
Shared schema definitions are in assets/schema-shared.json (styleEnum, formatEnum, legendConfig, axisConfig, scatterAxisConfig, sanitizedString, etc.). Individual schemas reference shared definitions via $ref.
Critical: Nice Numbers algorithm runs in this step.
Read references/axis-and-grid.md for the full algorithm. Compute Y-axis ticks and store them in axis.y.ticks. For scatter and bubble charts, compute Nice Numbers for both X and Y axes and store in axis.x.ticks and axis.y.ticks. This avoids complex math in Step 2.
Data extraction rules:
Extract numeric values and labels from user text
Infer series names when multiple data sets are mentioned
When user provides percentages, store as raw values (not pre-multiplied)
When user says "compare X and Y", infer grouped bar chart with 2 series
All string fields have maxLength constraints — truncate if necessary with a note to the user
Scatter/Bubble: Extract x/y pairs from user data. Infer axis labels from context (e.g., "height vs weight" → x label "Height", y label "Weight"). For bubble, also extract size values.
Radar: Extract dimension labels (axes) and values per series. Ensure all series have the same number of data points as axes.
Funnel: Extract stage names and values. Note that values should be in descending order; if not, auto-sort will be applied during rendering.
Table: Extract column headers and row data. Ensure each row has a value for every column.
Validation:
Bar/Line/Area: series max 8, data per series max 30. If exceeded, must ask user to simplify.
Scatter: series max 8, data per series max 50.
Bubble: series max 5, data per series max 30.
Radar: axes min 3 max 12, series max 6, data length must match axes length.
Pie/Funnel: data max 12 (pie) / max 8 (funnel). If exceeded, suggest merging smallest items into "Others" (pie) or simplifying stages (funnel).
Table: columns min 2 max 12, rows max 50. Each row must contain all column keys.
All value fields must be finite numbers (no NaN, Infinity).
All color fields must match ^#[0-9a-fA-F]{6}$.
Radar axes[].maxValue: either all specified or all omitted (all-or-nothing). Partial specification is rejected in Step 1 validation.
Step 2 — Render Output
Read the corresponding render reference and template, then generate SVG wrapped in HTML.
