{"slug": "rendering-charts-beyond-mermaid-s-reach-with-vega-lite-and-embedding-them-in-via", "title": "Rendering Charts Beyond Mermaid's Reach with Vega-Lite and Embedding Them in Markdown (via LLM Skills)", "summary": "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.", "body_md": "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.\n\n[ 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\n\nMermaid is a great tool, but it excels in a different domain.\n\n| Mermaid's strengths | dataviz-svg's strengths |\n|---|---|\n| Flowcharts, sequence diagrams, ER diagrams | Scatter plots, heatmaps, histograms |\n| State diagrams, Gantt charts | Box plots, area charts, bubble charts |\n| Simple bar charts with a few data points | Charts with 20+ data points |\n| Structural diagrams in general | Multi-axis encoding (x, y, color, size) |\n\nIn 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.\n\ndataviz-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.\n\n`strokeDash`\n\nfor print-friendly output)`innerRadius`\n\nThe 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.\n\n```\nVega-Lite JSON spec\n    ↓ compile()\nVega spec\n    ↓ Vega runtime\nSVG string\n    ↓ writeFileSync\noutput.svg\n```\n\nNo native dependencies like `canvas`\n\nor `puppeteer`\n\n. No additional `npm install`\n\nneeded. The bundle ships with the skill, so it works right after installation.\n\nWhen an agent uses this skill, it follows 5 steps:\n\n`render-svg.sh`\n\nto generate the SVG`![Chart Title](./assets/chart.svg)`\n\nFrom 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.\n\nFor example, to create a bar chart of quarterly sales data, the agent generates a Vega-Lite spec like this:\n\n```\n{\n  \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n  \"width\": 400,\n  \"height\": 300,\n  \"background\": \"white\",\n  \"data\": {\n    \"values\": [\n      { \"quarter\": \"Q1\", \"sales\": 120 },\n      { \"quarter\": \"Q2\", \"sales\": 185 },\n      { \"quarter\": \"Q3\", \"sales\": 210 },\n      { \"quarter\": \"Q4\", \"sales\": 165 }\n    ]\n  },\n  \"mark\": \"bar\",\n  \"encoding\": {\n    \"x\": { \"field\": \"quarter\", \"type\": \"ordinal\" },\n    \"y\": { \"field\": \"sales\", \"type\": \"quantitative\" },\n    \"color\": { \"field\": \"quarter\", \"type\": \"nominal\" }\n  }\n}\n```\n\nPass this to `render-svg.sh`\n\nand an SVG is generated — no browser required.\n\nPracticality comes first. Here are the deliberate trade-offs:\n\n`canvas`\n\n/ `sharp`\n\n) means zero setup friction`sans-serif`\n\nis the safest choiceThese are intentional. The top priority is \"works immediately in any environment, with no extra installation.\"\n\n```\n# For Claude Code\ngh skill install oubakiou/skills dataviz-svg --agent claude-code --scope project\n\n# For Codex\ngh skill install oubakiou/skills dataviz-svg --agent codex --scope project\n```\n\nThe only prerequisite is Node.js 18 or later. Vega and Vega-Lite are bundled, so no separate installation is needed.\n\ndataviz-svg is laser-focused on one thing: giving AI agents the ability to create data visualizations.\n\n\"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.", "url": "https://wpnews.pro/news/rendering-charts-beyond-mermaid-s-reach-with-vega-lite-and-embedding-them-in-via", "canonical_source": "https://dev.to/kiou_ouba_afbd120335456f3/rendering-charts-beyond-mermaids-reach-with-vega-lite-and-embedding-them-in-markdown-via-llm-1kkl", "published_at": "2026-06-30 04:34:02+00:00", "updated_at": "2026-06-30 04:49:05.122818+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence", "ai-agents"], "entities": ["Claude Code", "Codex", "Vega-Lite", "Mermaid", "dataviz-svg", "Node.js", "Vite"], "alternates": {"html": "https://wpnews.pro/news/rendering-charts-beyond-mermaid-s-reach-with-vega-lite-and-embedding-them-in-via", "markdown": "https://wpnews.pro/news/rendering-charts-beyond-mermaid-s-reach-with-vega-lite-and-embedding-them-in-via.md", "text": "https://wpnews.pro/news/rendering-charts-beyond-mermaid-s-reach-with-vega-lite-and-embedding-them-in-via.txt", "jsonld": "https://wpnews.pro/news/rendering-charts-beyond-mermaid-s-reach-with-vega-lite-and-embedding-them-in-via.jsonld"}}