# Visualise > Render inline interactive visuals — SVG diagrams, HTML widgets, charts, and explainers — directly in the conversation. Use this skill whenever the user asks to visualize, diagram, chart, illustrate, or explain something visually, or when an explanation would genuinely benefit from a spatial/interactive diagram rather than text. Also triggers for: flowcharts, architecture diagrams, data visualizations, interactive explainers, comparison layouts, UI mockups, and any request containing 'show me', 'draw', 'map out', 'visualize', or 'diagram'. Even when the user doesn't explicitly ask for a visual, use this skill proactively when the topic has spatial, sequential, or systemic relationships that a diagram would clarify better than prose. - Skill: `bentossell/visualise` (Agent Skill) - Install (CLI): `npx skillmds@latest add bentossell/visualise` - Raw SKILL.md: https://api.skillmd.com/api/skills/bentossell/visualise/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: bentossell (https://skillmd.com/u/bentossell) - Updated: 2026-09-08 - Page: https://skillmd.com/skills/bentossell/visualise --- # Inline Visualizer Render rich visual content — SVG diagrams, HTML interactive widgets, charts — directly inline in a chat conversation. Output streams token-by-token into a sandboxed iframe. The result feels like a natural extension of the conversation, not an attachment. ## How it works You generate raw HTML or SVG fragments. The client renders them in a sandboxed iframe with the design system's CSS variables injected. No ``, ``, or `` tags — just content fragments. **Two output modes:** - **SVG mode**: Output starts with ``, ``** — just content fragments - Background is transparent — the host provides the container/card styling - Load libraries via `