Agent skill

Excalidraw Diagram

by xstongxue in xstongxue/best-skills

基于文字说明或结构信息,生成可直接在 Excalidraw 中打开的手绘风 .excalidraw 图表;支持系统架构图、流程图、数据结构图与自由白板草图,输出标准 Excalidraw JSON。

Apache-2.0Auto-check passedDevelopment

Install Excalidraw Diagram

skills CLI
$ npx skills add xstongxue/best-skills --skill excalidraw-diagram -a claude-code

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

GitHub CLI
$ gh skill install xstongxue/best-skills excalidraw-diagram --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/xstongxue/best-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/excalidraw-diagram .claude/skills/excalidraw-diagram && 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/

Facts

Skill name
excalidraw-diagram
GitHub stars
3k
Token cost
~822 tokens
SKILL.md length
213 words
Files
1
Skills in repo
15
Repo updated
First seen
Licence
Apache-2.0

At a glance

基于文字说明或结构信息,生成可直接在 Excalidraw 中打开的手绘风 .excalidraw 图表;支持系统架构图、流程图、数据结构图与自由白板草图,输出标准 Excalidraw JSON。

  • Works in 4 steps: 解析输入,构建抽象模型 → 简单布局策略(坐标分配) → Excalidraw 元素生成约定(含默认箭头与配色) → …
  • Tasks that involve Diagrams
  • SKILL.md covers 使用时机, 支持图类型, 输入格式(在聊天中的推荐写法) and 生成规则(Agent 内部步骤), plus 3 more sections
  • Reaches github.com and excalidraw.com

What it does

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.

When your agent uses it

  • Tasks that involve Diagrams

Example prompts

  • “/excalidraw-diagram”

Workflow steps

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

  1. 解析输入,构建抽象模型
  2. 简单布局策略(坐标分配)
  3. Excalidraw 元素生成约定(含默认箭头与配色)
  4. Excalidraw 文件结构要求

What it can do on your machine

Read from SKILL.md and the folder at commit 9aa4e55. 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

    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.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • github.com
    • excalidraw.com

    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

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.

Always · name and description, kept in context so the agent knows when to use it
~30
When it runs · the whole SKILL.md, loaded when a task matches
~822

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from xstongxue/best-skills at commit 9aa4e55, republished under its Apache-2.0 licence (© xstongxue). 213 words, ~822 tokens.

