visualize

Solid

Render rich interactive visuals — SVG diagrams, HTML widgets, Chart.js charts, interactive explainers — directly inline in chat using the render_visualization tool. Use whenever the user asks to visualize, diagram, chart, draw, map out, or illustrate something, or when a topic has spatial, sequential, or systemic relationships a diagram would clarify better than prose. Also use proactively for data comparisons, metrics, architecture, processes, or mechanisms that benefit from a visual.

AI & Automation 378 stars 15 forks Updated 3 days ago BSD-3-Clause

Install

View on GitHub

Quality Score: 89/100

Stars 20%
86
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Inline Visualizer Render rich interactive visuals directly inline in chat using `render_visualization`. ## How to use 1. Call `render_visualization(html_code, title)` with an HTML or SVG **content fragment** 2. Do NOT include `<!DOCTYPE>`, `<html>`, `<head>`, or `<body>` — the tool wraps your content automatically 3. Structure: `<style>` first (prefer inline styles) → visible content → `<script>` last 4. The tool auto-injects: theme CSS, SVG classes, color ramps, height reporting, `sendPrompt()` bridge, and `openLink()` bridge 5. Consider making diagrams **conversational** with `sendPrompt()` — see the [sendPrompt bridge](#sendprompt-bridge--conversational-diagrams) section for patterns and examples ## Output rules These rules keep visuals clean, accessible, and consistent with the host UI: - **Flat design** — no gradients, drop shadows, blur, glow, or noise textures (the host UI is flat; matching it prevents visual jarring) - **No emoji** — use CSS shapes or SVG paths for icons (emoji render inconsistently across platforms) - **Sentence case** — all labels and headings - **Round displayed numbers** — use Math.round, toLocaleString, or Intl.NumberFormat - **Min font size 11px** — smaller becomes unreadable on most screens - **Text weights** — 400 regular, 500 for emphasis only - **All explanatory text goes in your prose response**, not inside the visual (keeps visuals data-dense and lets the model's response provide context) --- ## Design system ### CSS variables (...

Details

Author
Classic298
Repository
Classic298/open-webui-plugins
Created
2 months ago
Last Updated
3 days ago
Language
Python
License
BSD-3-Clause

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

Data & Documents Listed

explainer

Generate dense, visual-first HTML explainers in a signature dark aesthetic — diagrams carry the design, prose is captions only. Every section has a custom inline-SVG visualization: pipeline DAGs, archetype grids, hub-and-spoke diagrams, decision trees, risk matrices, gantt timelines, layer cakes, palette swatches, side-by-side comparisons. Dark theme with mint/violet/amber/cyan/coral accents, monospace section kickers, kicker → h1 → lede → meta header pattern. Inline SVG only — no external assets, no images, no JS. Self-contained single-file HTML output. USE WHEN: explainer, make an explainer, visual doc, architecture HTML, design doc, dark theme HTML, html map, system overview, dashboard reference, prose-heavy is failing, want more visuals, build an HTML diagram, render system as visual reference. NOT FOR: full web pages or apps (use a web design skill), short prose summaries, markdown documents, or anything with photographs/raster images.

1 Updated 1 weeks ago
Angelopvtac
AI & Automation Solid

datavis

Comprehensive data visualization toolkit for creating beautiful, mathematically elegant visualizations with D3.js, Chart.js, and custom SVG. Use when (1) building interactive data visualizations, (2) designing color palettes for charts, (3) choosing scales and visual encodings, (4) creating data pipelines from Census/SEC/Wikipedia APIs, (5) crafting narrative-driven data stories, (6) making perceptually accurate charts, or (7) implementing force-directed networks, timelines, or geographic maps.

2,210 Updated 1 weeks ago
foryourhealth111-pixel
Data & Documents Listed

visualizing-data

Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics. Provides systematic framework for selecting appropriate visualizations based on data characteristics and analytical purpose. Includes 24+ visualization types organized by purpose (trends, comparisons, distributions, relationships, flows, hierarchies, geospatial), accessibility patterns (WCAG 2.1 AA compliance), colorblind-safe palettes, and performance optimization strategies. Use when creating visualizations, choosing chart types, displaying data graphically, or designing data interfaces.

368 Updated 5 months ago
ancoleman
AI & Automation Solid

concept-diagrams

Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark mode. Best suited for educational and non-software visuals — physics setups, chemistry mechanisms, math curves, physical objects (aircraft, turbines, smartphones, mechanical watches), anatomy, floor plans, cross-sections, narrative journeys (lifecycle of X, process of Y), hub-spoke system integrations (smart city, IoT), and exploded layer views. If a more specialized skill exists for the subject (dedicated software/cloud architecture, hand-drawn sketches, animated explainers, etc.), prefer that — otherwise this skill can also serve as a general-purpose SVG diagram fallback with a clean educational look. Ships with 15 example diagrams.

175,435 Updated today
NousResearch
Web & Frontend Listed

visual-cook

Grilling session for visual work that pins fuzzy design language to concrete decisions, grounds disagreements in real renders, and records the result in a visual vocabulary (DESIGN.md) and design-decision records. Use when a UI feels off, when establishing or extending a visual system, or when polishing a single detail.

0 Updated 4 days ago
ideel-1