Agent skill

Workflow Diagram Skill

A skill your agent uses when 用户想用一句话生成流程图、工作流图解、开发流程图、AI 流程图或任何步骤型图解，支持多风格输出（flat icon / 暖白手账风 / dark / cute），并提供现成模板一键出图。

Apache-2.0Auto-check passed

Install Workflow Diagram Skill

skills CLI

$ npx skills add jiushiwon/wg-skills --skill workflow-diagram-skill -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install jiushiwon/wg-skills workflow-diagram-skill --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/jiushiwon/wg-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/others/workflow-diagram-skill .claude/skills/workflow-diagram-skill && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "workflow-diagram-skill" agent skill from https://github.com/jiushiwon/wg-skills/tree/main/others/workflow-diagram-skill into .claude/skills/workflow-diagram-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "workflow-diagram-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.

$skill-installer

$skill-installer install https://github.com/jiushiwon/wg-skills/tree/main/others/workflow-diagram-skill

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add jiushiwon/wg-skills --skill workflow-diagram-skill -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install jiushiwon/wg-skills workflow-diagram-skill --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/jiushiwon/wg-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/others/workflow-diagram-skill .agents/skills/workflow-diagram-skill && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "workflow-diagram-skill" agent skill from https://github.com/jiushiwon/wg-skills/tree/main/others/workflow-diagram-skill into .agents/skills/workflow-diagram-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "workflow-diagram-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.

skills CLI

$ npx skills add jiushiwon/wg-skills --skill workflow-diagram-skill -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install jiushiwon/wg-skills workflow-diagram-skill --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/jiushiwon/wg-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/others/workflow-diagram-skill .cursor/skills/workflow-diagram-skill && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "workflow-diagram-skill" agent skill from https://github.com/jiushiwon/wg-skills/tree/main/others/workflow-diagram-skill into .cursor/skills/workflow-diagram-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "workflow-diagram-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.

gemini skills install

$ gemini skills install https://github.com/jiushiwon/wg-skills.git --path others/workflow-diagram-skill

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add jiushiwon/wg-skills --skill workflow-diagram-skill -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install jiushiwon/wg-skills workflow-diagram-skill --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/jiushiwon/wg-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/others/workflow-diagram-skill .gemini/skills/workflow-diagram-skill && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "workflow-diagram-skill" agent skill from https://github.com/jiushiwon/wg-skills/tree/main/others/workflow-diagram-skill into .gemini/skills/workflow-diagram-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "workflow-diagram-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.

GitHub CLI

$ gh skill install jiushiwon/wg-skills workflow-diagram-skill

Installs 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).

skills CLI

$ npx skills add jiushiwon/wg-skills --skill workflow-diagram-skill -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/jiushiwon/wg-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/others/workflow-diagram-skill .github/skills/workflow-diagram-skill && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "workflow-diagram-skill" agent skill from https://github.com/jiushiwon/wg-skills/tree/main/others/workflow-diagram-skill into .github/skills/workflow-diagram-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "workflow-diagram-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.

skills CLI

$ npx skills add jiushiwon/wg-skills --skill workflow-diagram-skill -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install jiushiwon/wg-skills workflow-diagram-skill --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/jiushiwon/wg-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/others/workflow-diagram-skill .opencode/skills/workflow-diagram-skill && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "workflow-diagram-skill" agent skill from https://github.com/jiushiwon/wg-skills/tree/main/others/workflow-diagram-skill into .opencode/skills/workflow-diagram-skill/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "workflow-diagram-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: workflow-diagram-skill
GitHub stars: 114
Token cost: ~1.2k tokens
SKILL.md length: 367 words
Files: 11 (incl. scripts, references)
Skills in repo: 12
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Works in 6 steps: 提取用户话题关键词。 → 在 references/templates.md 中按 id / name /… → 命中模板后读取其 nodes 和 edges。 → …
用户想用一句话生成流程图、工作流图解、开发流程图、AI 流程图或任何步骤型图解，支持多风格输出（flat icon / 暖白手账风 / dark / cute），并提供现成模板一键出图
SKILL.md covers 适用场景, 触发词, 🎨 可选风格（4 种） and 📐 布局方式, plus 9 more sections
Runs Python scripts from its folder

What it does

Workflow Diagram Skill is an agent skill from jiushiwon/wg-skills. Use when 用户想用一句话生成流程图、工作流图解、开发流程图、AI 流程图或任何步骤型图解，支持多风格输出（flat icon / 暖白手账风 / dark / cute），并提供现成模板一键出图。

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 12 other files, including scripts and reference files (for example `README.md`, `references/icon-library.md` and `references/style-cute.md`).

