Flow chart (Блок схема)

Узлы могут быть соединены связями (линиями) и стрелками. Также можно создать различные типы связей или прикрепить текст к звену связи.

Ссылка со стрелкой

• Для создания связи с обычной стрелкой, необходимо ввести в коде диаграммы запись, как показано на изображении, выделенным желтым цветом.
• Внизу изображения продемонстрированно, как отобразится данная связь на диаграмме.

Создание связи

• Для создания простой открытой связи, необходимо ввести тройное тире, как выделено на изображении.

Текст на открытой связи

• Также вы можете выбрать второй вариант создания связи, изображенный ниже.

• Как показано на изображении, для вставки текста на открытой связи, необходимо ввести два тире, затем, текст и тройное тире.

Связь со стрелкой и текстом

• На изображении предложены варианты создания связи с текстом и стрелкой.

Пунктирная стрелка и стрелка с текстом

• Добавление пунктирной стрелки и стрелки с текстом, выполняется с использованием тире, точки и символа больше >

• На втором изображении представлено добавление текста на пунктирную стрелку

Утолщенная стрелка.

• Для создания утолщенной стрелки между узлами необходимо добавить два знака равно = и знак больше >

Утолщенная стрелка с текстом

• Для добавления текста на утолщенную стрелку следует ввести два знака равно, затем, текст и снова два знака равно со знаком больше, как показано на изображении

• Для соединения узлов в одну строку, требуется добавить знаки тире и знаки больше, как показано на изображении:

• Также можно объединить несколько связей узлов в одной строке, как показано ниже:

• Помимо этого, существует возможность описания зависимости выразительным способом одной строкой, как показано ниже:

• Если описать эту же диаграмму, используя базовый синтаксис, это займет 4 строки, как показано на изображении:

• Для пунктирных или утолщенных стрелок, добавляемыми знаками являются знаки равенства и точки, как показано в таблице ниже.

  Вид связи/Длина	1	2	3
  Обычная связь	---	----	-----
  Обычная связь со стрелкой	-->	--->	---->
  Утолщенная связь	===	====	=====
  Утолщенная связь со стрелкой	==>	===>	====>
  Связь, обозначенная пунктиром	-.-	-..-	-...-
  Связь, обозначенная пунктиром, со стрелкой	-.->	-..->	-...->

subgraph title
    graph definition
end

• Пример применения подграфов:

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

• Можно также задать явный идентификатор для подграфа:

flowchart TB
    c1-->a2
    subgraph ide1 [one]
    a1-->a2
    end

•  Также можно задавать связи для подграфов и из них, как показано в примере ниже:

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

Направление в подграфах

Существует возможность использования оператора direction, чтобы задать направление, в котором будет отображаться подграф, как показано в примере ниже.

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

Узел с закругленными краями

• Для создания узла с закругленными краями, необходимо заключить текст в узле, в круглые скобки.

Узел овальной формы

• Узел овальной формы создается при помощи квадратных и круглых скобок, где квадратные скобки находятся внутри круглых скобок.

Узел в форме подпрограммы

• Для создания такого узла, необходимо добавить двойные квадратные скобки.

Узел цилиндрической формы

• Узел цилиндрической формы формируется при помощи круглых и квадратных скобок, где круглые скобки ставятся внутри квадратных.

Узел в виде круга

• Создание узла круглой формы выполняется при помощи добавления двойных круглых скобок.

Узел асимметричной формы

• Узел асимметричной формы создается при введении знака больше и квадратной скобки.

Узел в виде ромба

• Для создания узла в виде ромба необходимо ввести фигурные скобки { }.

Шестигранный узел

• Создание шестигранного узла предполагает добавление двойных фигурных скобок.

Узел в виде параллелограмма

• Вид перевернутого параллелограмма можно придать, используя квадратные скобки и слэш /.

Узел в виде перевернутого параллелограмма

• Для того, чтобы создать перевернутый параллелограмм, необходимо ввести квадратные скобки и обратный слэш  \ .

Узел в виде трапеции

• Узел в виде трапеции создается при помощи квадратных скобок и slash-команд.

Узел в виде перевернутой трапеции

• Создание узла в форме перевернутой трапеции предполагает использование квадратных скобок и косых черт, но в обратном порядке.

Узел в виде двойного круга

• Для создания узла в виде двойного круга используются тройные круглые скобки.

• Существует возможность стилизации связей. Например, вы хотите создать связь, которая обратна остальным связям в диаграмме.
• Поскольку связи не имеют идентификатора как узлы, необходим другой способ определения стиля.
• Вместо идентификатора, как в узлах, используется порядковый номер момента, когда связь была создана в диаграмме или можно использовать значение по умолчанию для применения ко всем связям.
• В приведенном ниже примере стиль, определенный в инструкции linkStyle, будет принадлежать 4 связи в диаграмме:

linkStyle 3 stroke:#ff3,stroke-width:4px,color:re

Стилизация узла диаграммы

• К узлу можно применить определенные стили, такие как: утолщение границ или изменение цвета. Пример стилизации показан на изображении.

Связи

• Установить стиль связей и прикрепить эту связь к узлам, которые должны иметь другой внешний вид, удобнее сделать как показано ниже, чем устанавливать стиль для каждой связи.

 classDef className fill:#f9f,stroke:#333,stroke-width:4px

• Прикрепление связи к узлу осуществляется следующим образом:

class nodeId1 classNam

• Также можно присоединить связь к нескольким узлам в одном операторе:

class nodeId1,nodeId2 className;

• Более короткой формой добавления связи, является присоединение имени связи к узлу, с помощью оператора :::, как показано ниже:

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96;

• Также возможно предопределить связи в стилях css, которые могут быть применены для создания диаграммы, как в примере ниже:

<style>
    .cssClass > rect{
        fill:#FF0000;
        stroke:#FFFF00;
        stroke-width:4px;
    }
</style>

• Пример применения стиля css:

flowchart LR;
    A-->B[AAA<span>BBB</span>]
    B-->D
    class A cssClass

• Если связи присвоено имя по умолчанию, то оно будет присвоено всем связям:

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

• Существует возможность добавления комментариев.
• Комментарии должны быть расположены в отдельной строке и начинаться с удвоенного знака процента (%%).
• Любой текст после начала комментария к следующей новой строке будет рассматриваться как комментарий, включая любой синтаксис потока.

flowchart LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

• Существует возможность добавления иконок из Fontawesome. Доступ к иконкам осуществляется с помощью синтаксиса fa:#icon class name#.

flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?)

• В диаграммах, операторы могут заканчиваться без точки с запятой. После выпуска версии 0.2.16, завершение инструкции точкой с запятой является необязательным. Таким образом, приведенный ниже пример, является действительным также как и прошлые синтаксисы диаграммы.
• Ниже приведено новое представление границ узлов, которое также работает вместе со старым представлением диаграммы.

flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]