Development View
The Development View describes the system's software organization, including module structure, package dependencies, and layering.
Component Diagram - System Architecture
High-level component organization and dependencies.
Package Diagram - Module Structure
Detailed package organization with dependencies.
Layer Diagram - Architectural Layers
Clear separation of concerns across layers.
Dependency Graph - Module Dependencies
Internal module dependencies and import relationships.
Technology Stack Diagram
External dependencies and their roles.
File Structure
fla--/
├── src/
│ ├── app.tsx # Root application component
│ ├── entry-client.tsx # Client entry point
│ ├── entry-server.tsx # Server entry point
│ ├── authStore.ts # Global auth state
│ │
│ ├── routes/ # File-based routing
│ │ ├── index.tsx # Home page
│ │ ├── editor.tsx # TM Editor page
│ │ ├── login.tsx # Login page
│ │ ├── about.tsx # About page
│ │ ├── [...404].tsx # 404 handler
│ │ └── api/
│ │ └── auth/
│ │ └── [...all].ts # Auth API routes
│ │
│ ├── components/ # Reusable UI components
│ │ ├── DiagramView.tsx # Canvas diagram editor
│ │ ├── CodeEditor.tsx # Code panel container
│ │ ├── Toolbar.tsx # Simulation controls
│ │ ├── tmParser.tsx # CodeMirror wrapper
│ │ ├── TransitionPanel.tsx # Transition form
│ │ └── Counter.tsx # Demo component
│ │
│ ├── store/ # State management
│ │ ├── machineStore.ts # Machine state store
│ │ └── codegen.ts # Code generation
│ │
│ ├── engine/ # Core TM logic
│ │ ├── types.ts # Type definitions
│ │ ├── parser.ts # DSL parser
│ │ └── simulator.ts # TM simulator
│ │
│ ├── lib/ # Utilities
│ │ ├── auth.ts # Server auth config
│ │ ├── auth-client.ts # Client auth
│ │ └── types.ts # Shared types
│ │
│ └── css/ # Styles
│ └── retro.css # Retro theme
│
├── public/ # Static assets
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript config
└── package.json # Dependencies