Lanshu Animated Architecture Diagram

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.

1,018 stars 124 forksSoftware Development

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add cclank/lanshu-animated-architecture-diagram --skill lanshu-animated-architecture-diagram

Manual install

git clone --depth 1 https://github.com/cclank/lanshu-animated-architecture-diagram.git /tmp/lanshu-animated-architecture-diagram
mkdir -p ~/.claude/skills
cp -r /tmp/lanshu-animated-architecture-diagram/. ~/.claude/skills/lanshu-animated-architecture-diagram

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Lanshu Animated Architecture Diagram

Create a polished black-background hand-drawn technical diagram with:

- Editable `.excalidraw` source
- Static `.png` preview
- Animated `.gif` with moving glow points and pulsing module highlights

Use the bundled renderer for deterministic output. Avoid external icon libraries unless the user explicitly provides audited assets.

## Workflow

1. Extract the diagram content.
   - For an article or long post, identify the core architecture, actors, stages, data flow, decisions, and final outputs.
   - For a reference image, preserve the visual grammar: title structure, panels, arrows, density, and signature placement.

2. Create a spec JSON.
   - Start from `assets/default-spec.json`.
   - Keep labels short. Read `references/spec-format.md` when field details or copy length guidance are needed.
   - Use the user’s language for explanatory labels unless the reference style clearly calls for English titles.

3. Render the outputs.

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

4. Validate before delivery.
   - Confirm GIF dimensions, FPS, frame count, and duration with `ffprobe`.
   - Use `--verify` output or `--check` to prove the GIF is not static.

Read the full skill on GitHub

Details

Skill name: lanshu-animated-architecture-diagram
Repository: cclank/lanshu-animated-architecture-diagram
License: MIT
Repo updated: 3 September 2026

FAQ

What does the Lanshu Animated Architecture Diagram skill do?

How do I install the Lanshu Animated Architecture Diagram skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add cclank/lanshu-animated-architecture-diagram --skill lanshu-animated-architecture-diagram. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Lanshu Animated Architecture Diagram popular?

It lives in cclank/lanshu-animated-architecture-diagram, which has 1,018 GitHub stars and 124 forks.

Related skills

Easyeda API

easyeda/easyeda-api-skill

EasyEDA Pro API skill for AI agents. Use when working with EasyEDA Pro EDA software, including PCB design, schematic editing, footprint/symbol management, and project operations. Supports live debugging in EasyEDA and EasyEDA extension development. Provides complete API reference (120+ classes, 62 enums, 70 interfaces), extension-development documentation, and a WebSocket bridge server to execute code in the running EasyEDA Pro client. Trigger on: "嘉立创EDA，启动！", "立创EDA，启动！", "EDA，启动！", "EasyEDA", "PCB", "schematic", "footprint", "EDA", "circuit board", "嘉立创EDA", "原理图", "PCB设计". **IMPORTANT**: 嘉

Software Development79

Boss CLI

jackwener/boss-cli

Use boss-cli for ALL BOSS 直聘 operations — searching jobs, viewing recommendations, managing applications, chatting with recruiters, and batch greeting. Invoke whenever the user requests any job search or recruitment platform interaction on BOSS 直聘.

Software Development126

Regenerative Project Design Orchestrator

932

GarethManning/education-agent-skills

Present project-design pathway options and orchestrate regenerative projects using backwards design, PBL, SEEDS, compassionate systems action, or civic/service pathways.

Software DevelopmentIn 1 list131

Antivibe

1.1k

mohi-devhub/antivibe

Code learning and audit framework. Analyze any codebase — new, legacy, or AI-generated — and produce educational explanations or architectural audits. Use when the user wants to understand WHAT and WHY behind any code, not just accept it.

Software Development81

Hue

855

dominikmartn/hue

Meta-skill that generates new design language skills. Works on Claude Code and Codex. Use when the user says 'create a design skill', 'generate design language', 'new design system skill', 'design skill inspired by X', 'design skill from this screenshot', '/hue', or 'use hue'. Also triggers for 'remix my design skill' or 'make my skill more X'.

Software Development68

Affiliate Check

755

Affitor/affiliate-skills

Live affiliate program data from openaffiliate.dev. Search programs, compare commissions, check cookie days, find top performers. Use when researching affiliate programs, comparing options, or checking program details. Persistent daemon with cache — first call starts server (~2s), subsequent calls ~100ms.

Software DevelopmentIn 1 list213

Browse the most popular Claude skills, all software development skills, or write your own with the skills generator.