DOI: 10.5281/zenodo.17438001
title: Automatically Generating Visual Modeling Environments

description: 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