Open-source Modelling tool with Graphical Diagram Editor using Cyclic Entity-based Modeling and Metamodelling capabilities.
- Mimris-Modeling-App 🎨
- Mimris
- Develop branch used for deployment of beta versjon
A modelling language is an artificial, formal language designed to express data, information, or knowledge in a structured and consistent manner. Each modelling language adheres to a clearly defined set of rules that govern its syntax and semantics.
In Mimris, the modelling language is graphical in nature, providing a visual means of representing complex information and relationships.
A metamodel is a model that defines the structure and semantics of a modelling language. In practice, the term metamodel is often used interchangeably with modelling language, although the metamodel technically describes the language rather than using it. This distinction is crucial for understanding how to create and utilize custom modelling languages within Mimris.
In textual modelling languages, we typically speak in terms of nouns (entities) and verbs (actions or relationships). In a graphical modelling language such as Mimris, the corresponding terms are objects and relationships. This shift from textual to graphical representation allows for a more intuitive and visual approach to modelling complex systems.
The modelling language used within Mimris to define new, custom modelling languages is called CORE_META. CORE_META provides a set of modelling primitives that enable users to define custom object types (analogous to nouns) and relationship types (analogous to verbs), along with associated properties and methods.
Once these custom types are specified (modelled), users can invoke the “Generate Metamodel” function to automatically produce their own metamodel. These metamodels—essentially new, domain-specific modelling languages—can then be used as the foundation for creating custom models tailored to specific needs or contexts.
By leveraging CORE_META, users can develop highly specialized modelling languages that cater to the unique requirements of their projects, ensuring a more precise and effective modelling process.
The Mimris version of the BPMN Metamodel as shown below is rather advanced. It utilizes inheritance from an abstract object type (Gateway), relationships to and from the abstract type, in addition to relationships between non-abstract object types (Start, Task, End).
In addition it utilizes the “template2” field in the object and relationship views. This to achieve a completely different visualization of objects and relationships in the models built using the generated template than in the metamodel itself.
Below is shown an example model built using a template generated from the metamodel above.
- Frontend Framework: Next.js 13 (Page Router)
- Language: TypeScript 5+
- Diagram Library: GoJS 3.0
- State Management: Redux
- Rendering: React
- Build System: npm
- Styling: Bootstrap and ReactStrap, CSS
- Basic Knowledge graph
- Object/node Relationship/edge arrays based on types defined in Metamodel with Objecttype and Relationshiptypes.
- 📐 GoJS-Powered Node Editor
- Objectview and Relationship in Modelviews(diagrams) for pr 8000 esentation of views.
- Advanced Relationship/link routing and automatic layout.
- Objectviewstyles to define visualisation of objects and relationships.
- Next.js Optimized Rendering
- Redux State Syncing
- Real-time collaboration through state synchronization
- Time-travel debugging capabilities
- Type-Safe Development
- Strict TypeScript configuration
- Generated API types from OpenAPI spe
- Customizable templates & components
- Web based Cross-platform support (Windows/Linux/macOS)
- **Clone repository
# Clone the repository
git clone https://github.com/Mimris/mimris.git
cd mimris
```bash
- **Install dependencies
```bash
# Install with npm
npm install- **Launch development mode
# Start the development server
npm run dev- Node.js
- npm
- Next.js
- GoJS
See INSTALLATION.md for detailed instructions.
- Drag Objecttypes from the Palette in to the modelling area
- Connect nodes using relationships. Click on the obects edge and drag to another object to create a relationship
- Arrange the objects in the modelling area by dragging them to the desired position and arrange them in Containers.
- Click on the Hamburger menu in the top left corner to open the menu to Save, Export or Import a model.
/public - Static files
/docs - Documentation files
/src
/components - React components
/utils - Utility functions
/hooks - Custom hooks
/styles - CSS styles
/Mimris - Mimris modules
/pages - Next.js pages
/api - API routes
/helpblogs - Help blogs
/posts - Blog posts
/reducers - Redux reducers
/store - Redux store
/saga - Redux saga
/defs - ?
/modelProjects - Model projects
npm test (no tests implemented yet)initialState = {
phData, // Metamodel and Model data
phFocus, // Current focus data. i.e. focusModel, focusModelview, focusObjectvieiw etx.
phUser, // User preferences
phSource, // Sourcefile (local or github)
lastUpdate: new Date().toISOString()
}// lib/gojsConfig.ts
import * as go from 'gojs';
export function initializeDiagram(): go.Diagram {
const $ = go.GraphObject.make;
return $(go.Diagram, {
'undoManager.isEnabled': true,
layout: $(go.ForceDirectedLayout),
model: $(go.GraphLinksModel, {
linkKeyProperty: 'key'
})
});
}
// Custom node template
export const nodeTemplate = (
<Node
locationSpot={go.Spot.Center}
selectionAdorned={true}
>
<Shape
figure="Rectangle"
fill="#2F80ED"
strokeWidth={0}
/>
<TextBlock
text="{name}"
margin={8}
stroke="white"
/>
</Node>
);We welcome contributions to the Mimris Modelling App! Whether you're fixing bugs, adding features, or improving documentation, your help is appreciated. We welcome contributions under these guidelines:
- Clone the repository
- Create a feature branch
- Submit a pull request
Review our CONTRIBUTING GUIDE before submitting code.
Priority Areas:
- 🐛 Bug fixes
- 📖 Documentation improvements
- 🔒 Security enhancements
- 🧩 Migrate from Redux to Redux Toolkit
- 🧩 Migrate from Bootstrap CSS to TailwindCSS and Shadch
- 🧩 Enhance GoJS Dialogs and Menus (Shadcn?)
- 🧩 Add more examples and documentation
- 🧩 Add tests
- 🧩 Add more components
- 🧩 Add more features
- 🧩 Add more templates
- 🧩 Add more themes
- 🧩 Add more Metamodels
- 🧩 Add more modelling tools
- 🧩 Add more modelling languages
- 🧩 Add more modelling paradigms/metamodels
- 🧩 Add more modelling techniques
- 🧩 Add more modelling methods
- 🧩 Add more modelling frameworks
- 🧩 Add more modelling standards
This project is licensed under the GNU General Public License v3.0 - see LICENSE file for details.
Key License Requirements:
- All derivative works must remain open-source
- Modifications must be clearly marked
- Source code must be distributed with any binaries
Maintained by [Mimris]
Mimris is the tool for building Active Knowledge Models, a modelling tool with integrated Use-case Modeling and Meta-modelling capabilities.
Its build on some of the same concepts implemented I Metis (1985-2007) which was written in C++. Mimris is written in JavaScript and TypeScript, using libraries like: Next.js, React, Redux, Gojs ....
Mimris is a collection of functions and components written in TypeScript and React for this Modelling application. There are two main code parts:
-
Mimris code This code is JavaScript/TypeScript Object-oriented programming and is handling all Mimris modelling parts, i.e. the the model, modelview, object- relationship, objectview- relationshipview, and the integration with GOJS graphical diagram library. The main principal for Mimris modelling is that the model has a collection of Objects and Relationships. Wi have modelviews that has collection of Objectviews and Reltationshipviews that refer to the Objects and Relationships. This means that and object can have many objectviews. These Objectviews can be in same or different Modelviews.
-
The Frontend backend part, functional programmed handling the Single page App with integration with Redux store, API's to GitHub, localStorage and the filesystem. To keep track of the state of the App, we have implemented a state focus object that set the focus/context of the current situation lig current: model, modelview, object, objectview, relationship, relationshipview, current role and task, organisation and project. This means that when a Project file is loaded, the state will be set to current focus. This focus will be changed every time the user select an item in the modelling area (modelview)
The functions and components are responsible for handling various tasks such as updating the properties of objects and relationships, handling events on the diagram, toggling tasks, dispatching data to the store, and loading data from local storage, local files or GigHub. The code also includes functions for setting and updating the focus of the application, refreshing the objects, and handling the state of the application. Overall, the code is used to manage the state and behavior of the modeling application.
AKM client is a collection of functions and components written in TypeScript and React for a modeling application. The functions and components are responsible for handling various tasks such as updating the properties of objects and relationships, handling events on the diagram, toggling tasks, dispatching data to the store, and loading data from local storage. The code also includes functions for setting and updating the focus of the application, refreshing the objects, and handling the state of the application. Overall, the code is used to manage the state and behavior of the modeling application.