Animated diagrams as code — guides & deep dives
Practical articles on turning plain text into animated architecture and system diagrams. Start with the interactive playground or thedocumentation, then dig into a topic below.
Start here
Compare
Use cases
- Use case
Animated System Design Diagrams for Interviews & Docs
Show writes fanning out to caches, queues, and replicas under load.
Read → - Use case
Animated Kubernetes Architecture Diagrams as Code
Play the request path through ingress, services, pods, and deployments.
Read → - How-to
How to Make Animated Sequence Diagrams as Code
Reveal participants, then play each request and response in order.
Read →
Features
- Diagram as code
Animated Diagrams as Code: Version Your Architecture in Git
Describe your system in plain text, review it in pull requests, animate it in the browser.
Read → - Performance
Browser-Native Diagram Animation: No Canvas, No GSAP
How Markdy animates diagrams with the Web Animations API and CSS — tiny and seekable.
Read → - AI authoring
AI-Generated Architecture Diagrams: Let LLMs Write Your Diagrams
Prompt Claude, ChatGPT, or Copilot for a valid, animated diagram instead of brittle JS.
Read → - Docs as code
Animated Diagrams in Astro & MDX: Docs-as-Code, With Motion
Embed lazy-loaded animated diagrams in Astro and MDX, versioned next to your content.
Read →