Download SKILL.mdSave it as .claude/skills/excalidraw-diagram/SKILL.md (or your agent's skills folder).
name
excalidraw-diagram
description
基于文字说明或结构信息,生成可直接在 Excalidraw 中打开的手绘风 `.excalidraw` 图表;支持系统架构图、流程图、数据结构图与自由白板草图,输出标准 Excalidraw JSON。

Excalidraw 手绘图

本 Skill 指导 Agent 生成标准的 Excalidraw 图表文件(.excalidraw JSON),在浏览器、Obsidian、VSCode 等集成了 Excalidraw 的环境中可直接打开和继续编辑。

使用时机

  • 用户希望生成「手绘风」的系统架构图、模块依赖图、业务流程图、数据流图等。
  • 用户提到「画个架构图」「画流程图」「画模块关系图」「用 Excalidraw 画图」等需求。
  • 用户已有较清晰的模块/步骤/实体列表,希望整理成一张结构化示意图。

支持图类型

  • 系统架构图:用户 / 前端 / 后端服务 / 数据库 / 外部系统等。
  • 业务流程图 / 近似时序图:按照步骤或事件顺序,自上而下或自左向右。
  • 数据结构 / 模块依赖图:实体之间的关联、依赖关系。
  • 自由白板草图:对论文结构、研究框架、任务分解等进行发散式可视化。

输入格式(在聊天中的推荐写法)

请引导用户尽量按照如下结构提供信息(中文即可):

【图类型】:系统架构图 / 流程图 / 数据结构图 / 自由草图
【内容来源】:自由描述 / 论文大纲 / 代码结构 / 接口列表 等
【核心要素】:

  • 节点:列出主要模块 / 实体 / 步骤(可分组)
  • 关系:说明谁连接谁、方向与含义(如「用户 -> Web 前端」「服务 A 调用 服务 B」)
    【布局偏好】:自上而下 / 自左向右 / 分层布局(可选)
    【分组逻辑】:按子系统、按层次(前端/后端/存储等,可选)
    【颜色规则】:不同类型节点的颜色偏好(可选,若未指定则使用默认配色)

若用户只给出自然语言描述,Agent 需先在脑中整理出「节点列表 + 关系列表」,再进行画图。

生成规则(Agent 内部步骤)

  1. 解析输入,构建抽象模型

    • 抽取所有节点:为每个模块/实体/步骤分配唯一 id、名称与类型。
    • 抽取所有关系:source、target、可选 label(调用方式、数据流向等)。
    • 确定层次信息:根据图类型与用户的布局偏好,将节点归入不同层(如「用户层 / 前端层 / 服务层 / 数据层」)。
  2. 简单布局策略(坐标分配)

    • 不追求复杂自动排版,只需给出「合理、可读」的初始位置:
      • 系统架构图:自上而下三层或多层排列,同层节点在一条水平线上。
      • 流程图:按步骤顺序纵向或横向排列,用箭头串联。
      • 数据结构图:以核心实体为中心,相关实体围绕,保持连线不明显交叉。
    • 粗略设定 x, y 坐标,例如:同层 y 固定、x 按索引递增;不同层 y 按层级间距递增。
  3. Excalidraw 元素生成约定(含默认箭头与配色)

    • 节点元素(默认样式):

      • 使用 rectangle 或 round rectangle 表示模块/实体/步骤。
      • 每个节点由一个图形元素 + 一个文本元素组成(文本大致居中叠加在矩形上)。
      • 默认配色约定(若用户未特别指定):
        • 输入 / 输出:白底黑框(backgroundColor: "transparent",strokeColor: "#1e1e1e")。
        • 计算模块 / 中间层(如 Encoder / Decoder / FFN 等):浅色背景 + 黑色描边(例如 backgroundColor: "#f5f5ff" 或类似),同一类模块颜色一致。
        • 分组大框(如「Encoder Stack」「Decoder Stack」):圆角矩形、白底黑框,用文本在框内顶部标注标题。
      • 可使用 groupIds 将同一子系统下的节点分到同一分组,方便用户后续整体移动。
    • 连线元素(默认箭头):

      • 使用 arrow 连接相关节点,points 按起点到终点直线或略带折线。
      • 默认方向:从「数据流/调用发起方」指向「接收方」,例如输入 → 嵌入 → Encoder → Decoder → 输出。
      • 核心主流程使用较粗黑色箭头(strokeWidth 稍大),辅助关系可以用细线或浅色。
      • 如有必要,可增加短文本元素标注连线含义(如「调用」「写入」「Attention」等)。
    • 整体风格:

      • 依赖 Excalidraw 的手绘渲染风格,不需要手动模拟抖动。
      • 控制元素数量,优先保持结构清晰而非堆满细节;对于类似 Transformer 这类结构,推荐只画出主要块和主干箭头。
  4. Excalidraw 文件结构要求

    • 顶层应符合 Excalidraw 官方 .excalidraw JSON 结构,至少包含:
      • type: "excalidraw"
      • version 与 source(可标注为 "cursor-skill-excalidraw-diagram")
      • elements: 图元数组
      • appState 与 files(若无图片等,可给出合理的默认空结构)
    • 所有元素 id 必须唯一,推荐使用简单的前缀 + 递增数字或 UUID 风格字符串。

输出格式

Agent 输出必须严格分为两部分:

  • Part 1 [Diagram Explanation]:

    • 用中文简要说明本图的层次结构、各类节点的含义以及主要连线关系(约 1–2 段)。
    • 若对用户输入有合理补充或抽象,也在此处说明,方便用户校对。
  • Part 2 [Excalidraw JSON]:

    • 输出一个完整、可直接保存为 .excalidraw 文件的 JSON。
    • 仅输出 JSON 内容本身,不添加注释、Markdown 代码块标记或额外说明文字。
    • 确保 JSON 语法正确、无多余逗号,能被 Excalidraw 正常解析。

注意事项

  • 若用户未指定图类型或布局偏好,优先按照「自上而下、多层结构」生成,保持直观清晰。
  • 若节点过多或关系复杂,应主动做聚合与分组(例如将多个内部模块归为一个「子系统」节点),避免图面过于拥挤。
  • 若用户希望后续在 Draw.io 中使用,可提示其:Excalidraw 导出的 SVG/PNG 可再导入 Draw.io,但本 Skill 专注于生成 Excalidraw 原生文件。
  • 若用户只是想「手绘草稿」而不在乎结构严谨,可适度放宽布局与分组,只需保证元素不完全重叠即可。

参考资源

  • Excalidraw 官方仓库: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

Files

Just SKILL.md in skills/excalidraw-diagram of xstongxue/best-skills.

Open the folder on GitHubat commit 9aa4e55

Compare with similar skills

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.

Excalidraw Diagram compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Excalidraw Diagram this skillxstongxue/best-skills3k—~822Automated safety check: PassApache-2.0
Diagram Designcathrynlavery/diagram-design49k1 repos~7.6kAutomated safety check: PassMIT
Excalidraw Diagramcoleam00/excalidraw-diagram-skill5k2 repos~6.1kAutomated safety check: PassNone
Excalidraw Diagrambreferrari/obsidian-mind5k—~3.9kAutomated safety check: PassMIT
Excalidraw Skillyctimlin/mcp_excalidraw2.5k—~4.6kAutomated safety check: PassMIT
Lanshu Animated Architecture Diagramcclank/lanshu-animated-architecture-diagram995—~1.1kAutomated safety check: PassMIT

Similar skills

  • 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.

    49k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed
  • Excalidraw Diagram

    coleam00/excalidraw-diagram-skill

    Create Excalidraw diagram JSON files that make visual arguments.

    5k GitHub starsUsed in 2 repos~6.1k tokens
    DevelopmentAuto-check passed
  • Excalidraw Diagram

    breferrari/obsidian-mind

    Generate Excalidraw diagrams from text content. An agent skill from breferrari/obsidian-mind.

    5k GitHub stars~3.9k tokensUpdated 5 days ago
    DevelopmentAuto-check passed
  • Excalidraw Skill

    yctimlin/mcp_excalidraw

    Excalidraw canvas toolkit for creating, editing, and refining diagrams on a live canvas.

    2.5k GitHub stars~4.6k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Lanshu Animated Architecture Diagram

    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…

    995 GitHub stars~1.1k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed
  • Excalidraw Diagram Studio

    tech-leads-club/agent-skills

    Generates Excalidraw diagram files from plain descriptions, choosing among flowcharts, mind maps, architecture, swimlane, class, sequence and ER diagrams.

    7k GitHub stars~3.6k tokensUpdated 2 days ago
    DevelopmentAuto-check passed

More from xstongxue/best-skills

All 15 skills in this repo
  • Create Skill

    xstongxue/best-skills

    Guides users through creating effective Agent Skills for Cursor.

    3k GitHub starsUsed in 1 repo~3.6k tokens
    Auto-check passed
  • Office File Process

    xstongxue/best-skills

    处理 Office 文档的一站式 skill:Word(.doc/.docx/.dotx)、Excel(.xls/.xlsx/.xlsm/.csv)、PowerPoint(.ppt/.pptx/.potx) 的创建、读取、编辑、提取、转换、校验。触发:『读取 word 文档』『提取 excel 内容』『看 ppt 讲了什么』、.doc 老格式打不开、生成/编辑 Word…

    3k GitHub stars~1.8k tokensUpdated 28 days ago
    Auto-check passed
  • Pptgen Drawio

    xstongxue/best-skills

    根据论文或汇报内容生成多页 Draw.io 格式 PPT,支持论文答辩与通用汇报两种模式,自动导出为 .pptx。当用户提到论文答辩 PPT、答辩幻灯片、通用 PPT、汇报 PPT、根据模板生成 PPT、drawio2pptx 时使用。

    3k GitHub stars~2.1k tokensUpdated 28 days ago
    Auto-check passed
  • Wechat Article Writer

    xstongxue/best-skills

    公众号/自媒体全流程。根据用户表述自动匹配:撰写文章、封面图、正文插图、风格提取。支持多种写作风格。当用户提到写公众号、技术博客、公众号封面、正文插图、步骤图、演示图、流程示意、分析写作风格、克隆文风、模仿爆款、提取风格时使用。详见 reference 目录。

    3k GitHub stars~2k tokensUpdated 28 days ago
    Auto-check: notes
  • Drawio Diagram

    xstongxue/best-skills

    为深度学习模型、网络架构、算法流程等生成标准 Draw.io (.drawio) 格式的可视化图表;支持从零生成与风格迁移两种模式。从零生成:模型架构图、流程图、感受野示意图等;风格迁移:参考图 + 内容描述/项目 → 按参考图风格生成新图。确保 XML 格式正确,可直接在 Draw.io 中打开编辑。

    3k GitHub stars~487 tokensUpdated 28 days ago
    Auto-check passed
  • Project Docs

    xstongxue/best-skills

    对任意代码项目生成一套面向新人的循序渐进文档集,输出到 docs/ 目录。含架构、设计思想、语言特性、代码导读、运行时模型、构建、对接、调试、设计规范共 9 篇,支持全部生成 / 只写几篇 / 更新已有文档。当用户提到"生成项目文档"、"新人文档"、"上手文档"、"架构文档"、"代码导读"、"项目理解"、"深入理解项目"、"onboarding…

    3k GitHub stars~720 tokensUpdated 28 days ago
    Auto-check passed

Works with

Categories

Questions about Excalidraw Diagram

What does Excalidraw Diagram do?

基于文字说明或结构信息,生成可直接在 Excalidraw 中打开的手绘风 .excalidraw 图表;支持系统架构图、流程图、数据结构图与自由白板草图,输出标准 Excalidraw JSON。. Excalidraw Diagram is an agent skill from xstongxue/best-skills.

When should I use Excalidraw Diagram?

Excalidraw Diagram fits situations like: tasks that involve Diagrams.

How do I install Excalidraw Diagram in Claude Code?

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.

How do I install Excalidraw Diagram in Codex?

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.

Can I use Excalidraw Diagram 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 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.

What does Excalidraw Diagram need to run?

SKILL.md names no scripts, command-line tools or credentials: Excalidraw Diagram is instructions for the agent only.

Does Excalidraw Diagram access the network?

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.

Is Excalidraw Diagram 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. Review the folder before installing.

What licence does Excalidraw Diagram use?

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.

How many tokens does Excalidraw Diagram use?

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.

What are the alternatives to Excalidraw Diagram?

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.

Who maintains Excalidraw Diagram?

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.