State Machine Visualizer is a React application that allows you to visualize state machines defined in YAML. It features a code editor with YAML syntax highlighting and dynamically updates the state machine graph as you edit the YAML content.
- YAML Syntax Highlighting: Edit your state machine definitions with a Monaco Editor that provides YAML syntax highlighting.
- Real-Time Graph Rendering: Automatically updates the state machine graph as you edit the YAML content.
- Simple and Intuitive UI: A clean and easy-to-use interface to visualize complex state machines.
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
- Node.js (v12 or later)
- npm (v6 or later)
-
Clone the repository:
git clone https://github.com/yourusername/state-machine-visualizer.git cd state-machine-visualizer -
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open your browser and navigate to
http://localhost:3000to see the application in action.
- Edit the YAML content in the editor on the left side of the screen.
- The state machine graph on the right side will automatically update to reflect the changes.
Here is an example of a state machine definition in YAML:
state_machine:
states:
- name: created
events:
- name: add_data
next_state: in_progress
handlers:
success: operation_handle_data
failure: operation_rejected
- name: in_progress
events:
- name: completed
next_state: succeeded
handlers:
success: operation_completed
failure: operation_rejected
- name: error
next_state: fail
handlers:
success: operation_ended_with_error
failure: operation_rejected
- name: succeeded
events: []
- name: fail
events: []- React - A JavaScript library for building user interfaces
- Monaco Editor - The code editor that powers VS Code
- Mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown
- js-yaml - YAML 1.2 parser and serializer
Contributions are welcome! Please open an issue or submit a pull request if you have any suggestions or improvements.
This project is licensed under the MIT License - see the LICENSE file for details.
- Thanks to the developers of React, Monaco Editor, Mermaid, and js-yaml for their fantastic libraries.