|
1 | 1 | #FSM Engine |
2 | | -Create and Manage Finite State Machines |
3 | 2 |
|
4 | | -##To run |
5 | | -- Clone the repo |
6 | | -```bash |
7 | | -git clone https://github.com/karthik-saiharsh/fsm-engine.git |
8 | | -``` |
| 3 | +A web-based tool for creating, visualizing, and managing Finite State Machines (FSMs). Built with React, TypeScript, and Konva for an interactive canvas experience. |
| 4 | + |
| 5 | +![FSM Engine]() |
| 6 | + |
| 7 | +##Features |
| 8 | + |
| 9 | +-**Interactive Canvas Editor**: Create and manipulate FSMs on a zoomable, pannable canvas. |
| 10 | +-**Multiple Modes**: |
| 11 | +-**Create**: Click on the canvas to add new states. |
| 12 | +-**Select**: Drag states to reposition them. |
| 13 | +-**Connect**: Click two states to create a directed transition. Supports self-loops. |
| 14 | +-**Delete**: Remove states with a single click. |
| 15 | +-**Grab**: Pan across the canvas to navigate your diagram. |
| 16 | +-**State Types**: Differentiate between`initial`,`intermediate`, and`final` states, each with a distinct visual representation. |
| 17 | +-**Dynamic Transitions**: Arrows automatically adjust their position and curve as you move states. |
| 18 | +-**Atomic State Management**: Uses Jotai for a predictable and efficient state model. |
9 | 19 |
|
10 | | -- Install Dependencies |
11 | | -```bash |
12 | | -pnpm i |
| 20 | +##Tech Stack |
| 21 | + |
| 22 | +-**Frontend**:[React](https://reactjs.org/) with[TypeScript](https://www.typescriptlang.org/) |
| 23 | +-**Build Tool**:[Vite](https://vitejs.dev/) |
| 24 | +-**State Management**:[Jotai](https://jotai.org/) |
| 25 | +-**Canvas Rendering**:[React Konva](https://konvajs.org/docs/react/index.html) |
| 26 | +-**Styling**: Tailwindcss |
| 27 | + |
| 28 | +##Project Structure |
| 29 | + |
| 30 | +``` |
| 31 | +src/ |
| 32 | +├── App.tsx # Main application component |
| 33 | +├── main.tsx # React entry point |
| 34 | +├── index.css # Global styles |
| 35 | +├── components/ |
| 36 | +│ ├── Editor.tsx # The core canvas and logic for FSM manipulation |
| 37 | +│ ├── Dock.tsx # UI for switching between editor modes |
| 38 | +│ ├── Settings.tsx # Panel for adjusting state properties |
| 39 | +│ └── ... # Other UI components |
| 40 | +└── lib/ |
| 41 | + └── backend.ts # Jotai atoms and type definitions for global state |
13 | 42 | ``` |
14 | 43 |
|
15 | | -- Run the App |
16 | | -```bash |
17 | | -pnpm dev |
18 | | -``` |
| 44 | +##How to Run |
| 45 | + |
| 46 | +1.**Clone the repository:** |
| 47 | +```bash |
| 48 | + git clone https://github.com/karthik-saiharsh/fsm-engine.git |
| 49 | +cd fsm-engine |
| 50 | + ``` |
| 51 | + |
| 52 | +2.**Install Dependencies:** |
| 53 | +*(Requires [pnpm](https://pnpm.io/))* |
| 54 | +```bash |
| 55 | + pnpm install |
| 56 | +``` |
| 57 | + |
| 58 | +3.**Run the Development Server:** |
| 59 | +```bash |
| 60 | + pnpm dev |
| 61 | +``` |
| 62 | + The application will be available at`http://localhost:5173`. |
| 63 | + |
| 64 | +## How to Use |
| 65 | + |
| 66 | +1.**Select a mode** from the dock at the bottom of the screen. |
| 67 | +2.**Create Mode**: Click anywhere on the canvas to add a state. The first state is automaticallyset as the`initial` state. |
| 68 | +3.**Connect Mode**: Click on asource state,then a destination state, to draw a transition arrow. Clicking the same state twice creates a self-loop. |
| 69 | +4.**Select Mode**: Click and drag any state to move it. Transitions will update automatically. |
| 70 | +5.**Delete Mode**: Click on a state to remove it. |
| 71 | + |
| 72 | +## Future Roadmap |
| 73 | + |
| 74 | +- [ ] Add labels to transitions. |
| 75 | +- [ ] Implement an"Undo/Redo" feature. |
| 76 | +- [ ] Export the FSM to JSON or an image format (PNG/SVG). |
| 77 | +- [ ] Import an FSM from a JSON file. |
| 78 | +- [ ] Implement algorithm to Automatically convert a NFA to a DFA |
| 79 | +- [ ] Implement algorithm to Automatically convert a NFA to a DFA |
| 80 | +- [ ] Add supportfor various types of FSMs like Meelay and Moore Machines |