Learn MarkdyScript for animated diagrams
Start with a scene, add architecture nodes, group systems, choreograph beats, and render browser-native animated diagrams from plain text.
Build Your First Scene
A step-by-step guide from your first node and flow to groups, beats, patterns, styles, and semantic themes.
ReferenceMarkdyScript Syntax
The language reference for scene declarations, node kinds, groups, beats, flow operators, patterns, and themes.
AI AgentsAgent Generation Guide
A machine-readable reference optimized for Claude, ChatGPT, GitHub Copilot, Cursor, Windsurf, and other LLM coding agents.
ExamplesShipped Scenes
Browse real .markdy examples for request paths, event-driven systems, pipelines, authentication flows, Kubernetes, and production architecture diagrams.
Quick StartGetting Started
Install Markdy, render your first scene, add the systems pack, and choose the right integration for docs, apps, or AI workflows.
GuidesBest Practices & Production Use
Practical guidance for readable scripts, architecture diagrams, phased reveals, docs-as-code, and production embedding.
ComparisonsMermaid, PlantUML, D2, Graphviz
When to choose Markdy over static diagramming tools, UI animation libraries, whiteboards, and video tools.
TroubleshootingFix Common Issues
Parse errors, unknown actions, overlapping nodes, animation timing, imports, packages, and rendering problems.
RoadmapFuture Content Strategy
High-value docs and comparison pages for developers searching around Mermaid, architecture diagrams, AI agents, and animation DSLs.
Demo Scenes
The scenes shown in the homepage playground — real, runnable .markdy files targeting architecture visualization and technical motion graphics.
Install the parser, DOM renderer, and systems pack
Use @markdy/core for parsing, @markdy/renderer-dom for browser playback, and @markdy/stdlib-systems for architecture diagrams.
npm i @markdy/core @markdy/renderer-dom @markdy/stdlib-systems