System Designer

System Designer

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

›Guides

Introduction

  • What is System Designer?
  • O que é 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
  • Bundle your 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

  • Articles about the project

About

  • Quem está por trás do System Designer?
  • Privacy Policy
  • License
Translate

Extend System Designer

There are many ways to add new functionalities to System Designer. To do so you can:

  • update its source code,
  • add addons or
  • add extensions.

Update System Designer source code

Installation

To update System Designer, you will need to clone the repository:

git clone https://github.com/design-first/system-designer.git

Once you have cloned the repository, install the dependencies:

npm i

Enable development mode

Start System Designer in development mode:

npm run dev

Once server started, go to http://localhost:9001/.

Update source code

System Designer has got a customizable system. You can update all its components, models or behaviors to follow your needs. To do so:

  • go to /src/systems directory,
  • open a version of System Designer,
  • import the system you want,
  • edit the system,
  • export it,
  • save it in the same place.

Because you have changed the source code, System Designer will be automatically rebuild and the page refreshed.

Add addons

You can extend System Designer by composing other systems with its systems. In that case, these systems are called addons.

To extend System Designer:

  • copy and paste a system into the /addons directory and
  • build System Designer:
npm run build

Your system will be then compose with System Designer core system.

Add extensions

You can extend System Designer by adding extensions at runtime. To do so:

  • go to the /extensions directory,

  • add your created system in extensions.json file and

  • build System Designer:

    shell npm run build`

Your system will be then shown in the list of extensions.

You can create extensions inside System Designer.

← Manage ExtensionsShortcuts →
  • Update System Designer source code
    • Installation
    • Enable development mode
    • Update source code
  • Add addons
  • Add extensions
System Designer is distributed under Apache License 2.0 - Copyright © 2024 Erwan Carriou