Markdy for Visual Studio Code & Cursor

Markdy for VS Code & Cursor

The official diagram-as-code extension for animated architecture & system design diagrams.
Write declarative MarkdyScript → preview silky-smooth 60fps kinetic animations in real time next to your code.

⚡ Web Studio • 📖 Full Docs • 🌟 29+ Examples • 🐙 GitHub Repo

Markdy Live Animated Preview

⚡ Quick Start (60 Seconds)

Install: Search for Markdy in the Extensions view (Cmd+Shift+X / Ctrl+Shift+X) or run:
```
code --install-extension hoangyell.markdy-vscode
```
Create Diagram: Create system.markdy (or run Markdy: Insert Architecture Template...).
Open Preview: Press Cmd+K V (macOS) or Ctrl+K V (Windows/Linux) to open the side-by-side animated live preview.

scene "Cloud Architecture" theme=midnight
layout LR

browser Client "Global User"
gateway ApiGateway "Kong Gateway"
service AuthService "Auth Service"
database MainDB "PostgreSQL 16"
queue TaskQueue "Kafka Stream"

beat auth "1. Authentication Flow":
  show $nodes stagger=60ms
  frame Client ApiGateway AuthService zoom=1.12
  Client -> ApiGateway "POST /login" -> AuthService "validate JWT"
  AuthService -> MainDB "SELECT credentials"
  AuthService <- MainDB "user record"
  Client <- ApiGateway "200 OK (JWT Token)"

beat async_job "2. Async Background Task":
  frame ApiGateway TaskQueue zoom=1.15
  ApiGateway ~> TaskQueue "dispatch event"
  glow TaskQueue color=#38bdf8

✨ Key Features

🎬 Side-by-Side Live Preview: 60fps Web Animations API preview with playback speed (0.5x–2.0x) and beat steppers (⏮ / ⏭).
⚡ IntelliCode & Linter: Real-time architecture governance rules, typo QuickFixes (💡 Fix), and one-click auto-repair.
📐 Format on Save (Shift+Alt+F): AST-aware document formatting.
🔄 Universal Ingestion: Right-click .mermaid, docker-compose.yml, *.tfstate, or *.drawio to transpile to Markdy.
🖼️ Multi-Format Exports: Export to vector SVG or high-res PNG, or copy directly to clipboard.
🌟 Curated Templates: 1-click scaffolding for Microservices, Kafka, Kubernetes, Lakehouses, and OAuth PKCE.
🤖 AI Prompt Assistant: Export context-rich LLM prompt bundles ready for Cursor, Claude, Copilot, or ChatGPT.
📄 Markdown / MDX CodeLens: Interactive [▶ Preview] buttons above ````markdy` blocks in documentation.
🔒 100% Offline & Private: Zero network dependencies, zero telemetry.

⌨️ Command Palette & Shortcuts

Commands (`Cmd+Shift+P` / `Ctrl+Shift+P`)

Command	Keybinding	Description
`Markdy: Live Preview`	`Cmd+K V` / `Ctrl+K V`	Opens live animated preview panel beside editor
`Format Document`	`Shift+Alt+F`	AST-aware document formatting
`Markdy: Export SVG`	—	Exports vector `.svg` diagram
`Markdy: Export PNG`	—	Exports high-resolution `.png` image
`Markdy: Copy SVG`	—	Copies raw vector SVG XML to clipboard
`Markdy: Copy PNG`	—	Copies PNG Data URL to clipboard
`Markdy: Insert Template...`	—	Scaffolds curated architecture models at cursor
`Markdy: New From Template...`	—	Creates a new `.markdy` document from template
`Markdy: AI Prompt Helper`	—	Compiles LLM prompt bundle with AST & rules
`Markdy: Import Diagram...`	—	Transpiles Mermaid, Compose, K8s, Terraform, or Draw.io
`Markdy: Open in Web Studio`	—	Opens diagram in browser at markdy.com/playground
`Markdy: Copy Web Link`	—	Copies compressed playground link to clipboard
`Markdy: Restart Server`	—	Restarts background language server worker

Preview Panel Keyboard Shortcuts

When the Preview panel is focused:

Key	Action
`Space` / `K`	Play / Pause animation
`R`	Restart animation from beginning
`←` / `J`	Previous narrative beat
`→` / `L`	Next narrative beat
`F`	Fit view / reset viewport transforms
`S`	Cycle playback speed (`0.5x` → `1.0x` → `1.5x` → `2.0x`)
`T`	Cycle official theme (`midnight`, `paper`, `blueprint`, `nebula`, etc.)

Right-click anywhere in a .markdy editor or in the Explorer tree to open the nested Markdy > submenu:

Right-click ──▶ Markdy ▶ ──┬── Live Preview
                           ├── Insert Template...
                           ├── AI Prompt Helper
                           ├── ───────────────────────
                           ├── Export SVG / PNG
                           ├── Copy SVG / PNG
                           ├── ───────────────────────
                           ├── Open in Web Studio
                           ├── Copy Web Link
                           └── Import Diagram...

⚙️ Extension Settings

Setting	Default	Options / Description
`markdy.preview.theme`	`"auto"`	`"auto"`, `"midnight"`, `"paper"`, `"blueprint"`, `"nebula"`, `"editorial"`, `"graphite"`, `"terminal"`, `"sketchy"`
`markdy.preview.autoplay`	`true`	Automatically play diagram animations when preview opens
`markdy.preview.loop`	`true`	Continuously loop diagram animations
`markdy.preview.progressBar`	`true`	Show interactive timeline scrubber and progress bar
`markdy.trace.server`	`"off"`	`"off"`, `"messages"`, `"verbose"` — language server tracing

Markdy: Animated Architecture Diagrams

HoangYell

Markdy for Visual Studio Code & Cursor

Markdy for VS Code & Cursor

⚡ Quick Start (60 Seconds)

✨ Key Features

⌨️ Command Palette & Shortcuts

Commands (`Cmd+Shift+P` / `Ctrl+Shift+P`)

Preview Panel Keyboard Shortcuts

🖱️ Right-Click Context Menu

⚙️ Extension Settings

📄 License

Markdy: Animated Architecture Diagrams

HoangYell

Markdy for Visual Studio Code & Cursor

Markdy for VS Code & Cursor

⚡ Quick Start (60 Seconds)

✨ Key Features

⌨️ Command Palette & Shortcuts

Commands (Cmd+Shift+P / Ctrl+Shift+P)

Preview Panel Keyboard Shortcuts

🖱️ Right-Click Context Menu

⚙️ Extension Settings

📄 License

Commands (`Cmd+Shift+P` / `Ctrl+Shift+P`)