svg-diagram
From the author
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.
Install
npx skills add bybit-exchange/svg-diagram --skill svg-diagram -a claude-code
Installs to .claude/skills/svg-diagram/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
- Contains hidden text (invisible characters, long comments or encoded blobs)Medium
Why 76
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- baoyu-diagramJimLiu/baoyu-skillsCreate professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. Use this skill whenever the user asks for any kind of technical or conceptual diagram, visualization of a system, process flow, data flow, component relationship, network topology, decision tree, org chart, state machine, or any visual representation of structure/logic/process. Also trigger when the user says "画个图" "画一个架构图" "diagram" "flowchart" "sequence diagram" "draw me a ..." or uploads content and asks to visualize it. Output is always a standalone .svg file.Media★ 26.9K
- architecture-diagramHezaoHezao/poirotDark-themed SVG architecture/cloud/infra diagrams as HTML.Planning★ 254
- lit-diagram-drawerwjgoarxiv/litgravityDraw an architecture, workflow, data-model or timeline diagram as editable SVG, check it, and export PNG. Use when a picture explains faster than prose.Writing★ 166
- tldraw-skillAgents365-ai/365-skillsUse when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .tldr JSON files and exports to PNG/SVG locally using @kitschpatrol/tldraw-cli.Planning★ 90
- coco-diagramcoco-research/cocoUse for architecture, current-state, process, data-flow, medallion, or DP diagrams, including redrawing .drawio and Mermaid sources. Creates branded flowchart, sequence, ER, org, timeline, and chart visuals as standalone HTML/SVG/PNG.Planning★ 787
- visual-engineertranhieutt/software_development_departmentGenerates high-fidelity architecture diagrams, sequence flows, and component maps for SDD projects. Use when finalizing a design phase, documenting system architecture, or visualizing agentic workflows. Default style: Style 6 (Claude Official).Design★ 74
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in