AWS Step Functions Workflow Designer

About this

• You can create an AWS step functions workflow with GUI on the browser.
• You can import/export a workflow definition with JSON/YAML.

This is a AWS Step Functions plugin for draw.io.

Introduction movie is below

Quick Start

1. Access to https://www.draw.io/.
2. Select Save Option (ex. Decide Later...)
3. Select Menu [Extras]-[Plugins]
4. Click [Add] and Click [Custom...]
5. Input https://cdn.jsdelivr.net/gh/sakazuki/[email protected]/dist/aws-step-functions.js
6. [Apply]
7. Reload the page

• Caution: This plugin does not work on https://app.diagrams.net/. so use this on https://www.draw.io.
  This seems to be due to the difference in security policy. See this comment for detail.

Example

1. Drag and drop a Start on a diagram
2. Drag and drop a Task on a diagram
3. Select Task, and click a Settings(gear) icon, and Input params
4. Drag a connection from Start to Task
5. Drag and drop a End on a diagram
6. Drag a connection from Task to End
7. Menu [StepFunctions]-[Export JSON]
8. Copy the output and paste it to AWS Step Functions management console.

Usage

Top-level fields

• You can set them with [Edit Data...] on a diagram.

AWS config

• You can select a function from lamdba when you input AWS config variables.

Choice Connection Condition field

• You can use ==, >, <, >=, <=, !, &&, ||, ().
• You can write it like ($.x == true) && ($.y == 3) && !($.z == 2).
• I parse it using JSEP (https://github.com/soney/jsep) in Choice Condition.

Retry

• Drag a connection from a state and Drop on self.

Weight fields

• This fields are used to define order (from big to small)

Feature

• You can put states that are not connected.
• You can use states that is normal shapes that draw.io provides.
• You can run locally draw.io in the browser too. See details draw.io Wiki page

Useful TIPS

• Put a inputed AWSconfig into [Scratchpad].
• Put a frequent useful pattern into [Scratchpad].

Direct version

1. Download binary from Releases page
2. Execute step-functions-app.exe or step-functions-app-macos
3. Select Save Option (ex. Decide Later...)
4. Select Menu [Extras]-[Plugins]
5. Click [Add]
6. Input https://cdn.jsdelivr.net/gh/sakazuki/[email protected]/aws-step-functions.js
7. [Apply]
8. Reload the page (Right click on a header part, and select reload menu.)

Advanced usage

git clone https://github.com/sakazuki/step-functions-draw.io.git
cd step-functions-draw.io
npm install
node carlo.js

# Select Menu [Extras]-[Plugins]
# Click [Add]
# Input https://localhost/aws-step-functions.js
# [Apply]
# Reload the page (Right click on a header part, and select reload menu.)

Version history

• https://cdn.jsdelivr.net/gh/sakazuki/[email protected]/dist/aws-step-functions.js
• https://cdn.jsdelivr.net/gh/sakazuki/[email protected]/dist/aws-step-functions.js
• https://cdn.jsdelivr.net/gh/sakazuki/[email protected]/dist/aws-step-functions.js
• https://cdn.jsdelivr.net/gh/sakazuki/[email protected]/dist/aws-step-functions.js
• https://cdn.jsdelivr.net/gh/sakazuki/[email protected]/dist/aws-step-functions.js
• https://cdn.jsdelivr.net/gh/sakazuki/[email protected]/dist/aws-step-functions.js
• https://cdn.jsdelivr.net/gh/sakazuki/[email protected]/dist/aws-step-functions.js
• https://cdn.jsdelivr.net/gh/sakazuki/[email protected]/aws-step-functions.js
• https://cdn.jsdelivr.net/gh/sakazuki/[email protected]/aws-step-functions.js