Token导航 LogoToken导航TokenDH.com
前端设计需要联网github未标认证来源可访问clear审计提醒

excalidrawExcalidraw 图表绘制

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码,整理组件结构,或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式,避免只生成孤立片段;涉及页面改动时,应配合本地预览和构建检查确认视觉效果。

总安装

1,093

周安装

46

GitHub Stars

14

下载量

383
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

3

许可证

MIT

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:excalidraw(Excalidraw 图表绘制)
来源仓库:https://github.com/bahayonghang/my-claude-code-settings
仓库路径:skills/excalidraw
安装命令:
npx skills add https://github.com/bahayonghang/my-claude-code-settings --skill excalidraw
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。不同来源提供的安装方式可能略有差异;本站展示可直接复制的安装命令,安装前请核对来源页面。

skills.shnpx skills
npx skills add https://github.com/bahayonghang/my-claude-code-settings --skill excalidraw

简介

excalidraw 根据描述生成 Excalidraw 风格图表,支持架构与概念映射。

  • 可区分专业模式与草图风格,自动选择箭头路径与节点布局。
  • 需结合 EXCALIDRAW_GUIDE.md 规范进行结构分析与样式决策。
  • 输出为 JSON 或 PNG,适用于白板协作与系统设计可视化。
  • 依赖网络获取图标资源,复杂导出建议预装 excalidraw-cli。

SKILL.md

Generate an Excalidraw diagram from $ARGUMENTS.

Workflow

  1. Read $SKILL_DIR/references/EXCALIDRAW_GUIDE.md before doing layout work. For complex diagrams or exports, use the relevant sections instead of improvising structure.
  2. Classify the request: architecture, flowchart, sequence, hub-and-spoke, hierarchy, ER-style, swimlane, or freeform concept map.
  3. Choose a style mode:

- professional by default for architecture, systems, APIs, workflows, and most technical diagrams - sketch only when the user explicitly asks for a whiteboard, brainstorm, rough draft, or hand-drawn look

  1. Perform arrow-path analysis before placing components. If return arrows or non-adjacent connections would cross intermediate nodes, switch to a bypass path or 2D layout.
  2. Generate the JSON with descriptive IDs, explicit text sizing and colors, bidirectional bindings, and containers that fully cover grouped children.
  3. Save the result as <descriptive-name>.excalidraw.json in the active directory.
  4. If the user asked for PNG or SVG, or a rendered preview would materially help, try an export:

- SVG via Kroki when curl is available - PNG or SVG via excalidraw-brute-export-cli when the local CLI is available - If export tooling is unavailable, still deliver the JSON and explain what was missing

  1. Return the created file paths, chosen diagram type, chosen style mode, and export status.

Rules

  • .excalidraw.json is the required deliverable. Rendered exports are optional enhancements.
  • Use the professional palette, typography, and spacing defaults from the guide unless the request explicitly calls for a sketch or workshop feel.
  • Arrows and contained text must be bound bidirectionally.
  • Set width, height, and strokeColor on every text element.
  • External arrows target the outer container for grouped structures, not the internal steps.
  • Siblings that represent parallel branches stay on the same row.
  • For 10+ elements, plan sections first and then write the file.
  • Prefer concise delivery. Do not dump large JSON blobs in chat when a file output is the real artifact.
  • Do not use this skill when Mermaid is explicitly requested for Markdown or docs, or when a simple explanation is clearer than a diagram.

Troubleshooting

  • Missing text: check width, height, strokeColor, and the selected font.
  • Arrows not snapping: verify both arrow bindings and shape boundElements.
  • Spaghetti layout: widen spacing, route return arrows around the perimeter, or switch to a 2D layout.
  • Export failure: keep the JSON output, report the failed tool or command, and tell the user how to open the file manually.

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

04

需要参考平台分布和安装热度时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

Claude Code

25.82%
按下载量换算99

Antigravity

21.28%
按下载量换算82

Gemini CLI

18.28%
按下载量换算70

windsurf

12.95%
按下载量换算50

OpenCode

6.98%
按下载量换算27

Cursor

3.8%
按下载量换算15

安全审计

Gen Agent Trust Hub

可疑

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。来源安全扫描存在 warning/failed 结果,不能写成本站确认安全。

来源信息

继续浏览同类 Skills