企业官网建设流程全解析

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-skills

axton-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动画画一个 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 视频的完整步骤

1. 生成带动画顺序的.excalidraw文件（如上一步所示）
2. 打开 excalidraw-animate 工具页面
3. 点击Load File选择生成的.excalidraw文件
4. 点击Animate预览动画效果
5. 点击Export导出SVG 或 WebM

导出的 WebM 视频可直接嵌入 PPT、Notion、公众号或视频素材；SVG 动画则适合嵌入网页。整个过程无需编写任何代码。

🎨 让图表更专业的 3 个设计细节

技能内置了完整的设计规范（详见 excalidraw-schema.md），这也是生成图"好看"的原因：

• ✍️手写字体：所有文本使用fontFamily: 5（Excalifont 手绘字体），还原真实手绘感
• 🎨语义化配色：浅蓝=输入/数据源、浅绿=成功/输出、浅橙=警告、浅红=错误，一眼看懂信息层级
• 📏可读性下限：正文最小 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