System Designer

System Designer

  • DOCUMENTATION
  • SUPPORT
  • GITHUB

›Guides

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
  • Bundle your HTML
  • Test a server-side application
  • Create a NPM module
  • Create a website
  • Listen to a model event
  • Listen to a repository 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

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

Run your System

You can run and debug your system in System Designer.

Run your system

To run a system:

  • click on the Run button on the left and
  • a new window will be open and your system will run in its context.

You can test Node.js APIs

If your systems uses native Node.js apis, you can run your system with System Designer (* Windows, macOS and Linux versions only).

Debug your system

  • to debug your system, add some logs in your code. For example, you can add this code in the start method of your system:
function start() { 
  this.require('logger').debug('Hello World');
}
  • run your app,
  • click on the Logs tab and
  • all the logs will be shown there.

Image Alt

What are these informations shown at the bottom?

All logs of your systems are also shown as messages (at the bottom right of System Designer).

How can I log informations?

logger APIs are inspired by Log4J, so you have:

  • this.require('logger').debug('this is a debug message'');
  • this.require('logger').info('this is an info message'');
  • this.require('logger').warn('this is a warning message'');
  • this.require('logger').error('this is an error message'');

Advanced mode

Compatibility version

This feature is only available on the Windows, macOS and Linux versions of System Designer.

When running your application:

  • go to the menu,
  • click on Menu > Toggle Developper Tools.

The Chrome Dev Tools is opened and you can debug your system.

Image Alt

Use System Runtime APIS

Remember that you can use System Runtime APIs to explore your system.

← Create a ComponentExport a System →
  • Run your system
  • Debug your system
  • Advanced mode
System Designer is distributed under Apache License 2.0 - Copyright © 2019 Erwan Carriou