本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 使用 AWS Step Functions Workflow Studio
<a name="stepfunctions-workflowstudio"></a>

下列各節說明如何在 中使用 AWS Step Functions Workflow Studio AWS Toolkit for Visual Studio Code。如需 AWS Step Functions Workflow Studio 的詳細資訊，請參閱《 *AWS Step Functions*開發人員指南》中的[開發工作流程](https://docs.aws.amazon.com//step-functions/latest/dg/developing-workflows.html)主題

## 開啟工作流程 Studio
<a name="w2aac17c55b9b5"></a>

以下清單說明您可以在 VS 程式碼中開啟 Workflow Studio 的不同路徑。

**注意**  
若要在 VS Code 中使用 Workflow Studio，包含狀態機器定義的 `Amazon State Language`(ASL) 檔案副檔名必須以 `asl.json`、 `asl.yml`或 結尾`asl.yaml`。如需在 AWS Toolkit 中下載或建立新的狀態機器定義的詳細資訊，請參閱本使用者指南的使用[AWS Step Functions](https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/building-stepfunctions.html)主題中的*下載狀態機器*和*建立狀態機器*章節。
+ 從 AWS Explorer 開啟包含狀態機器定義的`ASL`檔案的內容選單 （按一下滑鼠右鍵），然後選擇在 **Workflow Studio 中開啟**。
+ 從包含狀態機器定義的開啟`ASL`檔案中，選擇 VS Code 編輯器視窗中標籤旁邊的 **Open with Workflow Studio** 圖示。
+ 從包含狀態機器定義的開啟`ASL`檔案中，選擇位於檔案頂端的 CodeLens 命令 **Open with Workflow Studio**。
+ 關閉並重新開啟包含狀態機器定義的`ASL`檔案，會自動在 Workflow Studio 中重新開啟檔案，除非手動停用預設的 Workflow Studio。

## 設計模式和程式碼模式
<a name="w2aac17c55b9b7"></a>

Workflow Studio 有兩種模式可讓您使用包含狀態機器定義的`ASL`檔案：**設計**模式和**程式碼**模式。**設計**模式提供圖形界面，可讓您在建置原型時將工作流程視覺化。**程式碼**模式具有整合式程式碼編輯器，您可以在其中檢視、寫入和編輯工作流程中的`ASL`定義。

**注意**  
如需設計與程式碼模式中每個 UI 區段的詳細資訊，請參閱《 *AWS Step Functions*開發人員指南》中的[使用 Workflow Studio](https://docs.aws.amazon.com//step-functions/latest/dg/workflow-studio.html) 主題。並非所有 Workflow Studio 功能都可在 AWS Toolkit 中使用，例如 **Config 模式**。

**設計**模式 UI 有 7 個主要區段，如下圖所示和說明。

1. 模式按鈕：在**設計和****程式碼**模式之間切換的按鈕。

1. 公用程式按鈕：一組用於執行任務的按鈕，例如結束 Workflow Studio、儲存工作流程，或在 JSON 或 YAML 檔案中匯出`ASL`定義。

1. 設計工具列：工具列包含一組執行常見動作的按鈕，例如復原、刪除和縮放控制。

1. 狀態瀏覽器：包含工作流程畫布drag-and-drop狀態的瀏覽器。狀態會組織成索引標籤，並定義為**動作**、**流程**和**模式**。

1. Canvas 和工作流程圖表：工作流程的視覺化轉譯，您可以在其中捨棄、重組和選取組態狀態。

1. Inspector Panel：檢視和編輯畫布上選取之任何狀態的屬性。根據畫布工作流程圖表中選取的狀態，標籤會填入**組態**、**輸入/輸出**、**變數**和**錯誤處理**的狀態特定選項。

1. 資訊連結：當您需要協助時，開啟包含內容資訊的面板。這些面板也包含《 *AWS Step Functions*開發人員指南》中相關主題的連結。

![\[AWS 工具組中 Workflow Studio UI 的設計模式\]](http://docs.aws.amazon.com/zh_tw/toolkit-for-vscode/latest/userguide/images/SFNWFS022025.png)


## 在設計期間使用單一狀態測試
<a name="w2aac17c55b9b9"></a>

從 Workflow Studio 測試狀態 UI，您可以測試狀態機器的個別狀態。這包括提供狀態輸入、設定變數以及進行 AWS SAM 和 CloudFormation 定義替換的能力。

若要進一步了解基礎設施即程式碼 (IaC)、資源定義和轉換資料，請參閱《 *AWS Step Functions*開發人員指南》中的[使用 AWS SAM 建置 Step Functions 工作流程](https://docs.aws.amazon.com/step-functions/latest/dg/concepts-sam-sfn.html)和[使用 JSONata 轉換資料](https://docs.aws.amazon.com/step-functions/latest/dg/transforming-data.html)。

下列程序說明如何在 Workflow Studio 中開啟 test-state UI。

**開啟測試狀態 UI**

1. 從 Workflow Studio **的設計**模式索引標籤中，導覽至畫布，然後選擇狀態以在**檢查工具**面板中開啟。

1. 從**檢查器**面板中，選擇**測試狀態**按鈕。

1. **測試狀態** UI 會在 VS 程式碼中開啟。

測試狀態 UI 有 3 個主要索引標籤：**測試輸入**、**引數和輸出**、**狀態定義**。**測試輸入**索引標籤有 3 個額外的欄位，可讓您提供**狀態輸入**、設定**變數**，以及從 AWS SAM 或 CloudFormation 範本指定**定義替換**。在**狀態定義**索引標籤中，您可以調整工作流程並重新測試。完成測試後，您可以將變更套用並儲存到狀態機器定義。

下列螢幕擷取畫面顯示測試狀態 UI，其中包含主題資源定義。

![\[AWS 工具組中的 Workflow Studio 測試狀態 UI\]](http://docs.aws.amazon.com/zh_tw/toolkit-for-vscode/latest/userguide/images/SFNWFSteststate022025.png)


## 預設停用 Workflow Studio
<a name="w2aac17c55b9c11"></a>

根據預設，Workflow Studio 是包含狀態機器定義`ASL`之檔案的預設編輯器。您可以透過修改本機`.vscode`目錄中`settings.json`的檔案來停用預設設定。如果您預設停用 Workflow Studio，仍然可以透過本主題的*開啟工作流程 Studio* 區段中列出的方法來存取它。

若要從 VS 程式碼編輯`settings.json`檔案，請完成下列步驟。

1. 從 VS 程式碼中，按 **option\$1shift\$1p**(Mac) 或 **ctrl\$1shift\$1p**(Windows) **開啟命令調色盤**。

1. 從 VS Code **Command Palette** 中，**Open User Settings (JSON)**在搜尋欄位中輸入 ，然後在填入清單中時選擇 選項。

1. 在編輯器`settings.json`中的 中，將下列修改新增至您的 檔案。

   ```
                   {
                       "workbench.editorAssociations": {
                       // Use all the following overrides or a specific one for a certain file type        
                       "*.asl.json": "default",
                       "*.asl.yaml": "default",
                       "*.asl.yml": "default"
                       }
                   }
   ```

1. 將變更儲存至 `settings.json`，然後重新整理或重新啟動 VS 程式碼。