The licence is Apache-2.0.

When your agent uses it

用户想用一句话生成流程图、工作流图解、开发流程图、AI 流程图或任何步骤型图解，支持多风格输出（flat icon / 暖白手账风 / dark / cute），并提供现成模板一键出图

Example prompts

“/workflow-diagram-skill”

Requirements

Python 3

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

提取用户话题关键词。
在 references/templates.md 中按 id / name / tags / category 模糊匹配。
命中模板后读取其 nodes 和 edges。
默认风格为 flat，用户可指定 sketchy / dark / cute。
调用 scripts/generate_diagram.py 生成 SVG，再调用 scripts/svg2png.py 渲染 PNG。
输出文件路径并展示 PNG。

What it can do on your machine

Read from SKILL.md and the folder at commit 3569fb8. 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 3 files in scripts/ (Python), 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

Workflow Diagram Skill loads about 1.2k tokens when it runs, and up to ~9.1k if it reads all its reference files. Until then it costs about 31 tokens; SKILL.md has 367 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~31
When it runs · the whole SKILL.md, loaded when a task matches: ~1.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~9.1k

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

The full file from jiushiwon/wg-skills at commit 3569fb8, republished under its Apache-2.0 licence (© jiushiwon). 367 words, ~1,181 tokens.

Download SKILL.mdSave it as .claude/skills/workflow-diagram-skill/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.

name: workflow-diagram-skill
description: Use when 用户想用一句话生成流程图、工作流图解、开发流程图、AI 流程图或任何步骤型图解，支持多风格输出（flat icon / 暖白手账风 / dark / cute），并提供现成模板一键出图。

workflow-diagram-skill - 一句话生成流程图

核心原则：用户不需要描述节点和箭头，只需要说「画个 XXX 流程图」，skill 自动匹配模板或理解语义生成 SVG + PNG。

适用场景

开发/AI 工作流：vibe coding、Claude Code / Codex 开发流程、AI 学习路径、LLM 原理图
通用流程：入职、毕业、程序员上班、会议组织
学术/医疗：博士生研究流程、医学报告大会流程
内容创作：短剧 AI 视频制作、小红书起号流程
自定义流程：用户提供步骤，skill 生成图解

触发词

类型	示例
现成模板	`画个 vibe coding 流程图`、`生成 Claude Code 开发流程图`、`短剧 AI 视频制作流程图`
通用流程	`画个入职流程图`、`毕业流程图`、`程序员上班流程图`
自定义步骤	`帮我画一个 XXX 的流程图，步骤是：A → B → C`
一句话生成	`画一个 AI Agent 学习流程，我要找工作`、`帮我画程序员成长路径`
风格切换	`用草图风格`、`换成 dark 风格`、`扁平风格`
风格切换	`用 cute 风格`、`可爱风格`、`插画风格`

🎨 可选风格（4 种）

直接说想要的风格即可切换：

风格	说明	适合
flat (默认)	clean、圆角、蓝色箭头	文档/PPT
sketchy	暖白手账风、铅笔灰边框	公众号/视频
dark	深色背景、高对比	技术博客/Github
cute	马卡龙配色、圆润胶囊	小红书/知识付费

📌 快速切换：说「换成 cute 风格」「用 dark 风格」即可

📐 布局方式

布局	说明	适合
vertical (默认)	上下分阶段	步骤多/有分组
horizontal	左右横向	步骤少/线性流程

📌 切换：说「横向布局」「改成左右」即可

〰️ 箭头样式

箭头	说明	适合
straight (默认)	直线箭头	简洁/正式
curved	曲线箭头	柔和/活泼

📌 切换：说「用曲线箭头」「改成曲线」即可

📋 全部内置模板（25 个）

AI/开发（6个）

vibe-coding · claude-code · codex · ai-learning · llm-internals · rag-flow

学习流程（4个）

english-learning · finance-learning · coding-learning · exam-cert

日常流程（6个）

fitness-flow · morning-routine · house-buying · travel-flow · healthy-life · side-hustle

工作流程（4个）

onboarding · programmer-daily · meeting-flow · product-launch

学术/医疗（3个）

phd-research · graduation · medical-conference

内容创作（2个）

short-drama-ai-video · xiaohongshu-start

📌 直接说：「画个 vibe coding 流程图」「生成英语学习流程」「画一个副业赚钱流程」

