Visualize

Ontwerphandboek voor het renderen van inline SVG/HTML/Chart.js visuals in Open WebUI chat

Door Classic298 · Classic298/open-webui-plugins

Werkt met setup ★ 8.4/10

Visualize — Ontwerphandboek voor het renderen van inline SVG/HTML/Chart.js visuals in Open WebUI chat

Wat het doet

Een design-system-handboek dat het model instrueert om thema-bewuste inline visualisaties te maken — SVG-diagrammen, Chart.js-grafieken, KPI-strips, interactieve uitleg — met behulp van een vaste viewBox, een 9-ramp kleurenpalet en flat-design-regels. Het wordt geactiveerd wanneer de gebruiker expliciet vraagt om iets te visualiseren, diagrammeren, grafieken te maken, te tekenen of te dashboarden. Rendering en interactiviteit (de visualize() tool call, @@@VIZ markers, automatisch geïnjecteerde CSS/classes, en sendPrompt/openLink bridges) vereisen de bijbehorende Open WebUI Python tool die draait binnen een Open WebUI-instantie.

Testrapport

Beide SKILL.md-varianten en tool.py (allemaal HTTP 200) opgehaald via de GitHub raw API; tool.py is een 3796-regelige Open WebUI FastAPI-tool (v2.2.0) — een beveiligingsgrep vond alleen SRCDOC-safety-opmerkingen, geen exfiltratie/curl|sh/eval-of-remote. Installatie geverifieerd in een tijdelijke HOME: SKILL.md landt op ~/.claude/skills/visualize/SKILL.md, frontmatter parset met name+description. Voor OUTPUT heb ik twee echte bestanden gemaakt voor "chart Q1-Q4 revenue": viz_baseline.html (geen skill) gebruikt een blauwe lineaire GRADIENT, vaste 500x300 px, hardgecodeerde #333 tekst, 10px labels, vierkante balken; viz_skill.html (volgens het handboek) gebruikt vlak effen teal-400 #1D9E75 met 0.85 dekking, viewBox 0 0 680 270 responsieve width:100%, theme --color-* variabelen voor licht/donker, een 3-kaart KPI-metric strip boven de grafiek, .t/.ts/.th label-klassen, en rx=4 afgeronde balken. Concreet, citeerbaar auteurverbetering — maar ik kon de render-pijplijn (visualize() tool + iframe + geïnjecteerde CSS) NIET uitvoeren omdat het een draaiende Open WebUI-instantie nodig heeft, dus claims over interactiviteit/rendering zijn niet geverifieerd. Oordeel "setup": de ontwerprichtlijnen werken als een stijlhandleiding, maar de belangrijkste inline-renderfunctie vereist de Open WebUI Python tool, niet Claude Code.

Getest op: 2026-07-21 · Claude Code 2.x (agent harness)

Installatie

git clone --depth 1 https://github.com/Classic298/open-webui-plugins.git /tmp/visualize-src
mkdir -p ~/.claude/skills
cp -R /tmp/visualize-src/inline-visualizer-v2 ~/.claude/skills/visualize
# Places the handbook at ~/.claude/skills/visualize/SKILL.md (v2, name: "visualize").
# There is also a v1 at inline-visualizer/ (name: "visualize", tool: render_visualization).
#
# IMPORTANT — this is an Open WebUI Tool, not a native Claude Code skill.
# The SKILL.md is only the DESIGN HANDBOOK. The actual rendering needs the
# companion FastAPI tool (inline-visualizer-v2/tool.py, v2.2.0,
# required_open_webui_version 0.10.2) installed in a running Open WebUI instance,
# with "iframe Sandbox Allow Same Origin" enabled (Settings -> Interface).
# In Open WebUI the model calls view_skill("visualize") to read this handbook,
# then visualize(title=...) + @@@VIZ-START/@@@VIZ-END markers to render.
# In plain Claude Code none of that runtime exists (visualize(), sendPrompt,
# openLink, copyText, the auto-injected --color-* vars and .t/.c-teal classes
# all no-op) — you get a design style-guide only.

Commando's en voorbeeldprompts

/visualizeOntwerphandboek voor het renderen van inline SVG/HTML/Chart.js visuals in Open WebUI chat

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

Visualize this dataset as an interactive chart
Draw a diagram of this system architecture
Show this data as a dashboard

Volledig rapport (Engels) →