Menu

#875 by GitHub stars

cclank/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-styl

Engineering

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

SKILL.md

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

c17f5b4e5de9 → c17f5b4e5de9

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → c17f5b4e5de9

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit c17f5b4e5de99d3603b364530ad04d930d038d24

1kGitHub stars
9stars in 7 days
1skill in this repository
0commits in 30 days

Heat

3.2
  • Star growth, last 7 daysAhead of 82% of tracked repositories
  • Star growth, last 24 hoursAhead of 5% of tracked repositories
  • Rank movement, last 7 daysAhead of 4% of tracked repositories
  • Commits, last 30 daysAhead of 0% of tracked repositories
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Aug 2, 2026Nov 4, 20261,027

Individual skills in this repository

How it works

lanshu-animated-architecture-diagram

When your agent uses it

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.

What it loads into context

Frontmatter

233 tokens

Always available to the agent

SKILL.md

1,027 tokens

When the skill is activated

Reference documents

2,341 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. Workflow
  2. Style Rules
  3. Spec Authoring Hints
  4. Verification Commands

Scripts executed separately

  • scripts/render_animated_diagram.py
  • tests/test_render_output_checks.py
  • tests/test_text_fitting.py

Files

  • .gitignoreasset91 bytes
  • LICENSEasset1,063 bytes
  • README.mddoc6,761 bytes
  • SKILL.mdcore4,553 bytes
  • SKILL.mdcore4,553 bytes
  • SKILL.mdcore4,553 bytes
  • SKILL.mdcore4,553 bytes
  • SKILL.mdcore4,553 bytes
  • SKILL.mdcore4,553 bytes
  • agents/openai.yamlasset296 bytes
  • assets/default-spec.jsonasset2,982 bytes
  • assets/previews/claude-loops.gifasset7,740,963 bytes
  • assets/previews/memory-pack.gifasset8,345,874 bytes
  • references/spec-format.mddoc2,509 bytes
  • requirements.txtdoc15 bytes
  • scripts/render_animated_diagram.pyruns35,122 bytes
  • tests/test_render_output_checks.pyruns1,835 bytes
  • tests/test_text_fitting.pyruns3,395 bytes
Read 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.
View the complete source on GitHub

Skills included

  • lanshu-animated-architecture-diagram

Repository facts

License
MIT
Created
Jun 26, 2026
Last pushed
Sep 3, 2026
Forks
125
Open issues
0
Project activity
Slowing

Rank over the last 12 weeks

Now #875 · best #608 · down 174 in 30 days

  1. #856 on Oct 31
  2. #859 on Nov 1
  3. #865 from Nov 2 to Nov 3
  4. #872 on Nov 4
  5. #873 on Nov 5
  6. #875 since Nov 6
64 earlier periods
  1. #609 on Aug 2
  2. #593 on Aug 7
  3. #594 on Aug 9
  4. #626 on Aug 10
  5. #629 on Aug 11
  6. #632 on Aug 12
  7. #633 on Aug 13
  8. #628 on Aug 14
  9. #608 on Aug 15
  10. #620 on Aug 16
  11. #631 on Aug 17
  12. #628 on Aug 20
  13. #633 on Aug 21
  14. #612 on Aug 22
  15. #636 on Aug 23
  16. #649 on Aug 24
  17. #656 on Aug 25
  18. #638 on Aug 26
  19. #639 on Aug 27
  20. #659 on Aug 28
  21. #610 on Aug 29
  22. #609 on Aug 30
  23. #638 on Aug 31
  24. #650 on Sep 1
  25. #641 on Sep 2
  26. #637 on Sep 3
  27. #618 on Sep 4
  28. #612 on Sep 5
  29. #625 on Sep 6
  30. #639 on Sep 7
  31. #659 on Sep 8
  32. #646 on Sep 9
  33. #650 on Sep 10
  34. #641 on Sep 12
  35. #642 on Sep 13
  36. #667 on Sep 14
  37. #665 from Sep 16 to Sep 17
  38. #669 on Sep 21
  39. #683 on Sep 22
  40. #652 on Sep 24
  41. #643 on Sep 25
  42. #639 on Sep 26
  43. #676 on Sep 28
  44. #716 on Sep 29
  45. #667 on Oct 2
  46. #679 on Oct 4
  47. #692 on Oct 6
  48. #701 on Oct 7
  49. #711 on Oct 9
  50. #694 on Oct 11
  51. #716 on Oct 13
  52. #728 on Oct 14
  53. #722 on Oct 15
  54. #730 on Oct 16
  55. #701 on Oct 18
  56. #744 on Oct 19
  57. #745 on Oct 20
  58. #751 on Oct 21
  59. #730 on Oct 22
  60. #703 on Oct 24
  61. #835 on Oct 25
  62. #843 on Oct 28
  63. #849 on Oct 29
  64. #854 on Oct 30

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 4, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 5 notes
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
Show all 13 signals by file

