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

> Source: <https://dev.to/kiou_ouba_afbd120335456f3/rendering-charts-beyond-mermaids-reach-with-vega-lite-and-embedding-them-in-markdown-via-llm-1kkl>
> Published: 2026-06-30 04:34:02+00:00

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.