Designer

Build, edit and inspect individual flows in a comprehensive editor.

Designer

Diagram

The Designer renders flows with a redesigned diagram engine. The new diagram uses the Modern theme by default, in both light and dark modes, and is the production default for flows with the standard left-to-right layout.

• Flows that use the legacy top-to-bottom layout still open in the previous diagram. The top-to-bottom layout is kept as a backup only and is scheduled for removal in a future release.
• The new diagram supports one-click re-layout of the flow — see the align toolbar button below.

Configuration

Set up a new instance with config parameters and set/get methods:

const designer = appmixer.ui.Designer(config)

designer.set(key, value)
designer.get(key)

config.el ...

Learn about widget config here.

config.flowId

Type: String | Default: null

ID of a flow that is opened in the editor.

config.componentId

Type: String | Default: null

ID of a component that is opened in the editor.

config.shareTypes

Type: Object | Default: DefaultShareTypes

Override default sharing dialog types.

config.sharePermissions

Type: Object[] | Default: DefaultSharePermissions

Override default sharing dialog permissions.

config.options.showHeader

Type: Boolean | Default: true

Toggle visibility of the header. &#xNAN;config.options.validation

Type: Object | Default: {}

Controls validation panel settings. Properties:

• show (Boolean, default: false). Toggles visibility of the validation panel.

Example:

appmixer.ui.Designer({
  /* ... */
  options: {
    validation: { show: true }
  }
})

Additional validation options may be added in future versions.

config.options.menu

Type: Object[] | Default: []

Add a dropdown menu input to trigger built-in and custom events:

appmixer.ui.Designer({
  /* ... */
  options: {
      menu: [
        { event: 'flow:rename', label: 'Rename', icon: 'data:image/svg+xml;base64,...' },
        { event: 'flow:share', label: 'Share', icon: 'https://www.example.com/images/image.jpg' },
        { event: 'flow:wizard-builder', label: 'Wizard' },
        { event: 'flow:export-svg', label: 'Export SVG' },
        { event: 'flow:export-png', label: 'Export PNG' },
        { event: 'flow:print', label: 'Print' }
    ]
  }
})

The optional icon property is a URL of an image or a base64 string.

config.options.toolbar

Type: Array[] | Default: []

Add a toolbar with groups of built-in and custom buttons:

const designer = appmixer.ui.Designer({
  /* ... */
  options: {
      toolbar: [
        ['undo', 'redo'],
        ['zoom-to-fit', 'zoom-in', 'zoom-out'],
        ['logs'],
        [{
          tooltip: 'Reload',
          widget: {
              template: (
                  `<div @click="onClick" style="border: solid 1px gray; border-radius: 3px;">
                      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
                        <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                      </svg>
                  </div>`
              ),
              methods: {
                  onClick() {
                    designer.reload()
                  }
              }
          }
        }]
    ]
  }
})

Specify Vue ComponentOptions under widget to create a custom toolbar button.

'align'

The align button key adds an Align Diagram button that re-arranges the whole flow into a clean, layered left-to-right layout with a single click. Branches are ordered by the output port their links leave from, notes are never moved, and the re-layout finishes with a zoom-to-fit. The alignment only changes component positions — links, ports and the flow logic are untouched — and it is persisted as a single flow update, so it can be undone in one step.

appmixer.ui.Designer({
  /* ... */
  options: {
      toolbar: [
        ['undo', 'redo'],
        ['zoom-to-fit', 'zoom-in', 'zoom-out'],
        ['align'],
        ['logs']
    ]
  }
})

The button is available only with the new diagram (left-to-right layouts) and is disabled when the Designer is read-only. Removing the 'align' string from the toolbar array fully disables the feature.

config.options.autoOpenLogs

Type: Boolean | Default: true

Automatically open logs view when the flow is running.

const designer = appmixer.ui.Designer({
  /* ... */
  options: {
      autoOpenLogs: true
      toolbar: [
        ['logs']
    ]
  }
})

config.options.triggerSelector

Type: Object | Default: null

Automatically open trigger selector dialog when the flow has no trigger.

const designer = appmixer.ui.Designer({
  /* ... */
  options: {
    triggerSelector: {
      enabled: true,
      featured: [
        {
          name: 'appmixer.utils.timers.Timer'
        },
        {
          name: 'appmixer.utils.controls.OnStart',
          label: 'Custom label',
          description: 'Custom description',
          marker: 'Custom marker text',
          icon: 'data:image/svg+xml;base64,...',
        }
      ]
    }
  }
})

config.options.copilot

Type: Object | Default: null