🤖 推荐的模型/平台组合

场景	推荐组合	说明
快速原型	Codex + Cursor	在线沙盒，即开即用
本地开发	Claude / Grok + VSCode	完全离线，数据不外出
深度定制	Claude + Windsurf	超长上下文，适合大型项目
国内白嫖	通义千问 / DeepSeek + VSCode	免费额度够用
全栈开发	Claude + Cursor	前端/后端/数据库一把梭

📌 画这类图：可以说「画个 Claude Code + Cursor 开发流程图」「画个 Codex 工作流」

🆕 自定义复杂流程

如果内置模板不满足需求，直接给步骤就能画。复制下面的格式修改：

画一个 [主题] 流程图，步骤是：
1. [步骤1]
2. [步骤2]
3. [步骤3]
4. [步骤4]
可选：换成 [sketchy/dark/cute] 风格

示例：

画一个 AI PPT 制作流程图，步骤是：
1. 主题确认
2. 大纲生成
3. 内容填充
4. AI 生图
5. 排版美化
6. 导出分享
用 cute 风格

📌 节点超过 8 个会自动分组，不用担心太乱

工作模式

A. 现成模板（一键出图）

提取用户话题关键词。
在 references/templates.md 中按 id / name / tags / category 模糊匹配。
命中模板后读取其 nodes 和 edges。
默认风格为 flat，用户可指定 sketchy / dark / cute。
调用 scripts/generate_diagram.py 生成 SVG，再调用 scripts/svg2png.py 渲染 PNG。
输出文件路径并展示 PNG。

Show full SKILL.md (149 more words)Show less

B. 自定义流程（用户给步骤）

从用户输入中提取流程名称和步骤列表。
如果步骤 ≤8 个，直接按顺序垂直排列；如果步骤多，自动分组或换横向布局。
用户没说风格时默认 flat。
同样调用脚本生成 SVG + PNG。

C. 一句话智能生成（用户只给主题）

当用户只给一个模糊主题（如「学习 AI Agent」「如何应聘大厂」）时：

理解意图：分析用户的描述，提取核心需求
生成步骤：根据领域知识，自动推断合理的步骤结构
调用脚本：用生成的节点数据调用 generate_diagram.py

示例处理：

用户说「帮我画一个学习 AI Agent 和大模型的流程，要精细一点，要去应聘当牛马」
Skill 自动分析：
- 主题：AI Agent + 大模型学习路径
- 受众：求职者（想去大厂）
- 自动生成：基础概念 → 机器学习 → 深度学习 → LLM → Agent 开发 → 项目实战 → 面试准备 → 大厂应聘

自动选择合适风格（默认 flat）
生成 SVG + PNG

📌 怎么说都行：

「画个 AI 学习流程，我要找工作」
「帮我画一个程序员成长路径」
「生成一个产品从 0 到 1 的流程图」
「画一个去大城市闯荡的流程」

C. 风格切换

flat： clean、圆角、实色图标、蓝色主流程箭头，适合文档/PPT
sketchy：暖白手账风、铅笔灰边框、手写字体，适合公众号/视频
dark：深色背景、高对比，适合技术博客/Github
cute：马卡龙配色、圆润胶囊节点、可爱描边图标，适合公众号/小红书/知识付费

输出规格

SVG：矢量源文件，可二次编辑
PNG：2x 分辨率，直接可用
默认保存到当前工作目录：{topic}-diagram.svg 和 {topic}-diagram.png
节点标题 ≤6 字，副标题 ≤14 字，保证可读性

硬性规则

不要问用户「节点怎么连」，模板优先、语义推断兜底。
风格只在用户明确指定或上下文已提及时切换，默认 flat。
节点超过 8 个时必须分组（用虚线容器），禁止一条长流程塞到底。
必须同时输出 SVG 和 PNG，不能只输出一个。
生成后必须展示 PNG 并给出文件路径。

模板索引

现成模板定义在 references/templates.md，分类如下：

AI/开发：vibe-coding、claude-code、codex、ai-learning、llm-internals、rag-flow
通用职场：onboarding、programmer-daily、meeting-flow
学术医疗：phd-research、graduation、medical-conference
内容创作：short-drama-ai-video、xiaohongshu-start

第三方依赖

Python 3.10+
puppeteer-core（用于 PNG 渲染， skill 内 scripts/svg2png.py 已包含安装检测）
Microsoft Edge / Google Chrome（用于 headless 截图）

红线

