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.
Best use case
Inline Visualizer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using Inline Visualizer should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/visualise/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How Inline Visualizer Compares
| Feature / Agent | Inline Visualizer | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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 `<html>`, `<head>`, or `<body>` tags — just content fragments. **Two output modes:** - **SVG mode**: Output starts with `<svg>`. Client auto-wraps in a card. Best for static diagrams. - **HTML mode**: Raw HTML fragment. Best for interactive content (sliders, tabs, charts, controls). You can embed `<svg>` elements inside HTML mode. The client detects which mode based on whether the output starts with `<svg`. ## Before generating any visual Read the design system reference before your first visual in a conversation: 1. **Always read first**: `references/design-system.md` — CSS variables, color ramps, typography, core rules 2. **Then read the relevant module**: - Diagrams (flowcharts, structural, illustrative): `references/diagrams.md` - Interactive explainers, comparisons, data records: `references/components.md` - Charts (Chart.js, data viz): `references/charts.md` Read the design system file once per conversation. Read module files as needed for each visual type. ## Streaming constraints Output streams token-by-token into the DOM. This dictates structure: 1. `<style>` first (keep under 15 lines — inline styles preferred) 2. Visible HTML/SVG content next (the user sees it building up) 3. `<script>` last (executes only after streaming completes) **Because of streaming:** - No gradients, drop shadows, blur, or glow — they flash during DOM diffs. Use flat fills. - No `display:none` or hidden content — it streams invisibly. - No `<!-- comments -->` or `/* comments */` — waste tokens, break streaming. - Inline `style="..."` preferred over `<style>` blocks so elements look correct mid-stream. - No tabs or carousels that start hidden — show everything stacked vertically during stream. Post-streaming JS can add interactivity. ## Iframe sandbox rules The visual renders in a sandboxed iframe. These are hard constraints: - **No localStorage / sessionStorage** — all state must be in-memory - **No position: fixed** — the iframe auto-sizes to content height; fixed elements collapse it - **No external fetches** — CSP blocks API calls from inside the widget - **CDN allowlist only**: `cdnjs.cloudflare.com`, `esm.sh`, `cdn.jsdelivr.net`, `unpkg.com` - **No DOCTYPE, `<html>`, `<head>`, `<body>`** — just content fragments - Background is transparent — the host provides the container/card styling - Load libraries via `<script src="https://cdnjs.cloudflare.com/ajax/libs/...">` (UMD globals) ## The sendPrompt bridge A global `sendPrompt(text)` function is available inside the iframe. It sends a message to the chat as if the user typed it. Use it to make visuals conversational — clicking a node in a diagram can trigger a follow-up explanation. Use `sendPrompt` when the user's next step benefits from the model thinking. Handle filtering, sorting, toggling, and calculations in local JS instead. ## Choosing the right visual type Route on the verb, not the noun. The same subject gets different treatment depending on what was asked: | User says | Type | What to build | |-----------|------|---------------| | "how does X work" | Illustrative diagram | Spatial metaphor showing the mechanism | | "what are the components of X" | Structural diagram | Labelled boxes showing containment | | "walk me through the steps" | Flowchart | Sequential boxes and arrows | | "compare X vs Y" | Comparison layout | Side-by-side cards with metrics | | "show me the data" | Chart | Chart.js or inline data viz | | "explain X" (spatial concept) | Interactive explainer | Sliders, controls, live state | Default to illustrative for "how does X work" — it's the more ambitious choice. Don't retreat to a flowchart because it feels safer. ## Multiple visuals per response Generate multiple visuals in a single response, interleaved with prose: 1. Text block (introduce/explain) 2. Visual 3. Text block (transition) 4. Visual (if needed) Never stack visuals back-to-back without text between them. ## Output wrapper Wrap visual output in a code fence with the language tag `visualizer` so the client detects and routes it to the iframe renderer: ```` ```visualizer <svg width="100%" viewBox="0 0 680 400"> ... </svg> ``` ```` The client strips the fence and injects the content into the iframe with theme variables prepended. ## Quick reference | Rule | Value | |------|-------| | SVG viewBox width | Always 680px | | Font sizes | 14px labels, 12px subtitles only | | Stroke width | 0.5px for borders and edges | | Max colors per diagram | 2-3 ramps | | Box subtitle length | ≤5 words | | Corner radius (SVG) | rx="4" default, rx="8" for emphasis | | Corner radius (HTML) | `var(--border-radius-md)` or `-lg` | | Min font size | 11px | | Text weights | 400 regular, 500 bold only | | Heading sizes | h1=22px, h2=18px, h3=16px |
Related Skills
tensorboard-visualizer
Tensorboard Visualizer - Auto-activating skill for ML Training. Triggers on: tensorboard visualizer, tensorboard visualizer Part of the ML Training skill category.
database-schema-visualizer
Database Schema Visualizer - Auto-activating skill for Visual Content. Triggers on: database schema visualizer, database schema visualizer Part of the Visual Content skill category.
azure-resource-visualizer
Analyze Azure resource groups and generate detailed Mermaid architecture diagrams showing the relationships between individual resources. USE FOR: create architecture diagram, visualize Azure resources, show resource relationships, generate Mermaid diagram, analyze resource group, diagram my resources, architecture visualization, resource topology, map Azure infrastructure DO NOT USE FOR: creating/modifying resources (use azure-deploy), security scanning (use azure-security), performance troubleshooting (use azure-diagnostics), code generation (use relevant service skill)
generating-sorbet-inline
Generates Sorbet inline type signatures using sig blocks directly in Ruby source files. Triggers when adding Sorbet types, annotating Ruby methods with sig syntax, or generating type signatures for Sorbet-typed projects.
generating-rbs-inline
Generates RBS-inline type annotations directly in Ruby source files as comments. Triggers when adding inline type signatures, annotating Ruby methods with rbs-inline syntax, or generating type comments without existing inline annotations.
schema-visualizer
Generate database schema diagrams, ERDs, and documentation from database schemas.
ascii-visualizer
Creates beautiful ASCII art visualizations for plans, architectures, workflows, and data. This skill should be used when explaining system architecture, creating implementation plans, showing workflows, visualizing comparisons, or documenting file structures. NOT for code syntax highlighting or markdown tables. User explicitly loves ASCII art - use liberally for visual communication.
AlphaEar Logic Visualizer Skill
## Overview
diff-visualizer
Rich downstream visualisation and reporting for bulk RNA-seq differential expression and scRNA marker/contrast outputs.
Daily Logs
Record the user's daily activities, progress, decisions, and learnings in a structured, chronological format.
Socratic Method: The Dialectic Engine
This skill transforms Claude into a Socratic agent — a cognitive partner who guides
Sokratische Methode: Die Dialektik-Maschine
Dieser Skill verwandelt Claude in einen sokratischen Agenten — einen kognitiven Partner, der Nutzende durch systematisches Fragen zur Wissensentdeckung führt, anstatt direkt zu instruieren.