README.md

  • Network accessline 7
    [![Codex Skill](https://img.shields.io/badge/Codex-Skill-22C86F?style=for-the-badge)](./SKILL.md)
  • Network accessline 8
    [![Python](https://img.shields.io/badge/Python-3.9%2B-3776AB?style=for-the-badge&logo=python&logoColor=white)](https://www.python.org/)
  • Network accessline 9
    [![Pillow](https://img.shields.io/badge/Pillow-Renderer-8A2BE2?style=for-the-badge)](https://python-pillow.org/)
  • Network accessline 10
    [![Excalidraw](https://img.shields.io/badge/Excalidraw-JSON-6965DB?style=for-the-badge)](https://excalidraw.com/)
  • Network accessline 11
    [![Animated GIF](https://img.shields.io/badge/Animated-GIF-FFB000?style=for-the-badge)](./scripts/render_animated_diagram.py)
  • Network accessline 12
    [![License](https://img.shields.io/badge/License-MIT-111827?style=for-the-badge)](./LICENSE)
  • Network accessline 79
    git clone https://github.com/cclank/lanshu-animated-architecture-diagram.git

scripts/render_animated_diagram.py

  • Executable scriptline 1
    #!/usr/bin/env python3
  • Network accessline 269
    "type": "excalidraw",             "version": 2,             "source": "https://excalidraw.com",
  • Network accessline 270
    "version": 2,             "source": "https://excalidraw.com",             "elements": self.elements,
  • Network accessline 271
    "source": "https://excalidraw.com",

tests/test_render_output_checks.py

  • Executable scriptline 1
    Executable file

tests/test_text_fitting.py

  • Executable scriptline 1
    Executable file

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 1 fact
  • Network access in code of documentationREADME.md:79Low confidence

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeCompatibleStandard SKILL.md SKILL.md.claude/skills/<skill-name>/
CodexCompatibleStandard SKILL.md SKILL.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

You might also use

mattpocock/skills

Skills for Real Engineers. Straight from my .agents directory.

316.1kGitHub stars

obra/superpowers

An agentic skills framework & software development methodology that works.

313.3kGitHub stars

NousResearch/hermes-agent

The agent that grows with you

261kGitHub stars

multica-ai/andrej-karpathy-skills

Behavioral guidelines to reduce common LLM coding mistakes. Use when writing, reviewing, or refactoring code to avoid overcomplication, make surgical changes, surface assumptions,…

230.1kGitHub stars

anthropics/skills

Public repository for Agent Skills

188kGitHub stars

DietrichGebert/ponytail

Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.

185.6kGitHub stars

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

cclank/lanshu-animated-architecture-diagram: #875 on hotskills, 1k stars

[![cclank/lanshu-animated-architecture-diagram on hotskills](https://hotskills.dev/badge/cclank-lanshu-animated-architecture-diagram.svg)](https://hotskills.dev/skill/cclank-lanshu-animated-architecture-diagram/)