不生成包含敏感信息、歧视、违法内容的图解。
不替代用户做专业决策（如医疗诊断流程仅作示意）。
不承诺图形美观度 100% 符合用户预期，但提供 SVG 源文件便于二次调整。

常见问题

Q：用户说「画个图」但没给主题怎么办？
A：列出 3-5 个热门模板让用户选，例如：vibe coding、入职流程、Claude Code 开发流程。

Q：没有匹配模板怎么办？
A：按用户描述抽取步骤生成通用流程图；如果描述不清，反问步骤。

Q：风格参数怎么传？
A：scripts/generate_diagram.py --style flat|sketchy|dark|cute --template vibe-coding -o output.svg

Files

SKILL.md and 10 other files (scripts, references) in others/workflow-diagram-skill of jiushiwon/wg-skills.

SKILL.md
README.md
references/icon-library.md
references/style-cute.md
references/style-dark.md
references/style-flat-icon.md
references/style-sketchy.md
references/templates.md
scripts/generate_diagram.py
scripts/init_skill_assets.py
scripts/svg2png.py

Open the folder on GitHubat commit 3569fb8

Compare with similar skills

Workflow Diagram 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.

Workflow Diagram Skill compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Workflow Diagram Skill this skilljiushiwon/wg-skills	114	—	~1.2k	Automated safety check: Pass	Apache-2.0	3 days ago
Diagram Makergarrytan/gstack	136k	—	~4.1k	Automated safety check: Notes	MIT	today
Diagram Makeropenclaw/openclaw	392k	2 repos	~589	Automated safety check: Pass	MIT	today
Docs Diagramsvercel/next.js	143k	—	~2.9k	Automated safety check: Pass	MIT	today
Diagram Generatorsickn33/agentic-awesome-skills	47k	1 repos	~2.3k	Automated safety check: Pass	MIT	yesterday
Diagram Designcathrynlavery/diagram-design	48k	1 repos	~7.6k	Automated safety check: Pass	MIT	today

Similar skills

Diagram Maker
garrytan/gstack
Turns an English description or Mermaid source into a diagram set: the source, an editable .excalidraw file and rendered SVG and PNG images.
136k GitHub stars~4.1k tokensUpdated today
DevelopmentAuto-check: notes
Diagram Maker
openclaw/openclaw
Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.
392k GitHub starsUsed in 2 repos~589 tokens
DevelopmentAuto-check passed
Docs Diagrams
vercel/next.js
Official
Draw diagrams for the Next.js docs in the style of the ones already published there: the light/dark PNGs an mdx references with <Image srcLight="/docs/light/<name.png" srcDark="/docs/dark/<name.png".
143k GitHub stars~2.9k tokensUpdated today
DevelopmentAuto-check passed
Diagram Generator
sickn33/agentic-awesome-skills
Generate, refine, validate, and render diagrams from natural language, notes, code, schemas, or existing diagram sources: flowcharts, swimlanes, attack-path graphs, data-flow diagrams, architecture…
47k GitHub starsUsed in 1 repo~2.3k tokens
DevelopmentAuto-check passed
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.
48k GitHub starsUsed in 1 repo~7.6k tokens
DevelopmentAuto-check passed
Docs Diagrams
mastra-ai/mastra
Convert existing docs diagram images to Mermaid, and author new Mermaid diagrams for Mastra docs.
29k GitHub stars~998 tokensUpdated today
DevelopmentAuto-check passed

More from jiushiwon/wg-skills

All 12 skills in this repo

Frontend UI Foundry
jiushiwon/wg-skills
A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…
114 GitHub stars~1.4k tokensUpdated 3 days ago
Auto-check passed
Uniapp App Generate Skill
jiushiwon/wg-skills
This skill should be used when the user wants to create a standardized uni-app project for WeChat mini-program, H5, and App from scratch.
114 GitHub stars~5k tokensUpdated 3 days ago
Auto-check: notes
Fastapi Init Skill
jiushiwon/wg-skills
FastAPI 项目一键初始化技能。面向零基础小白，提供环境探测、自动安装、完整 Web 骨架生成、SSE 流式框架、JWT 鉴权、统一响应封装、文件上传接口、一键启动/重启脚本、Swagger 文档，内置 MySQL（默认）/ PostgreSQL / MongoDB 数据库选择。用户只需说"帮我搭一个 FastAPI 项目"即可一条命令完成从零到跑的完整链路。触发词："FastAPI…
114 GitHub stars~1.8k tokensUpdated 3 days ago
Auto-check: notes
Ffmpeg Skill
jiushiwon/wg-skills
FFmpeg 多媒体处理技能 — 将自然语言描述转为正确的 ffmpeg 命令，覆盖视频剪辑、转码、水印、合成、提取、生成等操作。内置一键安装脚本（Windows/Mac/Linux）。触发词：ffmpeg、视频剪辑、视频裁剪、视频转码、视频压缩、去水印、加水印、视频拼接、视频合成、提取音频、视频转…
114 GitHub stars~1.4k tokensUpdated 3 days ago
Auto-check passed
Frontend Request Skill
jiushiwon/wg-skills
A skill your agent uses when designing or reviewing the request layer of a frontend project (web / uni-app / mini-program), including request.ts wrappers, interceptors, deduplication, mocks, error…
114 GitHub stars~3.6k tokensUpdated 3 days ago
Auto-check passed
React Generate Skill
jiushiwon/wg-skills
This skill should be used when the user wants to create a standardized React 18 + TypeScript + Vite + Zustand project from scratch.
114 GitHub stars~2.8k tokensUpdated 3 days ago
Auto-check passed

