1. Опис

Графічний Low-Code редактор для створення схем, які можуть бути використані для будь-яких сценаріїв обслуговування.

Представлений простором для побудови, а також:

1. Верхня панель (Рис.1(1));
2. Блок компонентів (Рис.1(2));
3. Простір побудови схеми (Рис.1(3)).

Image Added

Рис. 1. Webitel Flow Diagram

1.1. Верхня панель

У цій панелі відображається назва схеми, а також є такі елементи:

1. Інструмент редагування (Рис.2(1));
2. Інструменти скасування дій (Рис.2(2));
3. Кнопка "To start";
4. Кнопка "Jsonify";
5. Кнопка Save;
6. Кнопка Close.

Image Added

Рис. 2. Верхня панель Webitel Flow Diagram

1.1.1. Інструмент редагування

Призначений для зміни назви та тегів схеми. Представлений кнопкою Image Added, при натисканні яку відкривається модальне вікно " Flow settings " (Рис.3).

Image Added

Рис. 3. Модальне вікно "Flow settings"

1.1.2. Інструменти скасування дій

Складається із двох кнопок:
Image Added  - повертає на одну дію назад;

Image Added - повертає одну дію вперед, якщо користувач натиснув кнопку Image Added. Інакше ця кнопка неактивна.

1.1.3. Кнопка "To start"

Натискання кнопки "To start" повертає схему в положення, коли компонент "Start" знаходиться всередині простору для побудови схеми.

1.1.4. Кнопка "Jsonify"

Кнопка "Jsonify" призначена для відображення json-коду, який відповідає створеній схемі, в консолі. Для перегляду необхідно відкрити консоль.

1.1.5. Кнопка Save

Призначена для збереження змін у схемі. При натисканні стрілочки відкривається можливість вибрати варіант Save as (Рис.4). При виборі "Save as" відкривається модальне вікно "Flow settings" (Рис.3), в якому можна змінити назву схеми.

Якщо є незбережені дані, кнопка пофарбована в помаранчевий колір.

Image Added

Рис. 4. Кнопка "Save"

У випадках, коли під час роботи в конструкторі зникло з'єднання з сервером, після натискання на кнопку "Save" відкривається модальне вікно "Save failed" (Рис.5).

Image Added

Рис. 5. Модальне вікно "Save failed"

Кнопка "Retry" - це повторна спроба зберегти зміни.

Кнопка "Export to json" - завантаження JSON-файлу незбереженої схеми.

Кнопка "Close" – закриття модального вікна.

1.1.6. Кнопка "Close"

Клавіша "Close" призначена для закриття схеми. Якщо є незбережені зміни - кнопка "Save" активна, при натисканні на кнопку "Close" відкривається модальне вікно "Warning" (Рис.6).

Image Added

Рис. 6. Модальне вікно "Warning"

Модальне вікно "Warning" складається з інформаційного повідомлення та кнопок:

• Save - зберігає зміни та закриває редактор. Відкривається сторінка "Схеми";
• Don't save - не зберігає зміни та закриває редактор. Відкривається сторінка "Схеми";
• Cancel – скасування. Модальне вікно зачиняється. Можна продовжувати роботу у редакторі.

1.2. Блок компонентів

У цьому блоці відображається перелік компонентів, з яких можна створювати схеми, та поле пошуку.

Список компонентів, що відображаються, залежить від типу схеми обраного при її створенні. При натисканні на кнопку Image Added зверху блоку згортає список компонентів; кнопка Image Added розгортає список компонентів.

Компоненти:

Кожен компонент має свою панель налаштувань, яка відкривається в правій частині сторінки при натисканні на компонент, який знаходиться в просторі для побудови схеми. Більше інформації можна переглянути на сторінці конкретного компонента.

1.3. Простір для побудови схеми

Є основним робочим простором.

За допомогою натискання правої кнопки миші на блок компонента можна клонувати, або видалити, вибраний блок.

За допомогою коліщатка мишки можна змінювати масштаб побудованої схеми.

У правому нижньому кутку знаходиться міні-карта схеми для зручності користування. Також є можливість змінювати масштаб схеми. За замовчуванням та після натискання на "To start" – масштаб дорівнює 50%.

2. Можливості

2.1. Додавання компонентів у схему

3. Додаткові матеріали

3.1. Інструкції

Приклади схем: