System Designer

System Designer

  • Languages iconSvenska
    • English
    • Ελληνικά
    • Português (Brasil)
    • 繁體中文
    • Help Translate
  • 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
  • Hantera tillägg
  • 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
  • Lyssna efter en modellhändelse
  • 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

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

Installation

Installation of the Progressive Web App

For the web app version optimized for desktop browsers:

  • go to https://designfirst.io/designer/
  • If your browser is compatible, you will see a dialog to install the application locally.

For the web app version optimized for mobile browsers:

  • go to https://designfirst.io/design/
  • If your browser is compatible, you will see a dialog to install the application locally.

The PWA version works offline (i.e. without an internet connection).

Installation from a Store

  • Installation via the Mac App Store.
  • Installation via the App Store.

Installation in your existing web application

Install System Designer from npm:

npm i system-designer

Then copy and paste the content of the /node_modules/system-designer/dist repository in your web project and go to the index.html page.

Because System Designer is a full client full web application, it requires no backend to work. It means that you can install System Designer in your PHP, J2E, ASP.net, ... applications.

Build the PWA version from the source code

Clone the GitHub repository:

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

Once you have cloned the repository, install the dependencies:

npm i

Then build and start System Designer:

npm run build
npm run start

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

Build the desktop versions from the source code

To build System Designer for Electron:

npm run electron

Copy the content of /dist directory into your System Designer for Electron project.

Then in your System Designer for Electron project:

# build for macOS
npm run macOS

# build for Windows
npm run windows

# build for Linux
npm run linux

Build the mobile versions from the source code

To build System Designer for Cordova:

npm run cordova

Copy the content of /dist directory into your System Designer for Cordova project.

Then in your System Designer for Cordova project:

# build for ios
npx cordova build ios

# build for android
npx cordova build android
← Quick Start in videosCreate a System →
  • Installation of the Progressive Web App
  • Installation from a Store
  • Installation in your existing web application
  • Build the PWA version from the source code
  • Build the desktop versions from the source code
  • Build the mobile versions from the source code
System Designer is distributed under Apache License 2.0 - Copyright © 2024 Erwan Carriou