Questions about Workflow Diagram Skill

What does Workflow Diagram Skill do?

A skill your agent uses when 用户想用一句话生成流程图、工作流图解、开发流程图、AI 流程图或任何步骤型图解，支持多风格输出（flat icon / 暖白手账风 / dark / cute），并提供现成模板一键出图。. Workflow Diagram Skill is an agent skill from jiushiwon/wg-skills.

When should I use Workflow Diagram Skill?

Workflow Diagram Skill fits situations like: 用户想用一句话生成流程图、工作流图解、开发流程图、AI 流程图或任何步骤型图解，支持多风格输出（flat icon / 暖白手账风 / dark / cute），并提供现成模板一键出图.

How do I install Workflow Diagram Skill in Claude Code?

Run `npx skills add jiushiwon/wg-skills --skill workflow-diagram-skill -a claude-code`. Or copy the skill folder (others/workflow-diagram-skill in jiushiwon/wg-skills) into .claude/skills/workflow-diagram-skill in your project. Claude Code loads it when a task matches its description.

How do I install Workflow Diagram Skill in Codex?

Run `npx skills add jiushiwon/wg-skills --skill workflow-diagram-skill -a codex`. Or copy the skill folder (others/workflow-diagram-skill in jiushiwon/wg-skills) into .agents/skills/workflow-diagram-skill in your project. Codex loads it when a task matches its description.

Can I use Workflow Diagram 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 jiushiwon/wg-skills --skill workflow-diagram-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/workflow-diagram-skill, .gemini/skills/workflow-diagram-skill, .github/skills/workflow-diagram-skill and .opencode/skills/workflow-diagram-skill in your project.

What does Workflow Diagram Skill need to run?

Going by SKILL.md and its folder, Workflow Diagram Skill needs Python for the scripts in its folder. Our summary lists: Python 3.

Does Workflow Diagram 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 Workflow Diagram 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 Workflow Diagram Skill use?

Workflow Diagram Skill is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Workflow Diagram Skill use?

About 1.2k tokens (SKILL.md is roughly 4.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 7.9k tokens, read only when the agent opens those files.

What are the alternatives to Workflow Diagram Skill?

Skills that share tags, products or a category with Workflow Diagram Skill: Diagram Maker (garrytan/gstack, 136k stars), Diagram Maker (openclaw/openclaw, 392k stars), Docs Diagrams (vercel/next.js, 143k stars) and Diagram Generator (sickn33/agentic-awesome-skills, 47k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Workflow Diagram Skill?

jiushiwon (a GitHub user) maintains it in jiushiwon/wg-skills, which has 114 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on October 7, 2026.

Source: jiushiwon/wg-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Workflow Diagram Skill

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

workflow-diagram-skill - 一句话生成流程图

适用场景

触发词

🎨 可选风格（4 种）

📐 布局方式

〰️ 箭头样式

📋 全部内置模板（25 个）

AI/开发（6个）

学习流程（4个）

日常流程（6个）

工作流程（4个）

学术/医疗（3个）

内容创作（2个）

🤖 推荐的模型/平台组合

🆕 自定义复杂流程

工作模式

A. 现成模板（一键出图）

B. 自定义流程（用户给步骤）

C. 一句话智能生成（用户只给主题）

C. 风格切换

输出规格

硬性规则

模板索引

第三方依赖

红线

常见问题

Files

Compare with similar skills

Similar skills

More from jiushiwon/wg-skills

Questions about Workflow Diagram Skill