VhyxChart for VS Code

Animated diagrams that live next to your code.

• Markdown preview: ```vhyx fences render as live, animated players in VS Code's built-in Markdown preview (Ctrl/Cmd+Shift+V). Optionally render existing compatible diagram fences too (vhyxchart.renderCompatibleFences).
• .vhyx files: syntax highlighting, snippets (flow, seq, array, scenario), folding, and Open Animated Preview to the Side (Ctrl/Cmd+K V) that updates as you type.
• Inline errors: diagram mistakes are underlined with the exact line and a suggested fix — in .vhyx files and inside Markdown fences.
• Export: VhyxChart: Export Animated SVG (plays on GitHub, in <img>, Notion) and VhyxChart: Export Interactive HTML.

flowchart LR
  client([Browser]) --> api[API] --> db[(Postgres)]

scenario Request
  client -> api : GET /items
  api is active
  api -> db
  db is done
  api -> client : 200
  api is done

Install

• Cursor, VSCodium, Windsurf: search for VhyxChart in the Extensions view, or see Open VSX.
• VS Code: download the .vsix and run Extensions: Install from VSIX….

Settings

Build locally

pnpm --filter vhyxchart-vscode build
cd packages/vscode && npx @vscode/vsce package --no-dependencies
code --install-extension vhyxchart-vscode-0.1.1.vsix