Agent skill

SVG Diagrams

by CopilotKit in CopilotKit/OpenGenerativeUI

Generating rich inline SVG diagrams to visually explain systems, processes, architectures, and abstract concepts.

MITAuto-check passedDevelopment

Install SVG Diagrams

skills CLI

$ npx skills add CopilotKit/OpenGenerativeUI --skill svg-diagrams -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install CopilotKit/OpenGenerativeUI svg-diagrams --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/CopilotKit/OpenGenerativeUI.git skills-src && mkdir -p .claude/skills && cp -r skills-src/apps/agent/skills/svg-diagrams .claude/skills/svg-diagrams && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "svg-diagrams" agent skill from https://github.com/CopilotKit/OpenGenerativeUI/tree/main/apps/agent/skills/svg-diagrams into .claude/skills/svg-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-diagrams", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/CopilotKit/OpenGenerativeUI/tree/main/apps/agent/skills/svg-diagrams

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add CopilotKit/OpenGenerativeUI --skill svg-diagrams -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install CopilotKit/OpenGenerativeUI svg-diagrams --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/CopilotKit/OpenGenerativeUI.git skills-src && mkdir -p .agents/skills && cp -r skills-src/apps/agent/skills/svg-diagrams .agents/skills/svg-diagrams && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "svg-diagrams" agent skill from https://github.com/CopilotKit/OpenGenerativeUI/tree/main/apps/agent/skills/svg-diagrams into .agents/skills/svg-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-diagrams", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add CopilotKit/OpenGenerativeUI --skill svg-diagrams -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install CopilotKit/OpenGenerativeUI svg-diagrams --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/CopilotKit/OpenGenerativeUI.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/apps/agent/skills/svg-diagrams .cursor/skills/svg-diagrams && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "svg-diagrams" agent skill from https://github.com/CopilotKit/OpenGenerativeUI/tree/main/apps/agent/skills/svg-diagrams into .cursor/skills/svg-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-diagrams", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/CopilotKit/OpenGenerativeUI.git --path apps/agent/skills/svg-diagrams

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add CopilotKit/OpenGenerativeUI --skill svg-diagrams -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install CopilotKit/OpenGenerativeUI svg-diagrams --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/CopilotKit/OpenGenerativeUI.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/apps/agent/skills/svg-diagrams .gemini/skills/svg-diagrams && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "svg-diagrams" agent skill from https://github.com/CopilotKit/OpenGenerativeUI/tree/main/apps/agent/skills/svg-diagrams into .gemini/skills/svg-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-diagrams", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install CopilotKit/OpenGenerativeUI svg-diagrams

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add CopilotKit/OpenGenerativeUI --skill svg-diagrams -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/CopilotKit/OpenGenerativeUI.git skills-src && mkdir -p .github/skills && cp -r skills-src/apps/agent/skills/svg-diagrams .github/skills/svg-diagrams && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "svg-diagrams" agent skill from https://github.com/CopilotKit/OpenGenerativeUI/tree/main/apps/agent/skills/svg-diagrams into .github/skills/svg-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-diagrams", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add CopilotKit/OpenGenerativeUI --skill svg-diagrams -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install CopilotKit/OpenGenerativeUI svg-diagrams --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/CopilotKit/OpenGenerativeUI.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/apps/agent/skills/svg-diagrams .opencode/skills/svg-diagrams && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "svg-diagrams" agent skill from https://github.com/CopilotKit/OpenGenerativeUI/tree/main/apps/agent/skills/svg-diagrams into .opencode/skills/svg-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "svg-diagrams", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: svg-diagrams
GitHub stars: 2.1k
Token cost: ~3k tokens
SKILL.md length: 923 words
Files: 1
Skills in repo: 3
Repo updated: Oct 9, 2026
First seen: Oct 10, 2026
Licence: MIT

At a glance

Generating rich inline SVG diagrams to visually explain systems, processes, architectures, and abstract concepts.

Works in 3 steps: Flowchart → Structural Diagram → Illustrative Diagram
Tasks that involve Diagrams
SKILL.md covers Delivery, When to Use, SVG Setup and Core Design Rules, plus 7 more sections
Reaches w3.org

What it does

SVG Diagrams is an agent skill from CopilotKit/OpenGenerativeUI. Generating rich inline SVG diagrams to visually explain systems, processes, architectures, and abstract concepts.

Its SKILL.md is about 3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Diagrams. It works with JavaScript and TypeScript. The repository describes itself as: Open-Source Generative UI Framework. The licence is MIT.

When your agent uses it

Tasks that involve Diagrams

Example prompts

“/svg-diagrams”

