mcpField
E
excalidraw-diagram

excalidraw-diagram

github.com/podo设计与 UI29222 次安装4 天前更新
代码仓库

关于 excalidraw-diagram

excalidraw-diagram 是一项将自然语言描述转为可编辑 Excalidraw 图表的技能，并通过渲染和检查流程在交付前验证布局。

主要功能

  1. 01生成可编辑的 .excalidraw 文件
  2. 02根据描述创建图表
  3. 03用形状表达概念关系
  4. 04通过 Playwright 渲染并检查布局
  5. 05使用统一调色板

适用场景

  1. 01根据文字描述绘制流程图
  2. 02创建包含代码或载荷示例的概念图
  3. 03交付前检查并调整图表布局

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill excalidraw-diagram

安装后在 Claude Code 中输入/excalidraw-diagram确认已加载。

附带文件stub.yaml

详细介绍

excalidraw-diagram

目录占位条目 — 完整技能：coleam00/excalidraw-diagram-skill

决策树

  1. 是否已安装完整技能？

    • 全局：f=~/.agents/skills/excalidraw-diagram/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • 项目：f=.agents/skills/excalidraw-diagram/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 技能已作为 excalidraw-diagram 安装，调用该技能并继续
    • pointer → 转到第 2 步

  2. 检测范围，然后安装：

    [ -e ~/.agents/skills/excalidraw-diagram ] && echo "global" || echo "project"

    全局：

    npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -g -y

    项目：

    npx skills add coleam00/excalidraw-diagram-skill --skill excalidraw-diagram -y

    Claude Code： 发送以 ! 开头的命令作为聊天消息，即可在不离开对话的情况下运行命令。

注意事项

  • 要求： uv（Python）和 Playwright Chromium，用于强制执行的渲染与验证循环（cd .claude/skills/excalidraw-diagram/references && uv sync && uv run playwright install chromium）；该技能将项目路径 .claude/skills/excalidraw-diagram/references 写死，因此请在项目范围内安装（不要使用 -g），渲染步骤才能正常运行
  • 许可证： 仓库中没有 LICENSE 文件

安装后调用

  • 技能名称：excalidraw-diagram
  • 触发短语：“excalidraw diagram”、“excalidraw”、“diagram from description”

功能

根据自然语言描述生成 .excalidraw JSON 文件。图表旨在“以视觉方式论证”：形状会映射到其所代表的概念（例如，一对多关系用扇出图表示，序列用时间线表示），并包含真实代码片段或有效载荷等证据材料。每张图表在交付前都会通过渲染、查看和修复循环进行验证（Playwright 将文件渲染为 PNG，Agent 查看图像并修复布局问题）。所有颜色和品牌样式都存放在 references/color-palette.md 中，因此编辑这一个文件即可统一更改所有图表的外观。输出为可编辑的 .excalidraw 文件。

不适用场景

  • 无需 uv 和 Playwright 工具链的快速构思草图——使用 hand-drawn-diagrams（更轻量）或 excalidraw-agents365
  • 屏幕线框图而非概念图——使用 wireframe-skill

评论

支持 Markdown