Configuration of the AI Copilot panel. The Copilot button is shown only when the Copilot plugin is enabled on the backend.

const designer = appmixer.ui.Designer({
  /* ... */
  options: {
    copilot: {
      // Show the built-in, localized example prompts:
      examplePrompts: true
      // — or — provide your own (replaces the defaults):
      // examplePrompts: [
      //   'When a Stripe payment succeeds, add a row to Google Sheets'
      // ]
      // Omit or set false to keep them hidden (default).
    }
  }
})

The Designer also includes a Test flow button that executes a single test run of the flow without starting it (streaming per-component results onto the canvas, with dedicated test-input dialogs for Webhook, Form and Chat triggers), a Versioning panel with the flow's version history and draft management (see Flow Versions), a floating validation panel that replaces the validation sidebar, and per-component Error handling settings (see Handle Flow Errors).

Instance

Learn about widget instance here.

State

designer.state(name, value)

loader

Type: Boolean | Default: null

Toggle a custom loading state.

error

Type: String | Default: null

Toggle a custom error message.

stencilLayout

Type: String | Default: 'default'

Sets the stencil panel layout to 'default' (expanded) or 'collapsed'.

validationLayout

Type: String | Default: 'default'

Sets the validation panel layout to 'default' (expanded) or 'collapsed'.

Events

designer.on(event, handler)

flow:start

designer.on('flow:start', flow => {/* ... */})

Toggle stage button to start the flow.

flow:stop

designer.on('flow:stop', flow => {/* ... */})

Toggle stage button to stop the flow.

flow:share

designer.on('flow:share', flow => {/* ... */})

Click menu item to open sharing of the flow.

flow:rename

designer.on('flow:rename', flow => {/* ... */})

Click menu item to rename the flow.

flow:export-svg

designer.on('flow:export-svg', flow => {/* ... */})

Click menu item to export diagram of the flow to SVG.

flow:export-png

designer.on('flow:export-png', flow => {/* ... */})

Click menu item to export diagram of the flow to PNG.

flow:print

designer.on('flow:print', flow => {/* ... */})

Click menu item to print diagram of the flow.

flow:validation

An event containing an array with flow validation errors. If the array is empty, there are no validation errors in the flow.

designer.on('flow:validation', errors => {
    console.log('flow:validation', '===>', errors);
});

// Example
[
    {
        "keyword": "required",
        "dataPath": ".text",
        "schemaPath": "#/required",
        "params": {
            "missingProperty": "text"
        },
        "message": "Should have required property \"Message\".",
        "schema": {
            "text": {
                "type": "string"
            }
        },
        "parentSchema": {
            "type": "object",
            "properties": {
                "text": {
                    "type": "string"
                }
            },
            "required": [
                "text"
            ]
        },
        "data": {
            "message.d9a25ebe-84ef-4460-a061-f9acac76d28f.out.lambda": {}
        },
        "componentId": "d1c48d6f-0225-46a8-9600-1c19adf75768",
        "descriptorPath": "config.transform.message.d9a25ebe-84ef-4460-a061-f9acac76d28f.out.lambda.text",
        "fieldLabel": "Message"
    }
]

flow:wizard-builder

designer.on('flow:wizard-builder', flow => {/* ... */})

Click menu item to open a wizard builder dialog.

component:add

designer.on('component:add', ({ data, next }) => {/* ... */})

Add a new component to the flow.

component:open

designer.on('component:open', ({ data, next }) => {/* ... */})

Open component inspector.

component:close

designer.on('component:close', ({ data, next }) => {/* ... */})

Close component inspector.

component:rename

designer.on('component:rename', ({ data, next }) => {/* ... */})

Rename a component.

component:update-type

designer.on('component:update-type', ({ data, next }) => {/* ... */})

Use selection input to change component type.

navigate:validation

designer.on('navigate:validation', (flowId) => {/* ... */})

Click a button to show validation errors.

Example

const designer = appmixer.ui.Designer({
    el: '#designer',
    options: {
        menu: [
          { event: 'flow:rename', label: 'Rename' },
          { event: 'flow:share', label: 'Share' },
          { event: 'flow:wizard-builder', label: 'Wizard' },
          { event: 'flow:export-svg', label: 'Export SVG' },
          { event: 'flow:export-png', label: 'Export PNG' },
          { event: 'flow:print', label: 'Print' }
        ],
        toolbar: [
          ['undo', 'redo'],
          ['zoom-to-fit', 'zoom-in', 'zoom-out'],
          ['logs']
        ]
    }
})

const flowId = await appmixer.api.createFlow('New flow')
designer.set('flowId', flowId)
designer.open()