svg-diagram: Agent skill that draws architecture, flowchart, sequence, data-flow and lifecycle diagrams as hand-placed SVG

by bybit-exchange · Claude Skill · ★ 100

Last updated: · Indexed by AgentSkillsHub · Auto-synced every 8h

How to install svg-diagram

npx skills add bybit-exchange/svg-diagram -g

Taken from the project's README on GitHub. Check the security audit before running it.

Security audit verdict: SAFE · quality 68/100

None of the 42 rules matched — no credential harvesting, no data exfiltration, no curl-pipe-shell installer. Scanned against 42 published rules built on the SlowMist agent-security taxonomy, refreshed every 8 hours. Full audit →

The quality score combines nine heuristic checks of the repo and its README: completeness, clarity, specificity, examples, structure, agent readiness, step-by-step content, instruction quality and security notes. It rates how well the project explains itself to an agent, not the code.

agent-skillsarchitecture-diagramcjkclaude-codeclaude-skillcodexcoding-agentsdata-flow-diagramdeveloper-toolsdiagrams

Quick Facts

Stars100
Forks4
LanguageJavaScript
CategoryClaude Skill
LicenseMIT
Quality Score68/100
Last Updated2026-09-03
Created2026-08-13
Platformsaws, claude-code, codex, node
Est. Tokens~15k

About svg-diagram

svg-diagram A house style for hand-written SVG diagrams your agent can follow — the layout arithmetic, the colour system, and a zero-dependency linter that proves it did. Install Paste this to your coding agent: Or run it yourself: The CLI detects which agents you have installed and writes each one's path. Drop to install into the current project instead. Every path is named from the skill's front

Compatible Skills

These tools work well together with svg-diagram for enhanced workflows:

  • Pretty-mermaid-skills — semantic(0.49)+complementary+rare_topics+same_lang+shared_platform (66%)
  • skillstead — semantic(0.18)+complementary+rare_topics+same_lang+similar_pop+shared_platform (65%)
  • pr-lens — semantic(0.73)+rare_topics+similar_pop+shared_platform (65%)

svg-diagram alternative? Top 6 similar tools

Looking for a svg-diagram alternative? If you're comparing svg-diagram with other claude skill tools, these 6 projects are the closest alternatives on Agent Skills Hub — ranked by topic overlap, star count, and community traction.

  • vibex by Raja0sama · ⭐ 390

    Architecture diagrams and checkable docs from your codebase — ERD, C4, API and lifecycle — generated from Pris

  • qgraphflow by supermax92 · ⭐ 111

    Generate evidence-grounded interactive software diagrams with offline HTML, SVG and PNG export.

  • skillstead by kyungseo · ⭐ 84

    Practical, portable skills for agentic coding workflows — clearer diagrams, checked claims, safer GitHub relea

  • aiwg by jmagly · ⭐ 225

    Reusable project context and specialist workflows for the AI tools you already use. Agents, skills, rules and

  • mermaid-skill by Agents365-ai · ⭐ 210

    Agent skill: generate Mermaid diagrams (.mmd), validate via Kroki-first loop, export PNG/SVG/PDF via mmdc or K

  • dashmotion by csthink · ⭐ 180

    Animated technical diagrams from plain English or Mermaid — a Claude skill, self-contained HTML/SVG.

More Claude Skill Tools

Explore other popular claude skill tools:

View all Claude Skill tools →

Popular JavaScript Agent Tools

How this security grade is produced

Grades come from a rule-based scan built on the SlowMist agent-security taxonomy: 42 published rules, covering credential harvesting, data exfiltration, curl | sh installers and more. It is a first-layer scan, not a manual audit — we say so rather than overstate it.

The scale of the problem is documented independently: Liu et al. (2026), in a study of 31,132 agent skills, report that 26.1% contain security vulnerabilities. Our own full-catalog census is published as a citable open dataset.

Sources & who's responsible:

View on GitHub → Browse Claude Skill tools