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.

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