Agent skill · design visual · axtonliu
excalidraw-diagram
Generate Excalidraw diagrams from text content. Supports three output modes - Obsidian (.md), Standard (.excalidraw), and Animated (.excalidraw with animation order). Triggers on "Excalidraw", "画图", "流程图", "思维导图", "可视化", "diagram", "标准Excalidraw", "standard excalidraw", "Excalidraw动画", "动画图", "animate".
Why this skill is useful
Generates Excalidraw JSON files with specific formatting and animation rules that the AI wouldn't reliably produce on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-06-26. 3,277 stars on the source repository.
What this skill does
Excalidraw Diagram Generator Create Excalidraw diagrams from text content with multiple output formats. Output Modes 根据用户的触发词选择输出模式： 触发词 输出模式 文件格式 用途 -------- ---------- ---------- ------ Excalidraw、画图、流程图、思维导图 Obsidian（默认） .md 在 Obsidian 中直接打开 标准Excalidraw、standard excalidraw Standard .excalidraw 在 excalidraw.com 打开/编辑/分享 Excalidraw动画、动画图、animate Animated .excalidraw 拖到 excalidraw-animate 生成动画 Workflow 1. Detect output mode from trigger words (see Output Modes table above) 2. Analyze content - identify concepts, relationships, hierarchy 3. Choose diagram type (see Diagram Types below) 4. Generate Excalidraw JSON (add animation order if Animated mode) 5. Output in correct format based on mode 6. Automatically save to current working directory 7. Notify user with file path and usage instructions Output Formats Mode 1: Obsidian Format (Default) 严格按照以下结构输出，不得有任何修改： 关键要点： Frontmatter 必须包含 tags: [excalidraw] 警告信息必须完整 JSON 必须被 %% 标记包围 不能使用 excalidraw-plugin: parsed 以外的其他 frontmatter 设置 文件扩展名：.md Mode 2: Standard Excalidraw Format 直接输出纯 JSON 文件，可在 excalidraw.com 打开： 关键要点： source 使用 https://excalidraw.com（不是 Obsidian 插件） 纯 JSON，无 Markdown 包装 文件扩展名：.excalidraw Mode 3: Animated Excalidraw Format 与 Standard 格式相同，但每个元素添加 customData.animate 字段控制动画顺序： 动画顺序规则： order: 动画播放顺序（1, 2, 3...），数字越小越先出现 duration: 该元素的绘制时长（毫秒），默认 500 相同 order 的元素同时出现 建议顺序：标题 → 主要框架 → 连接线 → 细节文字 使用方法： 1. 生成 .excalidraw 文件 2. 拖到 https://dai-shi.github.io/excalidraw-animate/ 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills axtonliu/excalidraw-diagram