Automatically Generating Visual Modeling Environments

Reproducibility Package forAutomatically Generating Visual Modeling Environments Abstract We present Model2Block, a command line application that automatically generates Blockly-based visual interfaces from Ecore metamodels. The tool analyzes an input metamodel and produces a corresponding set of Blockly blocks, which are then integrated into a web-based environment. This enables users to build applications visually using blocks that represent valid model elements, ensuring conformance to the original Ecore structure. Although the current implementation focuses on visual model construction, it does not yet support automated code generation. As a result, any translation from the visual model to executable code, such as through Acceleo templates, must currently be performed manually. In future work, we plan to enhance the tool by incorporating support for loading existing Acceleo templates and enabling code generation directly from the visual models. We also aim to support multiple metamodels, implement ATL transformations between different models, and add validation through OCL constraints. Additional customization options for the generated blocks and interfaces are also envisioned. These improvements will broaden the tool’s applicability and streamline the model-driven development workflow, building on our current foundation of valid model visualization and construction. We include in this package the metamodels used for validation, as well as the Blockly JSON files automatically generated from the metamodel using our tool. These files are located in the “metamodels” and “tests” folders, respectively. Metamodel to Blockly Generator Convert Ecore metamodels into Blockly blocks with: TSX React components generation Interactive web editor Stable color generation TypeScript type safety Installation Requirements Python 3.8+ pip Node.js and Yarn (for web output) Steps Clone this repository: git clone https://github.com/your-org/model2block.git cd model2block Install Python dependencies: pip install -r requirements.txt Usage Generate TSX Blocks Generate only the TSX components for integration into a React app: python Model2Block.py --output tsx your_metamodel.ecore Generate Web Editor Generate a full Blockly-based web editor: python Model2Block.py --output web your_metamodel.ecore This creates a React app under:generated/[modelname]-visualci Running the Web Editor Navigate to the generated app: cd generated/[modelname]-visualci Install dependencies (first time only): yarn install Start the development server: yarn start Open your browser to:http://localhost:3000 Using the Blockly Editor Drag blocks from the toolbox to the canvas Connect blocks to form valid models Use Export XML to save the model Use Clear to reset the workspace Features 🎨 Stable Colors: Deterministic color mapping using CRC32 🧩 Typed Blocks: Generates strongly typed TSX components 🧑‍💻 React + Blockly: Web editor with live model-building 🔗 Ecore Relationship Support: Handles references and containments Quick Start pip install -r requirements.txt python Model2Block.py --output web your_metamodel.ecore cd generated/yourmodel-visualci yarn install yarn start Command Line Options python Model2Block.py [OPTIONS] <metamodel> <metamodel>: Path to your .ecore file Options: --output {web,json,tsx} web: full Blockly + React project tsx: TSX components only json: raw Blockly block definitions -h, --help: Show help message Examples Generate only TSX blocks python Model2Block.py --output tsx model.ecore Generate full web-based editor python Model2Block.py --output web model.ecore Output Structure 📄 JSON Output: blockly_editor.json: Raw block definitions 📦 TSX Output: generated/[modelname]-blocks.tsx: React-compatible components 🌐 Web Output: generated/[modelname]-visualci: Standalone Blockly web editor Development Customize Block Generation Edit the logic in: create_block_from_class.py Adjust: Block structure templates Color assignments Input/output wiring Future Work Planned enhancements: ✅ Support Acceleo template loading and direct code generation 🔁 ATL transformation support between models ✅ OCL constraint validation in the editor 🔧 Customization options for blocks & UI 🧩 Multi-metamodel support