A modern React application for designing and visualizing finite state machines, pushdown automata, and Turing machines by Phal Sovandy.
- Interactive Canvas: Draw and edit automata with an intuitive drag-and-drop interface
- Multiple Automata Types: Support for DFA, NFA, PDA, and Turing machines
- Export Options: Export diagrams as PNG, SVG, LaTeX, or JSON
- Import/Export: Full backup and restore functionality
- Dark/Light Theme: Modern UI with theme switching
- Keyboard Shortcuts: Efficient workflow with comprehensive shortcuts
- Local Storage: All data stored locally using IndexedDB
Automata-Drawing-Tools/
├── public/ # Public assets (copied to build)
│ ├── assets/
│ │ └── images/ # Static images (HTML references)
│ │ └── repo_cover.jpeg # Repository cover image
│ ├── favicon_icon.png # Site favicon (HTML reference)
│ ├── favicon.ico # Site favicon (fallback)
│ ├── manifest.json # PWA manifest
│ ├── robots.txt # SEO robots file
│ └── sitemap.xml # SEO sitemap
├── src/
│ ├── assets/
│ │ └── images/ # Images and icons (imported as ES modules)
│ │ ├── canvas-walkthrough/ # Canvas guide images (canvas_guide_*.png)
│ │ ├── homepage-walkthrough/ # Homepage guide images (home_guide_*.png)
│ │ └── bmc_logo.svg # BuyMeACoffee logo
│ ├── components/ # React components
│ │ ├── layout/ # Layout components
│ │ │ ├── HomePage.jsx
│ │ │ ├── Sidebar.jsx
│ │ │ └── TopNavigation.jsx
│ │ ├── modals/ # Modal components
│ │ │ ├── AboutModal.jsx
│ │ │ ├── CanvasWalkthroughModal.jsx
│ │ │ ├── ConfirmationModal.jsx
│ │ │ ├── EditDiagramModal.jsx
│ │ │ ├── ExportModal.jsx
│ │ │ ├── HomePageWalkthroughModal.jsx
│ │ │ ├── ImportJSONModal.jsx
│ │ │ ├── ImportOptionsModal.jsx
│ │ │ ├── NewDiagramModal.jsx
│ │ │ ├── SettingsModal.jsx
│ │ │ └── ShortcutsModal.jsx
│ │ ├── ui/ # UI components
│ │ │ ├── ColorPicker.jsx
│ │ │ ├── Dropdown.jsx
│ │ │ ├── LoadingSpinner.jsx
│ │ │ ├── OperationAlerts.jsx
│ │ │ └── SavingStatus.jsx
│ │ ├── Canvas.jsx # Main canvas component
│ │ └── DotGrid.jsx # Grid component
│ ├── context/ # React context
│ │ └── FSMContext.jsx # Main state management
│ ├── styles/ # CSS styles
│ │ ├── base/ # Base styles
│ │ ├── components/ # Component-specific styles
│ │ ├── themes/ # Theme definitions
│ │ ├── utilities/ # Utility classes
│ │ └── index.css # Main stylesheet
│ ├── utils/ # Utility functions
│ │ ├── ExportUtils.jsx # Export functionality
│ │ ├── FSMClasses.jsx # Automata classes
│ │ ├── IndexedDBUtils.js # Database utilities
│ │ └── shortcuts.js # Keyboard shortcuts
│ ├── App.jsx # Main app component
│ └── index.jsx # Entry point
├── .editorconfig # Editor configuration
├── .gitignore # Git ignore rules
├── index.html # HTML template
├── package.json # Dependencies and scripts
└── vite.config.js # Vite configuration
-
Clone the repository
git clone https://github.com/Phal-Sovandy/Automata-Drawing-Tool.git cd Automata-Drawing-Tool -
Install dependencies
npm install
-
Start development server
npm run dev
-
Build for production
npm run build
- Click "Create New Diagram" on the homepage
- Choose your automata type (DFA, NFA, PDA, Turing Machine)
- Add states by double clicking on the canvas
- Connect states with transitions
- Set start and accept states
- PNG: High-resolution image export
- SVG: Vector graphics for web use
- LaTeX: For academic papers and documents
- JSON: For backup and sharing
Update the following files with your information:
package.json: Author and descriptionsrc/components/layout/HomePage.jsx: Name and linkssrc/components/modals/AboutModal.jsx: Social media linkssrc/context/FSMContext.jsx: Export metadata
- Modify
src/styles/themes/colors.cssfor color schemes - Update
src/styles/components/for component-specific styles - Add new themes in
src/styles/themes/
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License Summary:
- Commercial Use: You can use this software in commercial projects
- Modification: You can modify the software
- Distribution: You can distribute the software
- Private Use: You can use the software privately
- Attribution Required: You must include the original copyright notice
- No Warranty: The software is provided "as is" without warranty
What this means:
- You can use Automata Drawing Tools in your own projects
- You can modify and customize it for your needs
- You can distribute it to others
- You must keep the copyright notice and license text
- You cannot hold the author liable for any issues
Phal Sovandy
- GitHub: @Phal-Sovandy
- LinkedIn: sovandy-phal-382069331
- React team for the amazing framework
- Vite for the fast build tool
- Font Awesome for the icons
- Cursor AI for development assistance and code generation
- All contributors and users
Made with dedication by Phal Sovandy