Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
规划、生成、修改和检查数学建模与科研图表；包含143个完整源码配方、3套组合模板、统一配色和来源差异工具，以及Draw.io/TikZ、HTML/Mermaid和科学场景插图。
Install Vivid Figures Skill
$ npx skills add yjz211/vivid-figures-skill --skill vivid-figures-skill -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install yjz211/vivid-figures-skill vivid-figures-skill --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "vivid-figures-skill" agent skill from https://github.com/yjz211/vivid-figures-skill/tree/main into .claude/skills/vivid-figures-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vivid-figures-skill", 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.
$ npx skills add yjz211/vivid-figures-skill --skill vivid-figures-skill -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install yjz211/vivid-figures-skill vivid-figures-skill --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "vivid-figures-skill" agent skill from https://github.com/yjz211/vivid-figures-skill/tree/main into .agents/skills/vivid-figures-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vivid-figures-skill", 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.
$ npx skills add yjz211/vivid-figures-skill --skill vivid-figures-skill -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install yjz211/vivid-figures-skill vivid-figures-skill --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "vivid-figures-skill" agent skill from https://github.com/yjz211/vivid-figures-skill/tree/main into .cursor/skills/vivid-figures-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vivid-figures-skill", 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.
$ npx skills add yjz211/vivid-figures-skill --skill vivid-figures-skill -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install yjz211/vivid-figures-skill vivid-figures-skill --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "vivid-figures-skill" agent skill from https://github.com/yjz211/vivid-figures-skill/tree/main into .gemini/skills/vivid-figures-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vivid-figures-skill", 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.
$ gh skill install yjz211/vivid-figures-skill vivid-figures-skillInstalls 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).
$ npx skills add yjz211/vivid-figures-skill --skill vivid-figures-skill -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "vivid-figures-skill" agent skill from https://github.com/yjz211/vivid-figures-skill/tree/main into .github/skills/vivid-figures-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vivid-figures-skill", 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.
$ npx skills add yjz211/vivid-figures-skill --skill vivid-figures-skill -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install yjz211/vivid-figures-skill vivid-figures-skill --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "vivid-figures-skill" agent skill from https://github.com/yjz211/vivid-figures-skill/tree/main into .opencode/skills/vivid-figures-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vivid-figures-skill", 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
vivid-figures-skill- GitHub stars
- 457
- Token cost
- ~395 tokens
- SKILL.md length
- 47 words
- Files
- 1,501 (incl. scripts)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- Proprietary
At a glance
规划、生成、修改和检查数学建模与科研图表；包含143个完整源码配方、3套组合模板、统一配色和来源差异工具，以及Draw.io/TikZ、HTML/Mermaid和科学场景插图。
- Works in 3 steps: 选择：尚未指定模板时读取 数据与模板选择 和… → 适配：读取… → 检查：用来源底稿比较当前源码，再按 检查与修复…
- Tasks that involve Diagrams
- SKILL.md covers 数据图, 完整组合模板 and 其他任务
What it does
Vivid Figures Skill is an agent skill from yjz211/vivid-figures-skill. 规划、生成、修改和检查数学建模与科研图表；包含143个完整源码配方、3套组合模板、统一配色和来源差异工具，以及Draw.io/TikZ、HTML/Mermaid和科学场景插图。
Its SKILL.md is about 400 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1502 other files, including scripts (for example `CHANGELOG.md`, `README.md` and `catalog/README.md`).
It sits in Development, covering Diagrams. It works with Mermaid and draw.io. The repository describes itself as: 让 AI 用你的数据生成科研图表：108 个配方，鲜艳与稳重两种风格，多套配色，交付图片与源码。仅限个人非商业使用。
When your agent uses it
- Tasks that involve Diagrams
Example prompts
- “/vivid-figures-skill”
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- 选择：尚未指定模板时读取 数据与模板选择 和 设计目标，按数据与目的检索卡片、查看候选实图。用户指定模板、修图或换色时沿用选择，直接进入适配。
- 适配：读取 源码底稿与保真，用工具将选定的完整源码写成工作脚本，在这个实际文件上修改。读取所选卡片及预览、执行环境、数据图执行、配色 和 尺寸预计算。只加载本次需要的模板和专题。
- 检查：用来源底稿比较当前源码，再按 检查与修复 打开实际图件，核对模板特点、数据口径与可读性。差异提示不是视觉通过结论，必要适配不必为消除提示改回演示数据。
What it can do on your machine
Read from SKILL.md and the folder at commit c043f05. 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
Ships 1 file in scripts/, which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Vivid Figures Skill loads about 395 tokens when it runs. Until then it costs about 27 tokens; SKILL.md has 47 words of instructions outside code blocks.
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); the scripts in this folder are not scanned.
SKILL.md
Its licence (Proprietary) doesn't allow us to republish the file, so here is its outline and opening line. It has 47 words (~395 tokens).
- name
- vivid-figures-skill
Files
SKILL.md and 1,500 other files (scripts) in the repository root of yjz211/vivid-figures-skill.
- SKILL.md
- .gitattributes
- .gitignore
- CHANGELOG.md
- LICENSE
- README.md
- catalog/README.md
- catalog/cards.json
- catalog/cards/academic.ablation.md
- catalog/cards/academic.attention_heatmap.md
- catalog/cards/academic.benchmark_table.md
- catalog/cards/academic.confusion_matrix.md
- catalog/cards/academic.error_analysis.md
- catalog/cards/academic.feature_importance.md
- catalog/cards/academic.hyperparameter_sensitivity.md
- catalog/cards/academic.latent_interpolation.md
- catalog/cards/academic.learning_rate.md
- catalog/cards/academic.radar.md
- catalog/cards/academic.training_curves.md
- … and 1,482 more
Open the folder on GitHubat commit c043f05
Compare with similar skills
Vivid Figures Skill 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Vivid Figures Skill this skillyjz211/vivid-figures-skill | 457 | — | ~395 | Automated safety check: Pass | Proprietary | |
| Diagram Designcathrynlavery/diagram-design | 49k | 1 repos | ~7.6k | Automated safety check: Pass | MIT | |
| Draw.io Diagram StudioAgents365-ai/drawio-skill | 10k | — | ~2.4k | Automated safety check: Notes | MIT | |
| Drawio Skillyuanchen-home/cumcm-step-review | 319 | — | ~11k | Automated safety check: Pass | MIT | |
| Drawiobahayonghang/drawio-skills | 287 | — | ~4.1k | Automated safety check: Notes | MIT | |
| Diagram Designkdlbs/kandev | 917 | 1 repos | ~8k | Automated safety check: Pass | MIT |
Similar skills
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
Drawio Skill
yuanchen-home/cumcm-step-review
A skill your agent uses when the user requests diagrams, flowcharts, architecture diagrams, ER diagrams, UML / sequence / class diagrams, SysML / MBSE diagrams (block definition, internal block…
Drawio
bahayonghang/drawio-skills
Create, edit, replicate, import, and export draw.io diagrams with an offline YAML-first workflow: architecture, network topologies, flowcharts, UML/ER, org charts, Mermaid/CSV conversion, existing…
Diagram Design
kdlbs/kandev
Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel…
draw.io Architecture Diagramming
HoangNguyen0403/agent-skills-standard
Draws architecture diagrams as editable draw.io files from a JSON spec, with a fixed house style, one C4 level per diagram and evidence-tagged shapes.
Related
Categories
Questions about Vivid Figures Skill
What does Vivid Figures Skill do?
规划、生成、修改和检查数学建模与科研图表；包含143个完整源码配方、3套组合模板、统一配色和来源差异工具，以及Draw.io/TikZ、HTML/Mermaid和科学场景插图。. Vivid Figures Skill is an agent skill from yjz211/vivid-figures-skill.
When should I use Vivid Figures Skill?
Vivid Figures Skill fits situations like: tasks that involve Diagrams.
How do I install Vivid Figures Skill in Claude Code?
Run `npx skills add yjz211/vivid-figures-skill --skill vivid-figures-skill -a claude-code`. Or copy the skill folder (the yjz211/vivid-figures-skill repository) into .claude/skills/vivid-figures-skill in your project. Claude Code loads it when a task matches its description.
How do I install Vivid Figures Skill in Codex?
Run `npx skills add yjz211/vivid-figures-skill --skill vivid-figures-skill -a codex`. Or copy the skill folder (the yjz211/vivid-figures-skill repository) into .agents/skills/vivid-figures-skill in your project. Codex loads it when a task matches its description.
Can I use Vivid Figures Skill 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 yjz211/vivid-figures-skill --skill vivid-figures-skill -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vivid-figures-skill, .gemini/skills/vivid-figures-skill, .github/skills/vivid-figures-skill and .opencode/skills/vivid-figures-skill in your project.
What does Vivid Figures Skill need to run?
SKILL.md names no scripts, command-line tools or credentials: Vivid Figures Skill is instructions for the agent only.
Does Vivid Figures Skill access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Vivid Figures Skill 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Vivid Figures Skill use?
Vivid Figures Skill carries a proprietary licence (from the LICENSE file in the skill folder). It is published on GitHub, but it is not open source: read the licence file before using or sharing it.
How many tokens does Vivid Figures Skill use?
About 395 tokens (SKILL.md is roughly 1.6k 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 Vivid Figures Skill?
Skills that share tags, products or a category with Vivid Figures Skill: Diagram Design (cathrynlavery/diagram-design, 49k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars), Drawio Skill (yuanchen-home/cumcm-step-review, 319 stars) and Drawio (bahayonghang/drawio-skills, 287 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Vivid Figures Skill?
yjz211 (a GitHub user) maintains it in yjz211/vivid-figures-skill, which has 457 GitHub stars. The repository was last updated on September 16, 2026.
Source: yjz211/vivid-figures-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.