# Lanshu Animated Architecture Diagram

Create premium hand-drawn architecture and process diagrams in the Lanshu animated GIF...

- Repository: https://github.com/cclank/lanshu-animated-architecture-diagram (1019 stars)
- Category: Design
- License: MIT
- Last updated: 2026-09-03
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add cclank/lanshu-animated-architecture-diagram --skill lanshu-animated-architecture-diagram -g -a claude-code -y`
Codex: `npx skills add cclank/lanshu-animated-architecture-diagram --skill lanshu-animated-architecture-diagram -g -a codex -y`
Cursor: `npx skills add cclank/lanshu-animated-architecture-diagram --skill lanshu-animated-architecture-diagram -g -a cursor -y`
Gemini CLI: `npx skills add cclank/lanshu-animated-architecture-diagram --skill lanshu-animated-architecture-diagram -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.
   - Confirm `.excalidraw` JSON has unique IDs, text uses `fontFamily: 5`, and `files` is empty. `--check` validates these output contracts automatically.
   - Open the PNG preview visually and fix overlap, cramped text, or weak hierarchy.

5. Deliver the three files.
   - Show the GIF preview when the interface supports local images.
   - Link the PNG and `.excalidraw` source.

## Style Rules

The rest: https://github.com/cclank/lanshu-animated-architecture-diagram/blob/HEAD//SKILL.md