Diagram Generator

Diagram Generator is a Frontend skill for Claude Code, published by guanyang in open-agent-hub.

952 stars164 forkson guanyang/open-agent-hubAdded 2026/08/21Repository updated 2026/08/21

agentsai-agentsai-skillsanthropic-skillsclaude-codecli-toolcontext-engineeringfull-stackplanningskillssuperpowersui-ux-designworkflows

Install in seconds

Install Diagram Generator

Copy Diagram Generator into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/guanyang/open-agent-hub/tree/main/skills/baoyu-diagram ~/.claude/skills/baoyu-diagram

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/guanyang/open-agent-hub.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/baoyu-diagram/SKILL.md in guanyang/open-agent-hub
Installs to: ~/.claude/skills/baoyu-diagram
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 567 skills

What Diagram Generator does

Diagram Generator creates standalone dark-themed SVG diagrams for architecture, flowcharts, sequences, timelines, mind maps, and other process or system visuals. Use it when you need to visualize structure, logic, relationships, or a process from text or uploaded content.

Diagram Generator is cataloged under Frontend on DirSkills. Diagram Generator comes from a repository tagged agents, ai-agents, ai-skills, anthropic-skills and claude-code.

Documentation

README

Excerpt

Diagram Generator

Create professional SVG diagrams across multiple diagram types. All output is a single self-contained .svg file with embedded styles and fonts.

Supported Diagram Types

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Diagram Generator

What else does guanyang publish alongside Diagram Generator?
Diagram Generator is one of 25 skills that DirSkills catalogs from guanyang/open-agent-hub, the repository it ships in. Its siblings there include Advanced Evaluation, Algorithmic Art and Article Illustrator. Each one is a separate skill with its own page in this directory, installs the same way Diagram Generator does, and is maintained by guanyang in that same repository. The rest of the collection is listed on the guanyang/open-agent-hub page.
How does Diagram Generator compare to other Frontend skills?
Diagram Generator ranks #346 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Diagram Generator against them. Open each page to compare what they document and how they install.