serverlessworkflow / vscode-extension

VSCode Extension that supports creation of Serverless Workflow models

Serverless Workflow Specification - VSCode Extension

Provides code hints and snippets for the CNCF Serverless Workflow Specification

Conformance

This plugin conforms to the latest Serverless Workflow specification.

Features

• Code Hints
• Code Snippets
• Preview Workflow Diagram
• Exporting Diagram to SVG or PNG

Code Hints

This extension provides Code Hints, Snippets, and Diagram generation for Serverless Workflow definitions (JSON and YAML).

Code hints include:

• Prompting correct attribute names as you type.
• Displaying of mismatched types or missing required properties
• Allows use of Ctrl+Space to show available properties
• Code completion for enum types

Note that to enable the YAML code completion support, you must install the VSCode YAML extension first.

Code Snippets

This extension also provides Code Snippets for the serverless workflow specification markup:

• swj: Create a new JSON workflow definition
• swy: Create a new YAML workflow definition
• adding more in the next version

Preview Workflow Diagram

You can preview the workflow diagram while working on a workflow:

• Opening the Command Palette (⇧⌘P or Ctrl + Shift + P)
• Selecting: "Serverless Workflow: Preview Diagram"

Or by using the hotkey alt+shift+s p

You can also generate a preview for multiple files by selecting them in the explorer, right-click and select from the menu "Serverless Workflow: Preview Diagram"

Exporting Diagram to SVG or PNG

Similarly to the preview, you can output the diagram to either SVG or PNG format.

The commands are "Serverless Workflow: Export Diagram to SVG" (alt+shift+s v) or "Serverless Workflow: Export Diagram to PNG" (alt+shift+s i), available in the command palette or by right clicking the files.

Building from source

If you do not want to get this extension from the Marketplace or would like to build and test the latest changes/updates locally, follow these steps:

1. Clone the extension git repository

git clone https://github.com/serverlessworkflow/vscode-extension.git
cd vscode-extension

2. Build the necessary modules

npm install

3. Build and package the extension with vsce:

vsce package

To install vsce run:

npm install -g vsce

4. vsce will create a serverless-workflow-vscode-extension-$VERSION$.vsix file which you have to install to your ide, for this run:

code --install-extension serverless-workflow-vscode-extension-$VERSION$.vsix

To uninstall the extension run:

code --uninstall-extension serverless-workflow-vscode-extension-$VERSION$.vsix

vscode-extension's Issues

Getting better file readme

What would you like to be added: Requirements before use

Why is this needed: Requirements before use

Enable automatic diagram preview

What would you like to be added:

Enable automatic diagram preview.

The diagram should automatically open when you open the workflow file.

Why is this needed:

If you open any serverless workflow file (*.sw.json, *.sw.yml), you have to open the Command Palette (⇧⌘P or Ctrl + Shift + P), then type and select the option "Serverless Workflow: Preview Diagram" to see the workflow's diagram.

Create a pipeline to build and make the extension available in Releases page

What would you like to be added:
Add a Github action attached to our release process to make the VSCode Extension file available on the releases page, so users can download and install it manually if needed.

Why is this needed:
At this time, we don't have access to release to the Marketplace, yet. Even though, it would be useful to have the additional option to install it manually as well in case the extension takes time to appear in the Marketplace.

Wrong info in the VS marketplace

What is the question:
The project's information on VS Marketplace are not up to date, they seem to point to a previous iteration of the SW project.

How could we update the said info ?
https://marketplace.visualstudio.com/items?itemName=serverlessworkflow.serverless-workflow-vscode-extension

@antmendoza @tsurdilo @ricardozanini ?

An error is raised when generating a png

What happened:
Generating a png for a workflow seems to throw an error under certain conditions:

What you expected to happen:
The png to be generated.

How to reproduce it:

• Create a workflow.json file containing:

{
  "id": "helloworld",
  "version": "1.0.0",
  "specVersion": "0.8",
  "name": "Hello World Workflow",
  "description": "Inject Hello World",
  "start": "hello state",
  "states": [
     {
        "name": "hello state",
        "type": "inject",
        "data": {
           "result": "Hello World!"
        },
        "end": true
     }
  ]
}

• ctrl+shift+p > Export Diagram to PNG (or Generate Diagram, will also fail)

Anything else we need to know?:
From Saad Ansari on Slack

It seems to be related to a incorrect handling of paths and/or expected inputs of the command.

The extension also relies on external services to generate the files which is not necessary as VSCode already packs browser's capatiblities to render the diagram.

Finally, the code base is scattered and difficult to debug.

Environment:
Tested on Win11 x64. Reported from MacOS.