Skip to content
You can make a AWS step functions workflow with GUI and export/import JSON/YAML.
TypeScript JavaScript
Branch: master
Clone or download
Latest commit 352ab37 Sep 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist fix the position shifted bug Sep 23, 2019
examples update shape, add buleprint Feb 11, 2017
src fix the position shifted bug Sep 23, 2019
.eslintignore refactoring with webpack+typescript+eslint Sep 22, 2019
.eslintrc.json support map state (#30) Sep 22, 2019
.gitignore
LICENSE append LICENSE Feb 12, 2017
README.md 0.5.1 release Sep 23, 2019
carlo.js refactoring with webpack+typescript+eslint Sep 22, 2019
package-lock.json refactoring with webpack+typescript+eslint Sep 22, 2019
package.json refactoring with webpack+typescript+eslint Sep 22, 2019
tsconfig.json refactoring with webpack+typescript+eslint Sep 22, 2019
webpack.config.js refactoring with webpack+typescript+eslint Sep 22, 2019

README.md

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
Intro Movie

Quick Start

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

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.

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/step-functions-draw.io@0.4.3/aws-step-functions.js
  7. [Apply]
  8. Reload the page (Right click on a header part, and select reload menu.)

Version history

You can’t perform that action at this time.