# VS Code extension

[![VS Code Marketplace](https://img.shields.io/visual-studio-marketplace/v/yusufaf.vscode-sfn-diagram?label=marketplace)](https://marketplace.visualstudio.com/items?itemName=yusufaf.vscode-sfn-diagram)
[![Installs](https://img.shields.io/visual-studio-marketplace/i/yusufaf.vscode-sfn-diagram)](https://marketplace.visualstudio.com/items?itemName=yusufaf.vscode-sfn-diagram)
[![Open VSX](https://img.shields.io/open-vsx/v/yusufaf/vscode-sfn-diagram?label=open%20vsx)](https://open-vsx.org/extension/yusufaf/vscode-sfn-diagram)

Preview Step Functions diagrams directly inside your editor. Source in [`packages/vscode-sfn-diagram/`](https://github.com/yusufaf/sfn-diagram/tree/main/packages/vscode-sfn-diagram/).

**Install:** search for **Step Functions Diagram** in the Extensions panel, or:
```bash
code --install-extension yusufaf.vscode-sfn-diagram
```

Published to both the VS Code Marketplace and [Open VSX](https://open-vsx.org/extension/yusufaf/vscode-sfn-diagram), so the Extensions panel finds it in **Cursor, Windsurf, VSCodium, Gitpod, and Eclipse Theia** as well.

**Usage:** Open any `.json` or `.asl` file and run **Step Functions: Preview Step Functions Diagram** from the command palette, or click the diagram icon in the editor title bar.