Rendering Charts Beyond Mermaid's Reach with Vega-Lite and Embedding Them in Markdown (via LLM Skills)

A developer created dataviz-svg, a skill that enables AI agents like Claude Code and Codex to generate statistical SVG charts using Vega-Lite. The skill bundles Vega and Vega-Lite into a single ESM file, allowing agents to create scatter plots, heatmaps, and other complex visualizations directly in Markdown without external dependencies. This fills a gap where Mermaid, which excels at structural diagrams, cannot produce data-driven statistical charts.

AI agents like Claude Code and Codex can write code, polish documentation, and automate complex tasks. But ask them to "make a scatter plot of this data" or "show the trend as a heatmap," and they hit a wall. Mermaid tops out at basic bar charts and pie charts — statistical visualization is outside its scope. dataviz-svg https://github.com/oubakiou/skills dataviz-svg--vega-lite-%E3%81%AB%E3%82%88%E3%82%8B-svg-%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E7%94%9F%E6%88%90 is a skill built to fill that gap. It generates SVG charts from Mermaid is a great tool, but it excels in a different domain. | Mermaid's strengths | dataviz-svg's strengths | |---|---| | Flowcharts, sequence diagrams, ER diagrams | Scatter plots, heatmaps, histograms | | State diagrams, Gantt charts | Box plots, area charts, bubble charts | | Simple bar charts with a few data points | Charts with 20+ data points | | Structural diagrams in general | Multi-axis encoding x, y, color, size | In short: Mermaid is for structural diagrams , dataviz-svg is for data-driven statistical visualization . When an agent can use both, the expressiveness of its documentation output improves dramatically. dataviz-svg inherits the full expressiveness of Vega-Lite, so the range of supported charts is broad. Check out the official Vega-Lite gallery https://vega.github.io/vega-lite/examples/ to see what's possible at a glance. strokeDash for print-friendly output innerRadius The core of dataviz-svg is simple. Vega-Lite and Vega are bundled into a single ESM file ~1.6 MB with Vite, so it runs on Node.js alone. Vega-Lite JSON spec ↓ compile Vega spec ↓ Vega runtime SVG string ↓ writeFileSync output.svg No native dependencies like canvas or puppeteer . No additional npm install needed. The bundle ships with the skill, so it works right after installation. When an agent uses this skill, it follows 5 steps: render-svg.sh to generate the SVG Chart Title ./assets/chart.svg From the user's perspective, you just say "turn this data into a heatmap" and the agent handles everything — spec creation, rendering, and document embedding — end to end. For example, to create a bar chart of quarterly sales data, the agent generates a Vega-Lite spec like this: { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "width": 400, "height": 300, "background": "white", "data": { "values": { "quarter": "Q1", "sales": 120 }, { "quarter": "Q2", "sales": 185 }, { "quarter": "Q3", "sales": 210 }, { "quarter": "Q4", "sales": 165 } }, "mark": "bar", "encoding": { "x": { "field": "quarter", "type": "ordinal" }, "y": { "field": "sales", "type": "quantitative" }, "color": { "field": "quarter", "type": "nominal" } } } Pass this to render-svg.sh and an SVG is generated — no browser required. Practicality comes first. Here are the deliberate trade-offs: canvas / sharp means zero setup friction sans-serif is the safest choiceThese are intentional. The top priority is "works immediately in any environment, with no extra installation." For Claude Code gh skill install oubakiou/skills dataviz-svg --agent claude-code --scope project For Codex gh skill install oubakiou/skills dataviz-svg --agent codex --scope project The only prerequisite is Node.js 18 or later. Vega and Vega-Lite are bundled, so no separate installation is needed. dataviz-svg is laser-focused on one thing: giving AI agents the ability to create data visualizations. "Turn this data into a chart." — With that single request, the agent picks the right chart type, generates it, and embeds it in your document. Naturally integrating data visualization into the AI agent workflow — that's what dataviz-svg is for.