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.
基于文字说明或结构信息,生成可直接在 Excalidraw 中打开的手绘风 .excalidraw 图表;支持系统架构图、流程图、数据结构图与自由白板草图,输出标准 Excalidraw JSON。
$ npx skills add xstongxue/best-skills --skill excalidraw-diagram -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install xstongxue/best-skills excalidraw-diagram --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/excalidraw-diagram .claude/skills/excalidraw-diagram && rm -rf skills-srcUse ~/.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/
Install the "excalidraw-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/excalidraw-diagram into .claude/skills/excalidraw-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "excalidraw-diagram", 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 install https://github.com/xstongxue/best-skills/tree/main/skills/excalidraw-diagramType 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.
$ npx skills add xstongxue/best-skills --skill excalidraw-diagram -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install xstongxue/best-skills excalidraw-diagram --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/excalidraw-diagram .agents/skills/excalidraw-diagram && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "excalidraw-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/excalidraw-diagram into .agents/skills/excalidraw-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "excalidraw-diagram", 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 xstongxue/best-skills --skill excalidraw-diagram -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install xstongxue/best-skills excalidraw-diagram --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/excalidraw-diagram .cursor/skills/excalidraw-diagram && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "excalidraw-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/excalidraw-diagram into .cursor/skills/excalidraw-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "excalidraw-diagram", 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 https://github.com/xstongxue/best-skills.git --path skills/excalidraw-diagram--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add xstongxue/best-skills --skill excalidraw-diagram -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install xstongxue/best-skills excalidraw-diagram --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/excalidraw-diagram .gemini/skills/excalidraw-diagram && rm -rf skills-srcUse ~/.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/
Install the "excalidraw-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/excalidraw-diagram into .gemini/skills/excalidraw-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "excalidraw-diagram", 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 xstongxue/best-skills excalidraw-diagramInstalls 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 xstongxue/best-skills --skill excalidraw-diagram -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/excalidraw-diagram .github/skills/excalidraw-diagram && rm -rf skills-srcUse ~/.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/
Install the "excalidraw-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/excalidraw-diagram into .github/skills/excalidraw-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "excalidraw-diagram", 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 xstongxue/best-skills --skill excalidraw-diagram -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install xstongxue/best-skills excalidraw-diagram --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/excalidraw-diagram .opencode/skills/excalidraw-diagram && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "excalidraw-diagram" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/excalidraw-diagram into .opencode/skills/excalidraw-diagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "excalidraw-diagram", 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.
excalidraw-diagram基于文字说明或结构信息,生成可直接在 Excalidraw 中打开的手绘风 .excalidraw 图表;支持系统架构图、流程图、数据结构图与自由白板草图,输出标准 Excalidraw JSON。
Excalidraw Diagram is an agent skill from xstongxue/best-skills. 基于文字说明或结构信息,生成可直接在 Excalidraw 中打开的手绘风 .excalidraw 图表;支持系统架构图、流程图、数据结构图与自由白板草图,输出标准 Excalidraw JSON。
Its SKILL.md is about 820 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development, covering Diagrams. It works with Excalidraw. The licence is Apache-2.0.
4 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 9aa4e55. It shows what the files ask for, not the result of running them.
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.
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
github.comexcalidraw.comFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Excalidraw Diagram loads about 822 tokens when it runs. Until then it costs about 30 tokens; SKILL.md has 213 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.
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); files beside SKILL.md are not scanned.
The full file from xstongxue/best-skills at commit 9aa4e55, republished under its Apache-2.0 licence (© xstongxue). 213 words, ~822 tokens.
.claude/skills/excalidraw-diagram/SKILL.md (or your agent's skills folder).本 Skill 指导 Agent 生成标准的 Excalidraw 图表文件(.excalidraw JSON),在浏览器、Obsidian、VSCode 等集成了 Excalidraw 的环境中可直接打开和继续编辑。
请引导用户尽量按照如下结构提供信息(中文即可):
【图类型】:系统架构图 / 流程图 / 数据结构图 / 自由草图
【内容来源】:自由描述 / 论文大纲 / 代码结构 / 接口列表 等
【核心要素】:
若用户只给出自然语言描述,Agent 需先在脑中整理出「节点列表 + 关系列表」,再进行画图。
解析输入,构建抽象模型
简单布局策略(坐标分配)
x, y 坐标,例如:同层 y 固定、x 按索引递增;不同层 y 按层级间距递增。Excalidraw 元素生成约定(含默认箭头与配色)
节点元素(默认样式):
rectangle 或 round rectangle 表示模块/实体/步骤。 backgroundColor: "transparent",strokeColor: "#1e1e1e")。 backgroundColor: "#f5f5ff" 或类似),同一类模块颜色一致。 groupIds 将同一子系统下的节点分到同一分组,方便用户后续整体移动。连线元素(默认箭头):
arrow 连接相关节点,points 按起点到终点直线或略带折线。 strokeWidth 稍大),辅助关系可以用细线或浅色。 整体风格:
Excalidraw 文件结构要求
.excalidraw JSON 结构,至少包含: type: "excalidraw" version 与 source(可标注为 "cursor-skill-excalidraw-diagram") elements: 图元数组 appState 与 files(若无图片等,可给出合理的默认空结构)Agent 输出必须严格分为两部分:
Part 1 [Diagram Explanation]:
Part 2 [Excalidraw JSON]:
.excalidraw 文件的 JSON。 https://github.com/excalidraw/excalidraw https://excalidraw.com/© xstongxue, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in skills/excalidraw-diagram of xstongxue/best-skills.
Open the folder on GitHubat commit 9aa4e55
Excalidraw Diagram 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 |
|---|---|---|---|---|---|---|
| Excalidraw Diagram this skillxstongxue/best-skills | 3k | — | ~822 | Automated safety check: Pass | Apache-2.0 | |
| Diagram Designcathrynlavery/diagram-design | 49k | 1 repos | ~7.6k | Automated safety check: Pass | MIT | |
| Excalidraw Diagramcoleam00/excalidraw-diagram-skill | 5k | 2 repos | ~6.1k | Automated safety check: Pass | None | |
| Excalidraw Diagrambreferrari/obsidian-mind | 5k | — | ~3.9k | Automated safety check: Pass | MIT | |
| Excalidraw Skillyctimlin/mcp_excalidraw | 2.5k | — | ~4.6k | Automated safety check: Pass | MIT | |
| Lanshu Animated Architecture Diagramcclank/lanshu-animated-architecture-diagram | 995 | — | ~1.1k | Automated safety check: Pass | MIT |
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.
coleam00/excalidraw-diagram-skill
Create Excalidraw diagram JSON files that make visual arguments.
breferrari/obsidian-mind
Generate Excalidraw diagrams from text content. An agent skill from breferrari/obsidian-mind.
yctimlin/mcp_excalidraw
Excalidraw canvas toolkit for creating, editing, and refining diagrams on a live canvas.
cclank/lanshu-animated-architecture-diagram
Create premium hand-drawn architecture and process diagrams in the Lanshu animated GIF style, with editable .excalidraw files, static PNG previews, and genuinely animated GIFs with moving flow…
tech-leads-club/agent-skills
Generates Excalidraw diagram files from plain descriptions, choosing among flowcharts, mind maps, architecture, swimlane, class, sequence and ER diagrams.
xstongxue/best-skills
Guides users through creating effective Agent Skills for Cursor.
xstongxue/best-skills
处理 Office 文档的一站式 skill:Word(.doc/.docx/.dotx)、Excel(.xls/.xlsx/.xlsm/.csv)、PowerPoint(.ppt/.pptx/.potx) 的创建、读取、编辑、提取、转换、校验。触发:『读取 word 文档』『提取 excel 内容』『看 ppt 讲了什么』、.doc 老格式打不开、生成/编辑 Word…
xstongxue/best-skills
根据论文或汇报内容生成多页 Draw.io 格式 PPT,支持论文答辩与通用汇报两种模式,自动导出为 .pptx。当用户提到论文答辩 PPT、答辩幻灯片、通用 PPT、汇报 PPT、根据模板生成 PPT、drawio2pptx 时使用。
xstongxue/best-skills
公众号/自媒体全流程。根据用户表述自动匹配:撰写文章、封面图、正文插图、风格提取。支持多种写作风格。当用户提到写公众号、技术博客、公众号封面、正文插图、步骤图、演示图、流程示意、分析写作风格、克隆文风、模仿爆款、提取风格时使用。详见 reference 目录。
xstongxue/best-skills
为深度学习模型、网络架构、算法流程等生成标准 Draw.io (.drawio) 格式的可视化图表;支持从零生成与风格迁移两种模式。从零生成:模型架构图、流程图、感受野示意图等;风格迁移:参考图 + 内容描述/项目 → 按参考图风格生成新图。确保 XML 格式正确,可直接在 Draw.io 中打开编辑。
xstongxue/best-skills
对任意代码项目生成一套面向新人的循序渐进文档集,输出到 docs/ 目录。含架构、设计思想、语言特性、代码导读、运行时模型、构建、对接、调试、设计规范共 9 篇,支持全部生成 / 只写几篇 / 更新已有文档。当用户提到"生成项目文档"、"新人文档"、"上手文档"、"架构文档"、"代码导读"、"项目理解"、"深入理解项目"、"onboarding…
Works with
Categories
基于文字说明或结构信息,生成可直接在 Excalidraw 中打开的手绘风 .excalidraw 图表;支持系统架构图、流程图、数据结构图与自由白板草图,输出标准 Excalidraw JSON。. Excalidraw Diagram is an agent skill from xstongxue/best-skills.
Excalidraw Diagram fits situations like: tasks that involve Diagrams.
Run `npx skills add xstongxue/best-skills --skill excalidraw-diagram -a claude-code`. Or copy the skill folder (skills/excalidraw-diagram in xstongxue/best-skills) into .claude/skills/excalidraw-diagram in your project. Claude Code loads it when a task matches its description.
Run `npx skills add xstongxue/best-skills --skill excalidraw-diagram -a codex`. Or copy the skill folder (skills/excalidraw-diagram in xstongxue/best-skills) into .agents/skills/excalidraw-diagram in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add xstongxue/best-skills --skill excalidraw-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/excalidraw-diagram, .gemini/skills/excalidraw-diagram, .github/skills/excalidraw-diagram and .opencode/skills/excalidraw-diagram in your project.
SKILL.md names no scripts, command-line tools or credentials: Excalidraw Diagram is instructions for the agent only.
SKILL.md names 2 domains. In commands or code: github.com and excalidraw.com; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.
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. Review the folder before installing.
Excalidraw Diagram 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.
About 822 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Excalidraw Diagram: Diagram Design (cathrynlavery/diagram-design, 49k stars), Excalidraw Diagram (coleam00/excalidraw-diagram-skill, 5k stars), Excalidraw Diagram (breferrari/obsidian-mind, 5k stars) and Excalidraw Skill (yctimlin/mcp_excalidraw, 2.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
xstongxue (a GitHub user) maintains it in xstongxue/best-skills, which has 2,966 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on September 13, 2026.
Source: xstongxue/best-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.