System Designer

System Designer

  • Languages iconΕλληνικά
    • English
    • Português (Brasil)
    • Svenska
    • 繁體中文
    • Help Translate
  • SUPPORT
  • GITHUB

›Introduction

Introduction

  • What is System Designer?
  • What is Design First?
  • Quick Start
  • Quick Start in videos

Guides

  • Installation
  • Create a System
  • Create a Schema
  • Edit a model
  • Create a Behavior
  • Create a Type
  • Create a Component
  • Run your System
  • Export a System
  • Import a System
  • Generate a diagram
  • Sync your systems with GitHub
  • Design a remote client system
  • Design a remote server system
  • Manage Extensions
  • Extend System Designer
  • Shortcuts

Tutorials

  • List of Examples
  • Bundle your CSS
  • Bundle your JavaScript
  • Δέσμευση HTML
  • Test a server-side application
  • Create a NPM module
  • Create a website
  • Listen to a model event
  • Listen to a data store event
  • Send messages
  • Send messages to other systems
  • Create an extension
  • Generate a model from a JSON file
  • Create a Graph system

Articles

  • Άρθρα σχετικά με το έργο

About

  • Who is behind System Designer?
  • Privacy Policy
  • License
Translate

What is System Designer?

No matter the frameworks you use and the code you write, the most important is the model that you define to create your system.

System Designer helps you to design this model and to generate the classes and components to build your system.

What is a system?

A system:

  • is defined by a model,
  • is composed by components and
  • reacts to events with actions that we call behaviors.

Image Alt

Design your system with ease

If you look at the different JavaScript frameworks on the market, you will notice that they all have their own way to define a model, generally only with code.

System Designer uses UML, a standard, to define your model. So you probably already know to design in System Designer even if you have never run it.

The definition of the model is stored on a JSON format called MSON. With MSON you can define types, classes, one to one / one to many relationships and multi inheritance between classes.

Code the behavior of your system

Once you have created your model, System Designer generates the skeletons of all your methods. You only have then to add your code to implement them.

System Designer provides you helpers to manage your components. You can easily navigate through components to create your system.

Create components graphically

There is no need to code to instantiate a component. Create a component in System Designer is like creating a document in a NoSQL Database.

In fact, System Designer acts as an ODM (Object-Document Mapper) to manage your components as NoSQL Documents.

Run your system

You can run your system directly from System Designer and then export it to HTML, JSON, a Node.js module or a Graphviz file (* Windows, macOS, Linux and PWA versions only).

Because you have defined a model for your system, a Dynamic Type Check is done on every action of your system. All warnings are send and shown in System Designer.

Debug your system

System Designer can load the model of any system that runs on the browser or on Node.js (* Windows, macOS, Linux and PWA versions only). You can see the schemas, models, components and methods of the running system and you can edit them.

All modifications to the model done inside System Designer will be send to the running system. There is no need to reload to see your modifications.

Design on the go

System Designer can be used on Windows, macOS, Linux, iOS, Android or any browsers. You can also install it in your project: System Designer requires no backend to work, it is a full web application.

System Designer has a Github module to synchronize your work between all these apps. You can begin your design on your Mac and then continue it on your iPad.

Design First project

System Designer is part of the Design First project. Design First is a set of tools to help developers to design before coding.

What is Design First? →
  • What is a system?
  • Design your system with ease
  • Code the behavior of your system
  • Create components graphically
  • Run your system
  • Debug your system
  • Design on the go
  • Design First project
System Designer is distributed under Apache License 2.0 - Copyright © 2024 Erwan Carriou