Design Workflow

When you enter the workflow interface, you’ll see multiple processes. Each one represents a workflow—a step-by-step path users take when interacting with your product. Think of a workflow like a user journey, outlining the key steps your users go through. Each node under the workflow is a page. Now that you understand the basic concepts of workflow and pages, let's get started!

1. Generate Workflows

Auto-generate Core Workflows

Input your simple idea and description to the chatbox, Sketchflow will generate the workflow of your project immediately.

You can view the AI model's reasoning for your project in the right side bar and it takes a while for your entire workflow generation.

After seconds, you can click to preview the product workflow in the right side bar. It helps you get a global overview of the workflow hierarchy and quickly locate them in the left panel.

You can also drag to view the workflow processes as you want in the left panel.

When Sketchflow generating the workflow for you, the core workflows will be identified and automatic generated at first. Want to build the core pages or see how it looks? You can directly click [Generate] button to view and customize.

Manually Generate Needed Workflows

If the remaining workflows fit your needs, select and click [Generate] on which you need, generate interfaces you prefer.

If you want to adjust the workflow, nodes or page content depends on your need, you can make editions to it (see in the following tutorial).

2. Edit workflow

Quick Access with Right-Click

Right-click anywhere in the workflow page to open a menu with various supported operations and their shortcuts, including "Add Node", Copy/Cut/Paste/PasteHere/Delete the selected node(s), and undo, redo save your edits, and more.

Multi-Node Selection and Group Editing

Hold down the Shift key and drag your mouse to select multiple nodes at once. You can then duplicate, copy, or paste multiple pages together, associate them with existing workflows, and perform flexible group edits.

Edit Connections Between Pages

You can flexibly edit connections between pages. Pages support branching, so a page can link to multiple subsequent pages.

• To remove a connection, click the 'Delete' button in the middle of the connecting line between two pages.

  

• To link one page to another, select the source page, click the 'Link' button, and drag to the dot of your target page to create a new link.

  

Tips

• All pages can be dragged and rearranged freely.

• Some pages are shared among multiple workflows. Which outlined in a blue dashed border and text notice. Editing a shared page will affect all instances of that page.

  

• To restore deleted pages, simply expand the floating panel at the lower left corner and select pages to recover.

  

2. Edit Page

Each node is a page. Each page contains a name, page description and function. The generated page will contain the above structure and content.

• Click different sections to edit the description of Title / Content / Function.

  

• Clicking 'the plus button' in the upper right corner will create a new blank page.

  

• Click the button 'x' or '+ Add function', you can delete current function or add a new function.

  

• Click the button 'Duplicate' or 'Delete', you can duplicate or delete this page.

  

The above are the operations that can be performed in the workflow. When you're done editing the workflow , choose design style on right, and click [Generate] to produce the selected pages.

Notice: When a page has been generated, the page content is not editable anymore.