workflow-diagram-skill

workflow-diagram-skill is a skill for Claude Code, Codex from jiushiwon/wg-skills. It costs 68 tokens per session (2,500 once invoked), scanned A, original, Apache-2.0.

A skill that creates flowcharts and workflow diagrams from a short description or a list of steps. It can output SVG and PNG diagrams with selectable layouts, arrow styles, and visual themes.

In plain words
What is it for?
Use it to illustrate coding processes, agent workflows, learning paths, onboarding, meetings, or any custom sequence of steps.
Why use it?
It removes the need to manually arrange steps, boxes, and arrows for a process explanation. It is intended for development, AI, business, academic, medical, and content-creation workflows.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one. Also seen: mentions Claude Code; mentions Codex.

Good fit Use it to illustrate coding processes, agent workflows, learning paths, onboarding, meetings, or any custom sequence of steps.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/jiushiwon/wg-skills/workflow-diagram-skill
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add jiushiwon/wg-skills --skill workflow-diagram-skill
Clone the repo
git clone --depth 1 https://github.com/jiushiwon/wg-skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for workflow-diagram-skill

README.md
[![agentmods](https://agentmods.dev/badge/skills/jiushiwon/wg-skills/workflow-diagram-skill/github.svg)](https://agentmods.dev/skills/jiushiwon/wg-skills/workflow-diagram-skill)
Your own site
<a href="https://agentmods.dev/skills/jiushiwon/wg-skills/workflow-diagram-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/workflow-diagram-skill/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for workflow-diagram-skill

Your own site · 80×15
<a href="https://agentmods.dev/skills/jiushiwon/wg-skills/workflow-diagram-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/workflow-diagram-skill.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 68 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,500 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00068 $0.02500
Opus 5 $0.00034 $0.01250
Sonnet 5 $0.00014 $0.00500
Haiku 4.5 $0.00007 $0.00250

Measured 11d ago against content hash da7d1e8be3b9, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

workflow-diagram-skill scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.

The scan reads SKILL.md. This mod also ships 3 executable files (scripts/generate_diagram.py, scripts/init_skill_assets.py, scripts/svg2png.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

others/workflow-diagram-skill/SKILL.md · 221 lines

How it starts

The opening of the file, as written. The whole thing — 221 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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 前端/后端/数据库一把梭

Read the full file on GitHub · 221 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 11d ago First seen · 221 lines · 68 tokens per session scan A da7d1e8be3b9

Subscribe to this mod's changes

workflow-diagram-skill is a skill published in the GitHub repository jiushiwon/wg-skills (99 stars, last pushed yesterday), licensed Apache-2.0. It adds 68 tokens to every session and 2,500 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

general-video

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated…

heygen-com/hyperframes · 92 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

chengfeng-check-updates

An environment manager for a video-editing system. It checks whether its skills and runtime—the software needed to run them—are installed and compatible.

Agentchengfeng/chengfeng-videocut-skills · 120 tokens

diagnostic-stem-delivery

Audio production with diagnostic analysis, timecode parsing from documents, and verified export workflow.

HKUDS/OpenSpace · 23 tokens