Visualize

Designhandbok för rendering av inline SVG/HTML/Chart.js-visualiseringar i Open WebUI-chatt

av Classic298 · Classic298/open-webui-plugins

Fungerar med konfiguration ★ 8.4/10

Visualize — Designhandbok för rendering av inline SVG/HTML/Chart.js-visualiseringar i Open WebUI-chatt

Vad den gör

En designsystemhandbok som instruerar modellen att skapa temamedvetna inline-visualiseringar — SVG-diagram, Chart.js-diagram, KPI-remsor, interaktiva förklaringar — med en fast viewBox, en 9-stegs färgpalett och flat-design-regler. Den utlöses när användaren uttryckligen ber att visualisera, diagrammera, rita diagram, rita eller skapa en instrumentpanel för något. Rendering och interaktivitet (visualize()-verktygsanropet, @@@VIZ-markörer, automatiskt injicerade CSS/klasser och sendPrompt/openLink-bryggor) kräver det medföljande Open WebUI Python-verktyget som körs inuti en Open WebUI-instans.

Testrapport

Hämtade båda SKILL.md-varianterna och tool.py (alla HTTP 200) via GitHub raw API; tool.py är ett 3796-radigt Open WebUI FastAPI-verktyg (v2.2.0) — en säkerhetsgrep fann endast SRCDOC-säkerhetskommentarer, ingen exfiltration/curl|sh/eval-of-remote. Verifierade installationen i en tillfällig HOME: SKILL.md hamnar på ~/.claude/skills/visualize/SKILL.md, frontmatter parsas med name+description. För OUTPUT skapade jag två verkliga filer för "diagram Q1-Q4 intäkter": viz_baseline.html (ingen färdighet) använder en blå linjär GRADIENT, fast 500x300 px, hårdkodad #333 text, 10px etiketter, fyrkantiga staplar; viz_skill.html (följer handboken) använder platt solid teal-400 #1D9E75 med 0.85 opacitet, viewBox 0 0 680 270 responsiv bredd:100%, tema --color-*-variabler för ljus/mörk, en 3-korts KPI-mätarremsa ovanför diagrammet, .t/.ts/.th etikettklasser och rx=4 rundade staplar. Konkret, citerbar förbättring av författarskapet — men jag kunde INTE exekvera render-pipelinen (visualize()-verktyg + iframe + injicerad CSS) eftersom det kräver en körande Open WebUI-instans, så interaktivitets-/renderingspåståenden är overifierade. Bedömning "setup": designvägledningen fungerar som en stilguide, men den framträdande inline-render-funktionen kräver Open WebUI Python-verktyget, inte Claude Code.

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

Installation

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.

Kommandon och exempelprompter

/visualizeDesignhandbok för rendering av inline SVG/HTML/Chart.js-visualiseringar i Open WebUI-chatt

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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

Läs hela rapporten →