English | [简体中文](README.zh-CN.md)

# Seata Saga StateMachine Designer

A visual graph Seata Saga StateMachine Designer based on [GGEditor](https://github.com/alibaba/GGEditor).

## run

```sh
$ git clone https://github.com/seata/seata.git
$ cd saga/seata-saga-statemachine-designer
$ npm install
$ npm start
```

## build a package
```sh
$ cd saga/saga-statemachine-designer
$ npm run build
```

copy 'index.html' and 'dist' directory to static html directory of web server

## Usage
To understand the state types of the state machine, please see [document of Saga](https://seata.io/zh-cn/docs/user/saga.html). After using the designer to complete the design of the state machine, you can click the 'Json View' button on the toolbar to switch to the Json view, and save the Json to the project of your own application. Although the Json generated by the designer is different from the standard Json of the Saga state machine (because the json generated by the designer has layout information), the state machine can be directly loaded and it will be converted into the Json of the Saga state machine standard.
