stepfunctions-visualizer

# stepfunctions-visualizer

AWS Step Functions定義（JSON）を視覚化するスキル

## 使い方

```
/stepfunctions-visualizer <path-to-stepfunctions.json> [format]
```

## パラメータ

- `<path-to-stepfunctions.json>`: Step Functions定義JSONファイルのパス（必須）
- `[format]`: 出力形式（省略可、デフォルト: `all`）
  - `mermaid`: Mermaidフローチャート形式
  - `html`: HTML + vis.js インタラクティブ可視化
  - `text`: テキストツリー形式
  - `all`: すべての形式で出力

## 出力ファイル

プロジェクトルートの `images/` ディレクトリに以下のファイルが生成されます：

- `images/{basename}.md`: Mermaidフローチャート（Markdown Preview Mermaid Support拡張機能で表示可能）
- `images/{basename}.html`: HTML可視化（ブラウザで開く）
- `images/{basename}-tree.txt`: テキストツリー

※ `images` フォルダが存在しない場合は自動的に作成されます。

## 機能

- ステートタイプ別の色分け
  - Task: 青
  - Choice: オレンジ
  - Pass/Succeed: 緑
  - Wait: オレンジ
  - Fail: 赤
- Next/Choice/Catch遷移の可視化
- エラーハンドリング（Catch）は点線で表示
- 縦方向レイアウト（Top to Down）
- 統計情報の表示

## 例

```
/stepfunctions-visualizer /path/to/state-machine.json
/stepfunctions-visualizer /path/to/state-machine.json mermaid
/stepfunctions-visualizer /path/to/state-machine.json html
```

## 作成者

BanquetKuma