# design-first/system-designer

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/design-first-system-designer).**

1,073 stars · 157 forks · HTML · Apache-2.0

## Links

- GitHub: https://github.com/design-first/system-designer
- Homepage: https://designfirst.io/systemdesigner/
- awesome-repositories: https://awesome-repositories.com/repository/design-first-system-designer.md

## Topics

`ide` `javascript` `low-code` `metamodel` `model` `mson` `schema` `system` `uml`

## Description

System Designer is a visual modeling environment for constructing software architectures, data schemas, and component behaviors. It functions as a low-code platform that allows users to define complex systems through a drag-and-drop interface, representing components and their relationships as interconnected nodes and edges.

The platform distinguishes itself by providing a live runtime environment where defined models can be executed and inspected in real-time. It performs dynamic type validation on system operations to ensure consistency and allows for the modular composition of applications by importing external system definitions. Users can manage these components as structured documents, which the system then transforms into functional code skeletons and boilerplate structures for external implementation.

Beyond its core modeling capabilities, the tool supports the full lifecycle of system design, including the configuration of custom data types, attributes, and methods. It integrates with version control systems to synchronize project states across devices and provides export functionality to package architectures into standard formats for deployment.

## Tags

### Development Tools & Productivity

- [Visual Modeling Environments](https://awesome-repositories.com/f/development-tools-productivity/visual-modeling-environments.md) — Provides a visual modeling environment for constructing software architectures, data schemas, and component behaviors with live runtime execution.
- [Low-Code Development Platforms](https://awesome-repositories.com/f/development-tools-productivity/low-code-development-platforms.md) — Builds functional software systems visually and exports them as executable code or modular files.
- [Low-Code Platforms](https://awesome-repositories.com/f/development-tools-productivity/low-code-platforms.md) — Provides a visual environment for defining architectures and behaviors that exports into executable code.
- [Schema-Driven Code Generators](https://awesome-repositories.com/f/development-tools-productivity/project-scaffolding-config-code-generation/code-generation/schema-driven-code-generators.md) — Transforms abstract data models and class definitions into functional code skeletons and boilerplate structures.
- [System Architecture Visualizers](https://awesome-repositories.com/f/development-tools-productivity/diagramming-tools/system-architecture-visualizers.md) — Generates and provides interactive diagrams to visualize structural relationships and system architecture. ([source](https://designfirst.io/systemdesigner/documentation/docs/quick-start.html))
- [Action Editor Behaviors](https://awesome-repositories.com/f/development-tools-productivity/editor-extensions/editor-behavior-customizations/action-editor-behaviors.md) — Allows defining custom component logic through a dedicated action editor. ([source](https://designfirst.io/systemdesigner/documentation/docs/quick-start.html))
- [Document Structure Skeletons](https://awesome-repositories.com/f/development-tools-productivity/page-skeleton-generators/document-structure-skeletons.md) — Produces method stubs based on defined system models to assist in implementing component logic. ([source](https://github.com/design-first/system-designer/blob/main/README.md))
- [Rapid Prototyping Environments](https://awesome-repositories.com/f/development-tools-productivity/rapid-prototyping-environments.md) — Constructs and tests system architectures in a live environment to validate logic without manual boilerplate.
- [Version Control Sync](https://awesome-repositories.com/f/development-tools-productivity/version-control-sync.md) — Synchronizes project files across devices by integrating with external version control systems.

### Software Engineering & Architecture

- [Visual Dataflow Graph Designers](https://awesome-repositories.com/f/software-engineering-architecture/dataflow-frameworks/visual-dataflow-graph-designers.md) — Represents software systems as interconnected nodes and edges for visual manipulation and structural analysis.
- [Runtime Model Interpreters](https://awesome-repositories.com/f/software-engineering-architecture/architecture-model-parsing/runtime-model-interpreters.md) — Executes system logic by dynamically parsing and instantiating defined architectures within the modeling environment.
- [System Architecture Models](https://awesome-repositories.com/f/software-engineering-architecture/component-port-definitions/system-architecture-models.md) — Defines system architectures using structured formats to organize types, classes, and component relationships. ([source](https://github.com/design-first/system-designer#readme))
- [Data Type Validation](https://awesome-repositories.com/f/software-engineering-architecture/data-schema-validation/data-type-validation.md) — Performs real-time type validation on system operations to ensure data consistency during active execution.
- [Software Architecture](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture.md) — Designs complex software systems through drag-and-drop interfaces to define structural hierarchies before implementation.
- [System Configuration Schemas](https://awesome-repositories.com/f/software-engineering-architecture/system-configuration-schemas.md) — Constructs data models by defining properties, relationships, and events to generate class structures. ([source](https://designfirst.io/systemruntime/documentation/docs/en/design-your-model))
- [Component Architecture Visualization](https://awesome-repositories.com/f/software-engineering-architecture/component-architecture-visualization.md) — Provides tools to graphically display and manipulate components and their connections within a software system architecture.
- [Component Instantiation](https://awesome-repositories.com/f/software-engineering-architecture/component-lifecycle-management/application-component-lifecycles/component-instantiation.md) — Creates and configures specific instances of defined models to populate the system architecture. ([source](https://designfirst.io/systemdesigner/documentation/docs/quick-start.html))
- [Custom Validation Actions](https://awesome-repositories.com/f/software-engineering-architecture/custom-validation-extensions/custom-validation-actions.md) — Performs dynamic type checking on system operations during execution to ensure model consistency. ([source](https://designfirst.io/systemdesigner/documentation/docs/what-is-system-designer.html))
- [Attribute Default Values](https://awesome-repositories.com/f/software-engineering-architecture/default-configuration-values/attribute-default-values.md) — Refines class models by specifying data types, default values, and method parameters. ([source](https://designfirst.io/systemdesigner/documentation/docs/quick-start.html))
- [Design System Implementations](https://awesome-repositories.com/f/software-engineering-architecture/design-system-implementations.md) — Packages system architectures into standard, portable formats for deployment in various environments. ([source](https://designfirst.io/systemdesigner/documentation/docs/quick-start.html))
- [Behavioral Skeletons](https://awesome-repositories.com/f/software-engineering-architecture/design-system-implementations/behavioral-skeletons.md) — Generates code skeletons for defined methods to help manage component logic and application structure. ([source](https://github.com/design-first/system-designer#readme))
- [Logic Component Injection](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/dependency-injection/ui-component-injection/logic-component-injection.md) — Generates method skeletons and provides tools to inject custom logic into component structures. ([source](https://designfirst.io/systemdesigner/documentation/docs/what-is-system-designer.html))
- [Modeling Environment Extenders](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/developer-authoring-interfaces/custom-module-implementations/module-functionality-extenders/visualization-extenders/modeling-environment-extenders.md) — Allows importing external system definitions to inject new features into the modeling environment. ([source](https://github.com/design-first/system-designer/tree/main/extensions))
- [Modular Architectures](https://awesome-repositories.com/f/software-engineering-architecture/modular-architectures.md) — Supports importing and integrating external system definitions at runtime to build complex, modular applications.
- [Design Project Models](https://awesome-repositories.com/f/software-engineering-architecture/project-management-governance/project-management/design-project-models.md) — Synchronizes design project states across devices using integrated version control. ([source](https://github.com/design-first/system-designer/blob/main/README.md))

### Part of an Awesome List

- [Visual Modeling Tools](https://awesome-repositories.com/f/awesome-lists/devtools/architecture-and-design/visual-modeling-tools.md) — Enables the construction of complex system models through a drag-and-drop interface that manages components as structured documents.
- [Document-to-Object Mappings](https://awesome-repositories.com/f/awesome-lists/devtools/object-mapping/document-mappings/document-to-object-mappings.md) — Manages system components by mapping structured documents directly to underlying data schemas.

### Data & Databases

- [Graph-Based Node Models](https://awesome-repositories.com/f/data-databases/graph-based-node-models.md) — Stores system architectures as interconnected nodes and edges for visual manipulation and structural analysis.
- [Custom Data Types](https://awesome-repositories.com/f/data-databases/custom-data-types.md) — Enables the creation of reusable data structures and enumerations to enforce system-wide value constraints. ([source](https://designfirst.io/systemruntime/documentation/docs/en/design-your-model))

### DevOps & Infrastructure

- [Component-Based System Composers](https://awesome-repositories.com/f/devops-infrastructure/cloud-infrastructure/cloud-computing-serverless/backend-as-a-service/authentication-as-a-service/component-based-system-composers.md) — Enables the creation of modular software architectures by defining custom types and events for composition.
- [System Architecture Exporters](https://awesome-repositories.com/f/devops-infrastructure/deployment-management/model-export-formats/system-architecture-exporters.md) — Converts defined models into standard formats for sharing or deployment. ([source](https://github.com/design-first/system-designer#readme))

### System Administration & Monitoring

- [Execution Monitoring Systems](https://awesome-repositories.com/f/system-administration-monitoring/execution-monitoring-systems.md) — Executes modeled system logic within a dedicated runtime environment to trigger business processes and monitor execution. ([source](https://designfirst.io/systemdesigner/documentation/docs/quick-start.html))
- [System Logging and Debugging](https://awesome-repositories.com/f/system-administration-monitoring/system-logging-and-debugging.md) — Provides real-time inspection and modification of system models and methods during active execution. ([source](https://github.com/design-first/system-designer#readme))

### Artificial Intelligence & ML

- [Model Loading](https://awesome-repositories.com/f/artificial-intelligence-ml/machine-learning/infrastructure/model-training-and-tuning/data-and-checkpointing/model-loading.md) — Loads schema and model files into the runtime to instantiate classes and components. ([source](https://designfirst.io/systemruntime/documentation/docs/en/design-your-model))

### Testing & Quality Assurance

- [Dynamic Behavior Validation](https://awesome-repositories.com/f/testing-quality-assurance/dynamic-behavior-validation.md) — Validates system behavior in real-time by checking consistency during execution. ([source](https://github.com/design-first/system-designer/blob/main/README.md))

### User Interface & Experience

- [Collaborative Design Platforms](https://awesome-repositories.com/f/user-interface-experience/collaborative-design-platforms.md) — Integrates version control to maintain consistency of design files and project states across platforms. ([source](https://github.com/design-first/system-designer#readme))