Workflow steps

3 steps, taken from the step headings in SKILL.md.

Flowchart
Structural Diagram
Illustrative Diagram

What it can do on your machine

Read from SKILL.md and the folder at commit f6e4388. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are svg).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- w3.org
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

SVG Diagrams loads about 3k tokens when it runs. Until then it costs about 32 tokens; SKILL.md has 923 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~32
When it runs · the whole SKILL.md, loaded when a task matches: ~3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from CopilotKit/OpenGenerativeUI at commit f6e4388, republished under its MIT licence (© CopilotKit). 923 words, ~3,000 tokens.

Download SKILL.mdSave it as .claude/skills/svg-diagrams/SKILL.md (or your agent's skills folder).

name: svg-diagrams
description: Generating rich inline SVG diagrams to visually explain systems, processes, architectures, and abstract concepts.

SVG Diagram Generation Skill

You can generate rich, inline SVG diagrams to visually explain concepts. Use this skill whenever a visual would help the user understand a system, process, architecture, or mechanism better than text alone.

Delivery

Diagrams ship through the generateSandboxedUi tool: the SVG markup goes in the html parameter, where it streams to the user element by element. SVG presentation attributes (fill, stroke, font-size) carry all styling here — if a diagram needs CSS animation classes, declare them in the css parameter, never in a <style> block inside html. Static diagrams need no jsFunctions or jsExpressions.

When to Use

Explaining how something works (load paths, circuits, pipelines, algorithms)
Showing architecture or structure (system diagrams, component layouts)
Illustrating processes or flows (flowcharts, data flow, decision trees)
Building intuition for abstract concepts (attention mechanisms, gradient descent, recursion)

SVG Setup

Use this template as a starting point; add an accessible title/description:

svg

<svg width="100%" viewBox="0 0 680 H" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
            markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </marker>
  </defs>
  <!-- Content here -->
</svg>

680px is a useful default coordinate width via viewBox. Set width="100%" so it scales responsively.
H (height) = bottom-most element's y + height + 40px padding. Don't guess — compute it.
Safe content area: x=40 to x=640, y=40 to y=(H-40).
Body fragments only: no <html>, <head>, <body>, or DOCTYPE.
Background is transparent — the host provides the background.

Core Design Rules

Typography

Two sizes only: 14px for titles/labels, 12px for subtitles/descriptions.
Two weights only: 400 (regular), 500 (medium/bold). Never use 600 or 700.
Font: Use font-family="system-ui, -apple-system, sans-serif" or inherit from host.
Always set text-anchor="middle" and dominant-baseline="central" for centered text in boxes.
Sentence case always. Never Title Case or ALL CAPS.

Text Width Estimation

At 14px, each character ~ 8px wide. At 12px, each character ~ 7px wide.

"Load Balancer" (13 chars) at 14px ~ 104px -> needs rect ~ 140px wide (with padding).
Always compute: rect_width = max(title_chars x 8, subtitle_chars x 7) + 48px padding.

Colors (Light/Dark Mode Safe)

Use these semantic color sets that work in both modes:

Teal:    fill="#E1F5EE" stroke="#0F6E56" text="#085041"  (dark: fill="#085041" stroke="#5DCAA5" text="#9FE1CB")
Purple:  fill="#EEEDFE" stroke="#534AB7" text="#3C3489"  (dark: fill="#3C3489" stroke="#AFA9EC" text="#CECBF6")
Coral:   fill="#FAECE7" stroke="#993C1D" text="#712B13"  (dark: fill="#712B13" stroke="#F0997B" text="#F5C4B3")
Amber:   fill="#FAEEDA" stroke="#854F0B" text="#633806"  (dark: fill="#633806" stroke="#EF9F27" text="#FAC775")
Blue:    fill="#E6F1FB" stroke="#185FA5" text="#0C447C"  (dark: fill="#0C447C" stroke="#85B7EB" text="#B5D4F4")
Gray:    fill="#F1EFE8" stroke="#5F5E5A" text="#444441"  (dark: fill="#444441" stroke="#B4B2A9" text="#D3D1C7")
Red:     fill="#FCEBEB" stroke="#A32D2D" text="#791F1F"  (dark: fill="#791F1F" stroke="#F09595" text="#F7C1C1")
Green:   fill="#EAF3DE" stroke="#3B6D11" text="#27500A"  (dark: fill="#27500A" stroke="#97C459" text="#C0DD97")
Pink:    fill="#FBEAF0" stroke="#993556" text="#72243E"  (dark: fill="#72243E" stroke="#ED93B1" text="#F4C0D1")

Color meaning, not sequence: Don't rainbow-cycle. Use 2-3 colors per diagram. Map colors to categories or physical properties (warm = heat/energy, cool = calm/cold, gray = structural/neutral).

If you're rendering inside a system that supports CSS variables, prefer:

var(--color-text-primary) for primary text
var(--color-text-secondary) for muted text
var(--color-border-tertiary) for light borders

Shapes & Layout

Stroke width: 0.5px for borders, 1.5px for arrows/connectors.
Corner radius: rx="4" for subtle rounding, rx="8" for emphasized. rx="20" for large containers.
Spacing: 60px minimum between boxes, 24px padding inside boxes, 12px text-to-edge clearance.
Single-line box: 44px tall. Two-line box: 56px tall.
Max 4-5 nodes per row at 680px width. If more, split into multiple diagrams.
All connectors need fill="none" — SVG defaults fill to black, which turns paths into black blobs.

Component Patterns

Single-Line Node

svg

<g>
  <rect x="100" y="20" width="180" height="44" rx="8"
        fill="#EEEDFE" stroke="#534AB7" stroke-width="0.5"/>
  <text x="190" y="42" text-anchor="middle" dominant-baseline="central"
        font-size="14" font-weight="500" fill="#3C3489">Node title</text>
</g>

Two-Line Node

svg

<g>
  <rect x="100" y="20" width="200" height="56" rx="8"
        fill="#E6F1FB" stroke="#185FA5" stroke-width="0.5"/>
  <text x="200" y="38" text-anchor="middle" dominant-baseline="central"
        font-size="14" font-weight="500" fill="#0C447C">Title</text>
  <text x="200" y="56" text-anchor="middle" dominant-baseline="central"
        font-size="12" fill="#185FA5">Short subtitle</text>
</g>

Arrow Connector

svg

<line x1="200" y1="76" x2="200" y2="120"
      stroke="#534AB7" stroke-width="1.5" marker-end="url(#arrow)"/>

Dashed Flow Indicator

svg

<line x1="200" y1="76" x2="200" y2="120"
      stroke="#534AB7" stroke-width="1.5" stroke-dasharray="4 3"/>

Leader Line with Label (for annotations)

svg

<line x1="440" y1="100" x2="500" y2="130"
      stroke="currentColor" stroke-width="0.5" stroke-dasharray="4 4" opacity="0.5"/>
<circle cx="440" cy="100" r="2" fill="currentColor" opacity="0.5"/>
<text x="506" y="134" font-size="12" fill="currentColor" opacity="0.7">Annotation text</text>

Large Container (for structural diagrams)

svg

<rect x="80" y="40" width="520" height="300" rx="20"
      fill="#E1F5EE" stroke="#0F6E56" stroke-width="0.5"/>
<text x="340" y="68" text-anchor="middle"
      font-size="14" font-weight="500" fill="#085041">Container name</text>

Diagram Types & When to Use Each

1. Flowchart

When: Sequential processes, decision trees, pipelines. Layout: Top-to-bottom or left-to-right. Single direction only. Rules:

Arrows must never cross unrelated boxes. Route around with L-bends if needed.
Keep all same-type boxes the same height.
Max 4-5 nodes per diagram. Break complex flows into multiple diagrams.

2. Structural Diagram

When: Containment matters — things inside other things (architecture, org charts, system components). Layout: Nested rectangles. Outer = container, inner = regions. Rules:

Max 2-3 nesting levels.
20px minimum padding inside every container.
Use different color ramps for parent vs child to show hierarchy.

Show full SKILL.md (378 more words)Show less

3. Illustrative Diagram

When: Building intuition. "How does X actually work?" Layout: Freeform — follows the subject's natural geometry. Rules:

Shapes can be freeform (paths, ellipses, polygons), not just rects.
Color encodes intensity, not category (warm = active, cool = dormant).
Overlap shapes for depth, but never let strokes cross text.
Labels go in margins with leader lines pointing to the relevant part.

Critical Checks Before Finalizing

ViewBox height: Find your lowest element (max y + height). Set H = that + 40px.
No content past x=640 or below y=(H-40).
Text fits in boxes: (char_count x 8) + 48 < rect_width for 14px text.
No arrows through boxes: Trace every line's path — if it crosses a rect, reroute.
All <path> connectors have fill="none".
All text has appropriate fill color — never rely on inheritance (SVG defaults to black).
Colors work in dark mode: If using hardcoded colors, provide both light and dark variants. If using CSS variables, you're fine.

Multi-Diagram Approach

For complex topics, use multiple smaller SVGs instead of one dense one:

Each SVG should have 3-5 nodes max.
Write explanatory text between diagrams.
First diagram = overview, subsequent = zoom into subsections.
Never promise diagrams you don't deliver.

Example: Simple 3-Step Flow

svg

<svg width="100%" viewBox="0 0 680 288" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
            markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </marker>
  </defs>

  <!-- Step 1 -->
  <rect x="230" y="20" width="220" height="56" rx="8"
        fill="#E1F5EE" stroke="#0F6E56" stroke-width="0.5"/>
  <text x="340" y="38" text-anchor="middle" dominant-baseline="central"
        font-size="14" font-weight="500" fill="#085041">User request</text>
  <text x="340" y="56" text-anchor="middle" dominant-baseline="central"
        font-size="12" fill="#0F6E56">HTTP POST /api/data</text>

  <!-- Arrow 1->2 -->
  <line x1="340" y1="76" x2="340" y2="100" stroke="#534AB7"
        stroke-width="1.5" marker-end="url(#arrow)"/>

  <!-- Step 2 -->
  <rect x="230" y="106" width="220" height="56" rx="8"
        fill="#EEEDFE" stroke="#534AB7" stroke-width="0.5"/>
  <text x="340" y="124" text-anchor="middle" dominant-baseline="central"
        font-size="14" font-weight="500" fill="#3C3489">Server processing</text>
  <text x="340" y="142" text-anchor="middle" dominant-baseline="central"
        font-size="12" fill="#534AB7">Validate and transform</text>

  <!-- Arrow 2->3 -->
  <line x1="340" y1="162" x2="340" y2="186" stroke="#854F0B"
        stroke-width="1.5" marker-end="url(#arrow)"/>

  <!-- Step 3 -->
  <rect x="230" y="192" width="220" height="56" rx="8"
        fill="#FAEEDA" stroke="#854F0B" stroke-width="0.5"/>
  <text x="340" y="210" text-anchor="middle" dominant-baseline="central"
        font-size="14" font-weight="500" fill="#633806">Database write</text>
  <text x="340" y="228" text-anchor="middle" dominant-baseline="central"
        font-size="12" fill="#854F0B">INSERT into table</text>
</svg>

Tips for Great Diagrams

Less is more: A clean 4-node diagram teaches better than a cramped 12-node one.
Color = meaning: Warm colors for active/hot/important, cool for passive/cold/secondary, gray for structural.
Streaming effect: Since SVGs render top-to-bottom as tokens arrive, structure your elements top-down for a natural build-up animation.
Annotations on the side: Put explanatory labels in the right margin (x > 560) with leader lines pointing to the relevant element.
Consistent heights: All boxes of the same type should be the same height.
Whitespace is your friend: Don't fill every pixel. Breathing room makes diagrams readable.

Task and accessibility checks

Use a diagram when it improves understanding; plain text and native components are also valid answers. No mandatory planning or narration sequence is required. Use headings and concise explanations inside multi-section answers when useful. Provide an SVG title/description or adjacent textual equivalent. Keep text readable at narrow widths; simplify or reflow dense diagrams instead of shrinking labels. Do not invent data. Label illustrative quantities and show units and sources. Use keyboard-operable HTML controls for interactions, and honor reduced motion.

Files

Just SKILL.md in apps/agent/skills/svg-diagrams of CopilotKit/OpenGenerativeUI.

Open the folder on GitHubat commit f6e4388

Compare with similar skills

SVG Diagrams next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

SVG Diagrams compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
SVG Diagrams this skillCopilotKit/OpenGenerativeUI	2.1k	—	~3k	Automated safety check: Pass	MIT	yesterday
CodeScope Codebase Graph AnalysisQwenLM/qwen-code	28k	1 repos	~9.3k	Automated safety check: Pass	Apache-2.0	today
Code To Chartrongxinzy/RongxinAI	154	—	~596	Automated safety check: Pass	MIT	yesterday
Code Flow Visualizerwentorai/research-plugins	298	1 repos	~1.9k	Automated safety check: Pass	MIT	3 mo ago
Code Review ChecklistshareAI-lab/learn-claude-code	78k	4 repos	~1.1k	Automated safety check: Pass	MIT	12 days ago
Install Anti-Slop Oxlint Rulesdmmulroy/anti-slop	5.4k	—	~2.2k	Automated safety check: Pass	MIT	1 mo ago

Similar skills

CodeScope Codebase Graph Analysis
QwenLM/qwen-code
Answers questions about code structure, history, bugs and PR risk using a CodeScope knowledge graph and semantic index built from the repository.
28k GitHub starsUsed in 1 repo~9.3k tokens
DevelopmentAuto-check passed
Code To Chart
rongxinzy/RongxinAI
解析代码仓库的 import/依赖关系，自动生成架构图、流程图和组织架构图，输出 Mermaid 文本或 SVG 图片。支持 Python、JavaScript、TypeScript、Go 和 Java 项目。当用户需要可视化代码结构、分析模块依赖、生成架构文档，或提及“代码架构图”、“依赖关系图”、“流程图”、“组织架构图”、“Mermaid 图”等关键词时触发。
154 GitHub stars~596 tokensUpdated yesterday
DevelopmentAuto-check passed
Code Flow Visualizer
wentorai/research-plugins
Convert Python, JavaScript, and TypeScript functions into Mermaid flowcharts
298 GitHub starsUsed in 1 repo~1.9k tokens
DevelopmentAuto-check passed
Code Review Checklist
shareAI-lab/learn-claude-code
Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.
78k GitHub starsUsed in 4 repos~1.1k tokens
DevelopmentAuto-check passed
Install Anti-Slop Oxlint Rules
dmmulroy/anti-slop
Installs, updates or migrates the vendored anti-slop Oxlint plugin in a repository, keeping local rule changes and the plugin's license and provenance files.
5.4k GitHub stars~2.2k tokensUpdated 1 mo ago
DevelopmentAuto-check passed
Generate Release Notes
teambit/bit
Generate comprehensive release notes for Bit from git commits and pull requests.
18k GitHub stars~2.2k tokensUpdated today
DevelopmentAuto-check passed

Questions about SVG Diagrams

What does SVG Diagrams do?

Generating rich inline SVG diagrams to visually explain systems, processes, architectures, and abstract concepts. SVG Diagrams is an agent skill from CopilotKit/OpenGenerativeUI. Generating rich inline SVG diagrams to visually explain systems, processes, architectures, and abstract concepts.

When should I use SVG Diagrams?

SVG Diagrams fits situations like: tasks that involve Diagrams.

How do I install SVG Diagrams in Claude Code?

Run `npx skills add CopilotKit/OpenGenerativeUI --skill svg-diagrams -a claude-code`. Or copy the skill folder (apps/agent/skills/svg-diagrams in CopilotKit/OpenGenerativeUI) into .claude/skills/svg-diagrams in your project. Claude Code loads it when a task matches its description.

How do I install SVG Diagrams in Codex?

Run `npx skills add CopilotKit/OpenGenerativeUI --skill svg-diagrams -a codex`. Or copy the skill folder (apps/agent/skills/svg-diagrams in CopilotKit/OpenGenerativeUI) into .agents/skills/svg-diagrams in your project. Codex loads it when a task matches its description.

Can I use SVG Diagrams in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add CopilotKit/OpenGenerativeUI --skill svg-diagrams -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/svg-diagrams, .gemini/skills/svg-diagrams, .github/skills/svg-diagrams and .opencode/skills/svg-diagrams in your project.

What does SVG Diagrams need to run?

SKILL.md names no scripts, command-line tools or credentials: SVG Diagrams is instructions for the agent only.

Does SVG Diagrams access the network?

SKILL.md names 1 domain. In commands or code: w3.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is SVG Diagrams safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does SVG Diagrams use?

SVG Diagrams is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does SVG Diagrams use?

About 3k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to SVG Diagrams?

Skills that share tags, products or a category with SVG Diagrams: CodeScope Codebase Graph Analysis (QwenLM/qwen-code, 28k stars), Code To Chart (rongxinzy/RongxinAI, 154 stars), Code Flow Visualizer (wentorai/research-plugins, 298 stars) and Code Review Checklist (shareAI-lab/learn-claude-code, 78k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains SVG Diagrams?

CopilotKit (a GitHub organization) maintains it in CopilotKit/OpenGenerativeUI, which has 2,099 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 9, 2026.

Source: CopilotKit/OpenGenerativeUI on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install SVG Diagrams

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

SVG Diagram Generation Skill

Delivery

When to Use

SVG Setup

Core Design Rules

Typography

Text Width Estimation

Colors (Light/Dark Mode Safe)

Shapes & Layout

Component Patterns

Single-Line Node

Two-Line Node

Arrow Connector

Dashed Flow Indicator

Leader Line with Label (for annotations)

Large Container (for structural diagrams)

Diagram Types & When to Use Each

1. Flowchart

2. Structural Diagram

3. Illustrative Diagram

Critical Checks Before Finalizing

Multi-Diagram Approach

Example: Simple 3-Step Flow

Tips for Great Diagrams

Task and accessibility checks

Files

Compare with similar skills

Similar skills

More from CopilotKit/OpenGenerativeUI

Related

Questions about SVG Diagrams