axton-obsidian-visual-skills 进阶玩法：如何生成手绘风格 Excalidraw 动画图并导出 SVG/WebM 视频

axton-obsidian-visual-skills 进阶玩法如何生成手绘风格 Excalidraw 动画图并导出 SVG/WebM 视频【免费下载链接】axton-obsidian-visual-skillsVisual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code项目地址: https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skillsaxton-obsidian-visual-skills是一个为 Obsidian 打造的可视化技能包Visual Skills Pack它让 Claude Code 能够直接从一段文字生成Canvas、Excalidraw 和 Mermaid三种图表。其中最有表演欲的功能是生成手绘风格 Excalidraw 动画图并一键导出为SVG 或 WebM 视频——让流程图、思维导图像手绘白板一样逐个元素画出来非常适合做演示、课程和社媒内容。上图就是 Excalidraw 技能生成的典型效果手写字体、柔和配色、层级清晰。这篇文章带你走完从安装 → 触发动画模式 → 理解动画顺序 → 导出 SVG/WebM 视频的完整流程。 快速安装两种方式任选使用前需确保已安装 Claude Code CLI 和 Obsidian并安装 Excalidraw 插件。方式一插件市场安装推荐在 Claude Code 中执行/plugin marketplace add axtonliu/axton-obsidian-visual-skills /plugin install obsidian-visual-skills然后重启 Claude Code 即可加载技能。方式二手动安装git clone https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skills cp -r axton-obsidian-visual-skills/excalidraw-diagram ~/.claude/skills/只需 Excalidraw 功能的话只复制excalidraw-diagram/目录即可。详细说明见 README_CN.md。 触发动画模式只需一个关键词这是本文的核心技巧。Excalidraw 技能内置了三种输出模式通过触发词切换定义在 excalidraw-diagram/SKILL.md 中触发词输出模式文件格式用途Excalidraw、画图、流程图Obsidian默认.md在 Obsidian 中直接打开标准ExcalidrawStandard.excalidraw在 excalidraw.com 打开/编辑/分享Excalidraw动画、动画图、animateAnimated.excalidraw拖到 excalidraw-animate 生成动画想生成动画图只需在请求里带上动画二字例如用Excalidraw动画画一个 CI/CD 流水线流程图Claude Code 会自动生成一个带.animate.excalidraw后缀的文件如流水线.flowchart.animate.excalidraw并告诉你每个元素的动画顺序。⚙️ 动画原理order 与 duration 两个字段动画模式与标准模式的区别是每个元素都多了一个customData.animate字段{ id: title-1, type: text, customData: { animate: { order: 1, duration: 500 } } }order动画播放顺序1、2、3…数字越小越先出现相同 order 的元素同时出现duration该元素的绘制时长毫秒默认 500技能内置了一套推荐顺序标题1→ 主要框架2-4→ 连接线5-7→ 细节文字8-10这样动画看起来就像有人在白板上讲解图表而不是杂乱地同时弹出。 导出 SVG / WebM 视频的完整步骤生成带动画顺序的.excalidraw文件如上一步所示打开 excalidraw-animate 工具页面点击Load File选择生成的.excalidraw文件点击Animate预览动画效果点击Export导出SVG 或 WebM导出的 WebM 视频可直接嵌入 PPT、Notion、公众号或视频素材SVG 动画则适合嵌入网页。整个过程无需编写任何代码。 让图表更专业的 3 个设计细节技能内置了完整的设计规范详见 excalidraw-schema.md这也是生成图好看的原因✍️手写字体所有文本使用fontFamily: 5Excalifont 手绘字体还原真实手绘感语义化配色浅蓝输入/数据源、浅绿成功/输出、浅橙警告、浅红错误一眼看懂信息层级可读性下限正文最小 16px、禁止低于 14px元素间至少保留 20px 间距防止重叠⚠️ 中文用户注意Excalifont 手写字体只覆盖拉丁字符中文需要动态加载小赖体Xiaolai网络字体。如果离线或网络受限中文可能回退为普通字体。解决办法是在 Obsidian 的 Excalidraw 插件设置中开启Load Chinese fonts from file at startup并将 CJK 字体文件放入 vault 的Excalidraw/CJK Fonts目录。 一图多形态同一内容换一种视觉风格这个技能包的魅力在于三合一同一段文字Excalidraw 技能给你手绘白板风而 Canvas 技能则生成彩色卡片式的无限画布参见 obsidian-canvas-creator/SKILL.md把这篇文章整理成 Canvas 思维导图对比前文的手绘风格 Excalidraw 图同一份MAPS 四维框架内容在 Canvas 中呈现为分组卡片 彩色标签布局。需要动感演示选动画 Excalidraw需要协作编辑选 Canvas——按需切换触发词即可。✅ 常见问题速查Q生成的动画文件在 Obsidian 里打不开A动画模式输出的是标准.excalidraw文件不是 Obsidian 的.md格式请直接在 excalidraw.com 或 excalidraw-animate 中打开。Q动画顺序不理想怎么办A可以直接要求调整例如把连接线的动画顺序提前先搭骨架再出标题技能会根据新指令重新分配order值。Q导出 WebM 后体积太大A优先导出 SVG矢量、体积小、无限缩放仅当需要自动播放效果时才用 WebM。写在最后axton-obsidian-visual-skills 目前处于实验阶段输出质量会随模型版本略有波动遇到问题时建议附上输入 输出文件 复现步骤。现在就可以试试用一句话生成你的第一张手绘动画图再导出成 WebM 放进下一次演示里吧 【免费下载链接】axton-obsidian-visual-skillsVisual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code项目地址: https://gitcode.com/gh_mirrors/ax/axton-obsidian-visual-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考