Turn JSON data into browser-ready infographics with metric cards, grouped bar charts, process diagrams, or mixed dashboards. Outputs include all styling and SVG graphics in one HTML file, with preset palettes and icons and no external dependencies.
Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards. Offers 8 color palettes and built-in icons with no external dependencies. Triggered when users request data visualization, infographics, charts, or dashboards.
Review the instructions the agent will receive before you install.
Generate self-contained HTML/SVG infographics from JSON data. Four supported types:
Output is a fully self-contained HTML file (all CSS/SVG inline, no external dependencies), ready to open directly in a browser.
python3 scripts/build_infographic.py config.json
Also supports reading from stdin:
cat config.json | python3 scripts/build_infographic.py
The script outputs a JSON status to stdout and writes the generated HTML to the path specified in the output field.
Common fields:
| Field | Type | Required | Description |
|---|---|---|---|
title | string | No | Infographic title |
subtitle | string | No | Subtitle |
type | string | Yes | stats / comparison / flow / dashboard |
palette | string | No | Color palette (default: auto) |
data | object/array | Yes | Data content (format depends on type) |
output | string | No | Output file path (default: infographic.html) |
footer | string | No | Footer text |
Available values: auto (automatically chosen based on data), ocean, sunset, forest, berry, vibrant, corporate, pastel, earth
{
"type": "stats",
"data": [
{
"label": "Total Revenue",
"value": "$1.2M",
"icon": "money",
"trend": "+12.5%",
"trend_dir": "up"
},
{
"label": "Users",
"value": "45,230",
"icon": "users",
"trend": "+8.2%",
"trend_dir": "up"
}
]
}
icon options: users, user, money, percent, globe, clock, check, star, target, zap, chart-bar, chart-pie, database, rocket, shield, heart, light, search, mail, settings, flag, trending-up, trending-down
trend_dir: up (green upward arrow) or down (red downward arrow)
{
"type": "comparison",
"data": {
"chart_title": "Quarterly Revenue Comparison",
"categories": ["Q1", "Q2", "Q3", "Q4"],
"series": [
{"name": "2024", "values": [320, 410, 380, 520]},
{"name": "2025", "values": [380, 490, 450, 610]}
]
}
}
{
"type": "flow",
"data": [
{"step": 1, "title": "Requirements", "description": "Gather user needs", "icon": "search"},
{"step": 2, "title": "Design", "description": "Create technical plan", "icon": "light"},
{"step": 3, "title": "Development", "description": "Code and test", "icon": "settings"},
{"step": 4, "title": "Launch", "description": "Deploy to production", "icon": "rocket"}
]
}
{
"type": "dashboard",
"data": {
"stats": [
{"label": "DAU", "value": "12.3K", "icon": "users", "trend": "+5%", "trend_dir": "up"},
{"label": "Conversion Rate", "value": "3.8%", "icon": "target", "trend": "-0.2%", "trend_dir": "down"}
],
"chart": {
"chart_title": "Monthly Trend",
"categories": ["Jan", "Feb", "Mar", "Apr"],
"series": [{"name": "DAU", "values": [10200, 11500, 11800, 12300]}]
},
"breakdown": [
{"label": "iOS", "value": 45},
{"label": "Android", "value": 38},
{"label": "Web", "value": 17}
],
"flow": [
{"step": 1, "title": "Sign Up", "description": ""},
{"step": 2, "title": "Activate", "description": ""},
{"step": 3, "title": "Retain", "description": ""}
]
}
}
The script outputs a JSON result to stdout:
{
"status": "success",
"output": "/absolute/path/to/infographic.html",
"type": "stats",
"title": "My Infographic",
"palette": "auto",
"size_bytes": 8432
}
On error:
{
"status": "error",
"errors": ["Missing required field: data"]
}
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Get a simulated peer review of a paper, abstract, or selected sections. Receive assessments of originality, methods, results, and writing, with specific revision suggestions, severity ratings, and a prioritized checklist for improving the manuscript.
Guide Windows domain penetration testing through Active Directory reconnaissance, credential attacks, privilege escalation, and certificate service checks. Use references for tools such as BloodHound and Impacket to examine attack paths and understand testing prerequisites.
Test REST, SOAP, and GraphQL APIs for authentication flaws, improper access to other users’ records, and unsafe input handling. Guides endpoint discovery and request variations to identify vulnerabilities and document evidence of unauthorized access.
Explores alternative APIs, the interfaces other code uses to call a module. Parallel sub-agents develop distinctly different designs, then present signatures, usage examples, and trade-offs to help choose or combine an approach before implementation.
Trace system behavior across code, APIs, authentication, data, and networks through an interactive workflow. Store steps, branches, and findings in SQLite, then export diagrams and documentation for security audits, debugging, architecture reviews, or incident analysis.
Compare login approaches and authentication providers, then use implementation examples and security checklists to plan or review an app’s login flow. Covers sessions, tokens, external login providers, passkeys, and common implementation mistakes.