Lanshu Animated Architecture Diagram

What it does

When your agent uses it

• The user asks for 岚叔动态架构图
• Excalidraw-like diagrams
• DailyDoseOfDS-style black-background sketches
• Animated architecture/process GIFs

Example prompts

• “/lanshu-animated-architecture-diagram”

Requirements

• Python 3

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

1. 1Extract the diagram content.
2. 2Create a spec JSON.
3. 3Render the outputs.
4. 4Validate before delivery.
5. 5Deliver the three files.

What it can do on your machine

Read from SKILL.md and the folder at commit c17f5b4. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships 1 file in scripts/ (Python), which the agent can run.

  Shell commands in SKILL.md call:

  • python
  • ffprobe

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Lanshu Animated Architecture Diagram loads about 1.1k tokens when it runs, and up to ~1.7k if it reads all its reference files. Until then it costs about 140 tokens; SKILL.md has 402 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~140

When it runs · the whole SKILL.md, loaded when a task matches

~1.1k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~1.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from cclank/lanshu-animated-architecture-diagram at commit c17f5b4, republished under its MIT licence (© cclank). 402 words, ~1,110 tokens.

name

lanshu-animated-architecture-diagram

description

Create premium hand-drawn architecture and process diagrams in the Lanshu animated GIF style, with editable .excalidraw files, static PNG previews, and genuinely animated GIFs with moving flow highlights. Use this skill whenever the user asks for 岚叔动态架构图, Excalidraw-like diagrams, DailyDoseOfDS-style black-background sketches, animated architecture/process GIFs, polished flowcharts, visual explanations of articles or system designs, or asks to replicate or improve a reference diagram with hand-drawn animated effects.

version

1.0.0

display_name

岚叔动态架构图

display_name_en

Lanshu Animated Architecture Diagram

description_zh

创建岚叔风格的高质感黑底手绘架构图和流程图，输出可编辑的 Excalidraw 文件、PNG 预览和带流动高亮效果的 GIF。

description_en

Create premium black-canvas hand-drawn architecture and process diagrams with editable Excalidraw files, PNG previews, and animated GIFs with moving flow…

python /path/to/skill/scripts/render_animated_diagram.py \
  --spec /path/to/spec.json \
  --outdir /path/to/output-dir \
  --basename descriptive-name \
  --verify \
  --check

ffprobe -v error -select_streams v:0 -count_frames \
  -show_entries stream=width,height,r_frame_rate,avg_frame_rate,nb_read_frames \
  -show_entries format=duration \
  -of default=noprint_wrappers=1 output.gif

python /path/to/skill/scripts/render_animated_diagram.py \
  --spec spec.json \
  --outdir outputs \
  --basename diagram \
  --verify \
  --check

© cclank, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 12 other files (scripts, references, assets) in the repository root of cclank/lanshu-animated-architecture-diagram.

• SKILL.md
• .gitignore
• LICENSE
• README.md
• agents/openai.yaml
• assets/default-spec.json
• assets/previews/claude-loops.gif
• assets/previews/memory-pack.gif
• references/spec-format.md
• requirements.txt
• scripts/render_animated_diagram.py
• tests/test_render_output_checks.py
• tests/test_text_fitting.py

Open the folder on GitHubat commit c17f5b4