Predefined Templates

Modes

FlowChart JS can be displayed in "dark" or "light" modes by setting the mode option:

light mode

Edit in BALKAN Code

dark mode

Edit in BALKAN Code

Node Templates

FlowChart JS use special node templates to represent different types of actions or steps in a process. Let's go over each FlowChart JS shape template individually.

Start/End

Marks the starting or ending point of the system. It usually contains the word "Start" or "End."

Process

A box can represent a single step ("add two cups of flour"), or an entire sub-process ("make bread") within a larger process."

Document

A printed document or report.

Decision

A decision or branching point. Lines representing different decisions emerge from different points of the diamond.

Input/Output

Represents material or information entering or leaving the system, such as customer order (input) or a product (output).

Manual Input

Represents a step where a user is prompted to enter information manually.

Preparation

Represents a set-up to another step in the process.

Connector

Indicates that the flow continues where a matching symbol (containing the same letter) has been placed.

Or

Indicates that the process flow continues in more than two branches.

Manual Loop

Indicates a sequence of commands that will continue to repeat until stopped manually.

Loop Limit

Indicates the point at which a loop should stop.

Delay

Indicates a delay in the process.

Data

Indicates a step where data gets stored.

Display

Indicates a step that displays information.

Label Templates

There are two labels templates, labelOverLink and just label

Edit in BALKAN Code

Edit in BALKAN Code

Link Templates

There is one link template, link with rounded corners, if you want to use custom link see this help article