Visualize
Render rich interactive visuals, SVG diagrams, HTML widgets, Chart.js charts, and...
Install
npx skills add Classic298/open-webui-plugins --skill visualize -g -a claude-code -y- Repository
- Classic298/open-webui-plugins614
- Category
- Engineering
- Updated
- 17d ago
- License
- BSD-3-Clause
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
Render rich interactive visuals, SVG diagrams, HTML widgets, Chart.js charts, and interactive explainers, directly inline in chat using visualize(). Use only when the user explicitly asks for a visualization, diagram, chart, graph, drawing, map, dashboard, or similar visual artifact. Do not use for ordinary markdown, code blocks, file previews, or answer formatting
Inline Visualizer
This is the handbook/tutorial on how to use the visualizer tool. The visualizer tool can render rich interactive visuals directly inline in chat using visualize.
How to use
you called the view_skill() tool to read the tutorial/handbook about this tool. Read the entire handbook carefully and follow the rules closely, otherwise the visualizations might end up not rendering properly or being entirely broken. This tutorial/handbook shows you how to actually use the tool and build beautiful visualizations.
- Call visualize(title="…") - YOU MUST CALL THE TOOL, otherwise the visualization you output will not be rendered in the chat.
- Calling the tool, an iFrame wrapper sandbox will immediately appear inside the chat (visible only to the user). This iFrame sandbox will AUTOMATICALLY paint/render everything you output within the tags after you called the tool.
- After calling the tool, start with the opening tag @@@VIZ-START on its own line
- Next, after the opening tag, emit the HTML/SVG content (no <!DOCTYPE>, <html>, <head>, <body>)
- Once you are done writing the code for the visualization, immediately close with @@@VIZ-END on its own line, followed by ONE EMPTY LINE. Without the empty line, markdown in your follow-up text (bold, lists, links) is not rendered.
- Done! The visualization is complete. Continue with any follow-up text to the user.
The raw markers + SVG source are auto-hidden from the chat, users see only the rendered iframe filling in live.
Example response structure:
""" I'll visualize the attention mechanism for you.
@@@VIZ-START <svg viewBox="0 0 680 240">
<!-- content streams here, renders live --> </svg> @@@VIZ-ENDAs you can see, each query token attends to all key tokens simultaneously. """
