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 367 stars 14 forks Updated 4 days ago BSD-3-Clause

Install

View on GitHub

Quality Score: 89/100

Stars 20%
85
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
4 days ago
Language
Python
License
BSD-3-Clause

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

excalidraw

Generate hand-drawn Excalidraw-style diagrams from text prompts. Triggers on requests for diagrams, flowcharts, architecture sketches, system designs, hand-drawn visuals, or when the user says /excalidraw.

22 Updated 3 months ago
aref-vc
Web & Frontend Solid

mviz

A chart & report builder designed for use by AI.

214 Updated 1 months ago
matsonj
AI & Automation Solid

mermaid-studio

Expert Mermaid diagram creation, validation, and rendering with dual-engine output (SVG/PNG/ASCII). Supports all 20+ diagram types including C4 architecture, AWS architecture-beta with service icons, flowcharts, sequence, ERD, state, class, mindmap, timeline, git graph, sankey, and more. Features code-to-diagram analysis, batch rendering, 15+ themes, and syntax validation. Use when users ask to create diagrams, visualize architecture, render mermaid files, generate ASCII diagrams, document system flows, model databases, draw AWS infrastructure, analyze code structure, or anything involving "mermaid", "diagram", "flowchart", "architecture diagram", "sequence diagram", "ERD", "C4", "ASCII diagram". Do NOT use for non-Mermaid image generation, data plotting with chart libraries, or general documentation writing.

4,426 Updated 4 days ago
tech-leads-club
Web & Frontend Solid

codeck-design

Designer role. Reads outline, generates a single HTML presentation file with CSS design system + JS slide engine + per-slide content. Accepts visual references (URLs, screenshots, design specs) and extracts design signals to inform the isomorphic mapping. Use whenever the user says "design slides", "generate deck", "generate the deck", "build slides", "visual style", "reference this style", "like this design", "design", "generate slides", "visual style", "reference this style", or wants to turn an outline into actual slides.

208 Updated 2 weeks ago
hiyeshu
Web & Frontend Solid

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

1,696 Updated 3 weeks ago
ComposioHQ