Name: codegen-diagram
Author: xstongxue

codegen-diagram

基于当前项目/代码生成 Draw.io 图表，支持技术栈图、系统架构图、数据结构图、E-R 图四种类型。输出符合 Draw.io 语法的 .drawio 文件（mxGraph XML），可直接导入 Draw.io 编辑。当用户提到技术栈、系统架构、数据结构、E-R 图时使用。

by xstongxue(0) 0 installs

Imported from xstongxue/best-skills (skills/codegen-diagram/SKILL.md). Install upstream with npx skills add xstongxue/best-skills --skill codegen-diagram. Copyright stays with the author.

代码生成·项目图表

本 Skill 指导 Agent 基于当前项目/代码仓库生成 Draw.io 格式图表，支持四种类型：技术栈图、系统架构图、数据结构图、E-R 图。

Step 0：任务识别

用户表述 / 关键词	执行
技术栈、整体技术栈、组件选型	`reference/tech-stack.md`
系统架构、分层结构、调用流程	`reference/system-arch.md`
数据结构图、表结构图、实体字段关系图	`reference/data-structure.md`
E-R 图、实体关系图、数据库关系图	`reference/er-diagram.md`

使用时机

用户需要根据当前项目画技术栈图、系统架构图、数据结构图或 E-R 图
用户提到「根据当前项目」「根据代码」「画我们系统的……」

通用规范（四种图表共用）

Draw.io 基础

使用 mxGraphModel，画布背景 #FFFFFF
仅使用 Draw.io 内置形状，确保可立即打开与编辑
节点标签简洁，符合技术文档表达习惯

色彩与字体

用途	颜色值
主色调	#3366CC
副色调	#7FBFFF
强调色	#FF9966
深色背景字体	#FFFFFF
浅色背景字体	#333333
画布背景	#FFFFFF

字体：Helvetica，字号 11–13
连接线：endArrow=classicBlockThin 或 blockThin

输出要求

图表总览（1–2 段文字）
完整 mxGraph XML（可保存为 .drawio）
导入与使用说明
图题与论文引用建议

# after Install: the listing is in your workspace's routing pool - a plan picks it for its slot curl -s -X POST https://api.opensmartroute.ai/api/v1/route -H 'Authorization: Bearer $OSR_API_KEY' -H 'Content-Type: application/json' -d '{"text": "...", "plan": true}'

Install codegen-diagram and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

{ "ocm": "1", "id": "xstongxue-best-skills-codegen-diagram", "kind": "skill", "name": "codegen-diagram", "description": "基于当前项目/代码生成 Draw.io 图表，支持技术栈图、系统架构图、数据结构图、E-R 图四种类型。输出符合 Draw.io 语法的 .drawio 文件（mxGraph XML），可直接导入 Draw.io 编辑。当用户提到技术栈、系统架构、数据结构、E-R 图时使用。", "publisher": "xstongxue", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "skills-sh" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "基于当前项目/代码生成 Draw.io 图表，支持技术栈图、系统架构图、数据结构图、E-R 图四种类型。输出符合 Draw.io 语法的 .drawio 文件（mxGraph XML），可直接导入 Draw.io 编辑。当用户提到技术栈、系统架构、数据结构、E-R 图时使用。" ], "primary": false, "metadata": { "source": { "provider": "skills.sh", "repository": "https://github.com/xstongxue/best-skills", "path": "skills/codegen-diagram/SKILL.md", "ref": "HEAD", "url": "https://github.com/xstongxue/best-skills/blob/HEAD/skills/codegen-diagram/SKILL.md", "key": "xstongxue/best-skills/skills/codegen-diagram/SKILL.md" } }, "instructions": "# 代码生成·项目图表\n\n本 Skill 指导 Agent 基于**当前项目/代码仓库**生成 Draw.io 格式图表，支持四种类型：技术栈图、系统架构图、数据结构图、E-R 图。\n\n## Step 0：任务识别\n\n\n| 用户表述 / 关键词 | 执行 |\n| ------------------ | ----------------------------- |\n| 技术栈、整体技术栈、组件选型 | `reference/tech-stack.md` |\n| 系统架构、分层结构、调用流程 | `reference/system-arch.md` |\n| 数据结构图、表结构图、实体字段关系图 | `reference/data-structure.md` |\n| E-R 图、实体关系图、数据库关系图 | `reference/er-diagram.md` |\n\n\n## 使用时机\n\n- 用户需要根据当前项目画技术栈图、系统架构图、数据结构图或 E-R 图\n- 用户提到「根据当前项目」「根据代码」「画我们系统的……」\n\n## 通用规范（四种图表共用）\n\n### Draw.io 基础\n\n- 使用 **mxGraphModel**，画布背景 `#FFFFFF`\n- 仅使用 Draw", "cost": { "context_tokens": 244 } }

codegen-diagram

About

代码生成·项目图表

Step 0：任务识别

使用时机

通用规范（四种图表共用）

Draw.io 基础

色彩与字体

输出要求

Use it

Install codegen-diagram and it becomes one more candidate the router can pick - when it fits.

Manifest

Reviews