SVG Diagram

SVG diagramming conventions blending a technical look with CJK-friendly typography. Use when creating flowcharts, architecture diagrams, and similar SVG figures. For one-shot generation, prefer invoking it from a subagent so the main context does not have to carry this skill plus the SVG XML; for multi-round tweaking, use it directly in the main context.

640 stars 44 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add bybit-exchange/svg-diagram --skill svg-diagram
Manual install
git clone --depth 1 https://github.com/bybit-exchange/svg-diagram.git /tmp/svg-diagram
mkdir -p ~/.claude/skills
cp -r /tmp/svg-diagram/. ~/.claude/skills/svg-diagram

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# SVG Diagramming Conventions

## Output location and referencing

> Diagrams go in SVG, never ASCII art. That rule decides *whether* to draw; this skill covers *how*, starting with where the file lands.

- Put the file in an `assets/` directory next to the document (e.g. `docs/foo.md` → `docs/assets/foo-arch.svg`)
- Reference it from markdown with a relative path, `![title](assets/xxx.svg)`. Do not inline SVG XML.
- When data in the document changes, the corresponding SVG must be updated too. A figure that contradicts the prose beside it is worse than no figure

## Core principles

### Get it right on the first pass
The first SVG you generate must already satisfy every item in the verification checklist at the end of this document. Do not rely on user feedback to fix basic layout problems (spacing, padding, alignment, viewBox clipping). After generating, walk the checklist yourself and fix anything you find before showing the result.

### No overlapping elements
- Text must not sit on top of boxes or lines
- Lines must not cut through boxes (unless the line is an arrow terminating at that box)
- Keep 10–20px between text and lines
- **For spacing between sibling/adjacent boxes see the "Block spacing" section below** (single standard: ≥25px, 25–30px recommended)
- Put color-key legends outside the diagram body (bottom or side), never overlapping the content area
Read the full skill on GitHub

Details

Skill name
svg-diagram
Repository
bybit-exchange/svg-diagram
License
MIT
Repo updated
3 September 2026

FAQ

What does the SVG Diagram skill do?

SVG diagramming conventions blending a technical look with CJK-friendly typography. Use when creating flowcharts, architecture diagrams, and similar SVG figures. For one-shot generation, prefer invoking it from a subagent so the main context does not have to carry this skill plus the SVG XML; for multi-round tweaking, use it directly in the main context.

How do I install the SVG Diagram skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add bybit-exchange/svg-diagram --skill svg-diagram. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is SVG Diagram popular?

It lives in bybit-exchange/svg-diagram, which has 640 GitHub stars and 44 forks.

Related skills

Draw UI

524

oil-oil/draw-ui

设计 App、后台、游戏界面和完整网站落地页，生成 UI 设计稿；按需把设计稿或截图还原为 HTML/CSS、现有前端项目或微信小程序。用户要求页面设计、完整落地页、截图还原或小程序高保真时使用。不用于普通插画、海报、故事板、纯图片编辑或无设计任务的业务代码修改。

Frontend & Design77

Spine Animation

616

GenielabsOpenSource/spine-animation-ai

Create Spine 2D skeletal animations from pre-existing character assets (separated body-part PNGs, atlas spritesheet, or a full character image). Use this skill whenever the user wants to animate a 2D character, create Spine JSON from existing art assets, rig a character with bones, build walk/idle/run/attack animations, produce an interactive Spine Web Player preview, or generate Spine-compatible export files (.json + .atlas + .png). Also trigger when the user mentions "Spine animation", "2D rigging", "skeletal animation", "bone animation", "cutout animation", "animate this character", "make t

Frontend & Design87

Product Launch Motion

398

AbubakrChan/product-launch-motion

Use when asked to make a launch video, product film, motion design piece, UI motion reel, Dribbble-style UI animation or animated brand/logo sting — anything rendered to MP4 from HTML with a cursor, morphing UI, springs, beat-synced music and SFX. Carries Chan's full creative direction (one shape never cut, blur content swaps, springs, real data, logo slams, no creative limits) and the proven build/render pipeline (pure seek(t), closed-form springs, Playwright subframes, ffmpeg tmix, numpy beat grid).

Frontend & DesignIn 1 list55

Qiaomu Design

666

joeseesun/qiaomu-design

为页面、组件和产品界面提供设计诊断、四方向可视化预览、设计系统编译、实现与视觉 QA， 也创作与修改微信公众号封面、B站封面、YouTube 缩略图、小绿书配图和小红书封面，按平台检查裁切与可读性。 在用户要求从零设计、重设计、优化 UI/UX、审查界面、建立设计系统、参考某种风格， 或创作公众号封面、设计公号头图、修改微信文章封面、制作 B站封面、YouTube 封面、小绿书配图、小红书配图时使用； 不用于只改业务逻辑、纯文案润色或与界面无关的普通编码。默认由当前 Codex 直接执行， 只有用户在当前任务明确点名 K3 时才调用外部模型。

Frontend & Design50

D3 Viz

251

chrisvoncsefalvay/claude-d3js-skill

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

Frontend & DesignIn 3 lists25

Better Design

545

marvkr/better-design

Build, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating, redesigning, polishing, or reviewing an interface.

Frontend & DesignIn 1 list32

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.