skills.rest
arvindbattula
arvindbattulaCOMMUNITY
Explore all skills by this author →
GitHub

diagram

Render SVG diagrams, HTML widgets, and charts inline in chat.

Updated Mar 18, 2026
Search Tags:#charts#interactive#flowchart#visualization#svg#design-system#diagram
One-click install
npx skills add https://github.com/arvindbattula/my-agent-config --skill diagram-arvindbattula
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/arvindbattula/my-agent-config/tree/main/skills/diagram
Command: npx skills add https://github.com/arvindbattula/my-agent-config --skill diagram-arvindbattula

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Render inline visuals — SVG diagrams, HTML widgets, charts — directly in a chat conversation to explain complex ideas without attachments or external links.

Core Features & Use Cases

  • Inline SVG/HTML visuals for diagrams, flowcharts, component maps, and data visualizations.
  • Streaming output into the chat as a visualizer, with two modes: SVG mode and HTML mode, rendered in a sandboxed iframe for safety.
  • Reuse design-system tokens and CSS classes to ensure visual consistency with the host app.

Quick Start

Ask me to visualize a concept and I will render an inline visual directly in the chat.

Frequently Asked Questions about diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render interactive SVG diagrams directly in a chat conversation?▼

Inline visuals render directly in chat by streaming SVG or HTML output into a sandboxed iframe visualizer, allowing you to display interactive diagrams without external links or attachments.

Can I generate flowcharts and architectural diagrams that adapt to light and dark themes?▼

Yes, flowcharts and architectural diagrams can adapt to light and dark themes by leveraging CSS variables from the host design system, ensuring visual consistency with the surrounding application interface.

What is the best way to visualize data charts without leaving the chat interface?▼

Visualizing data charts without leaving chat is best achieved by rendering inline HTML widgets or SVG charts as a visualizer, which safely displays interactive content within the conversation stream.

Does the inline visualizer format support streaming output for interactive explainers?▼

Yes, the visualizer format supports streaming output for interactive explainers, allowing complex concepts to be rendered progressively as SVG diagrams or HTML widgets directly within the chat.

Do I need external dependencies to display HTML widgets in a sandboxed iframe?▼

No external dependencies are required to display HTML widgets in a sandboxed iframe, as the rendering mechanism operates independently using design-system tokens and CSS classes for visual consistency.

Why are my inline SVG diagrams not matching the host application's design system?▼

Inline SVG diagrams may not match the host design system if they fail to reuse the available design-system tokens and CSS variables, which are required to maintain visual consistency with the application.

Related Skills

Explore More Design & Creative Skills→
jwmyersjwmyers

visual-style-guide

Define color palettes, SVG styling, and token designs for Zero-Day Attack interfaces.

Community
Intermediate
AlvaroBianoAlvaroBiano

architecture-diagram

Generate dark-themed architecture diagrams as standalone HTML files with inline SVG.

Community
Advanced
dylantarredylantarre
38

layout-primitives

Create reusable layout primitives with CSS flexbox, grid, and React components.

Community
Basic
bentossellbentossell
467

visualise

Render SVG diagrams, HTML widgets, and charts inline in chat.

Community
Intermediate