animated-sketch-diagram SKILL.md skillA
animated-sketch-diagram from iflytek/ifly-skills is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add iflytek/ifly-skills/animated-sketch-diagram@git:20260720.c57c7f4Pins git:20260720.c57c7f4 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- iflytek/ifly-skills
- Path
skills/animated-sketch-diagram/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260720.c57c7f4, committed Jul 20, 2026
- Size
- 8,386 bytes
- Repository stars
- 214
- License
- Apache-2.0
生成"黑墨手绘涂鸦"风格的动画架构图/流程图：米色纸面、针管笔墨线、极淡水洗色块、简笔涂鸦图标、序号章、连线上的流动圆点动画、图标微动效。产出单文件自包含动画 HTML（SVG+CSS），可一键导出无缝循环 GIF。当用户想画架构图、流程图、信息图、技术示意图、对比图、pipeline/workflow 可视化，或提到"手绘风""涂鸦风""动图""animated diagram""GIF 架构图"时使用；即使用户没明说要动画，做技术概念科普配图时也应优先考虑本 skill。.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Animated Sketch Diagram（手绘涂鸦风动画信息图） 产出一张像资深工程师在牛皮笔记本上手绘的系统图：米色纸面、黑墨抖动描边、 极淡水洗色块、简笔涂鸦图标（小人/文档/纸箱/月亮）、序号章、✦ 点缀， 连线上有小圆点沿路径流动、图标带微动效，整体 3s 无缝循环。 **产物**：一个自包含 HTML 文件（内联 SVG + CSS 动画 + base64 字体，双击即可播放）； 需要 GIF 时用 `scripts/render-gif.mjs` 逐帧录制。 ## 工作流 ### 1. 先规划内容，再动笔 **版式跟着内容的天然形状走，不要反过来。** 先判断主题本身长什么样，再选版式原型： | 内容的天然形状 | 版式原型 | |---|---| | N 个并列的类别/方案/阶段，各自内部有流程 | 横向色带 band（左侧标签栏 + 右侧流程画布） | | 自上而下的分层架构（前端→服务→存储） | 纵向层叠：全宽色层堆叠，跨层竖直连线 | | 一个核心与多个卫星（hub-and-spoke） | 径向：中心 mascot 大圆 + 环绕节点 + 放射连线 | | 两三个东西逐维度对比 | 并排色柱/矩阵，同一行是同一维度 | | 单一主流程 | 不用色带，一条蛇形/折线主轴铺满画布 | | 时间演进 | 横向时间轴 + 上下交错的事件卡 | 原型可以混搭（如 band 内部径向）。所有原型共用同一套元件： - **区块（region）**：一级分区的圆角水洗色块，左上序号章 + 顶部居中标题；相邻区块换色。 - **内卡（node）**：纸白小卡片 = 简笔涂鸦图标 + 手写标签，一个区块内 3~6 个为宜； "文档/列表"用折角纸 + 三两行短横线速记，"一叠"用偏移副本。 - **连线（edge)**：微弯曲线箭头，线上可挂小字标签。**拓扑跟内容走**：分支、汇聚、 往返、回环、跨区块长弧、环形轨道都是一等公民，不要把图默认摆成单向流水线—— 内容里有循环/转向，图上就要画出来并让圆点沿它转。实线/虚线只表达"确定/弱、 数据面/控制面"这类强弱语义，不是"主流程/回环"的分工。 - **点缀件**：虚线引用框（放命令/示例）、简笔小人、✦ 火花、中央手写口号。 **规划的最后一步是编排流动**：动画不是装饰，是把主题里"什么在流动"讲出来。 先用一句话回答——这张图里流动的是什么（数据？请求？记忆？任务？）， 它从哪来、经过谁、在哪分叉、在哪转圈、最后到哪去——再把这条"流动脚本" 落成路径：该分支就分支、该汇聚就汇聚、该循环就让圆点沿弧转回去。 主题本身是环（飞轮、迭代、生命周期）→ 图的动线就该是环； 主题是发散/收敛（一发多、多合一）→ 动线就该扇形展开/合拢。 …
Read the whole file at its exact version.
How to install
mdr add iflytek/ifly-skills/animated-sketch-diagram@sha256:5c8bc8fcc547a916The line at the top of this page pins the label git:20260720.c57c7f4, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_3eo5xujx3sd5y53d)
4 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Jul 20, 2026.
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (8386 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
iflytek/ifly-skills · 214 stars · license Apache-2.0 · pushed 2026-11-04 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_3eo5xujx3sd5y53d GET https://markdownregistry.com/api/v1/resolve?ref=iflytek/ifly-skills/animated-sketch-diagram GET https://markdownregistry.com/api/v1/blob/5c8bc8fcc547a916ee33a5fa8dd3aa65528b804ef651ed487d742880ca586848
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.