Базовое определение
Блок-схема состоит из узлов (геометрических фигур) и соединительных линий (стрелок или линий). Код Mermaid определяет способ построения узлов и соединительных линий и поддерживает множество типов стрелок, многонаправленные стрелки, а также произвольные связи с подпроцессами.
Предупреждение Если вы используете слово "end" в узле блок-схемы, сделайте первую букву или всё слово заглавными (например: "End" или "END"); ввод "end" полностью в нижнем регистре приведёт к ошибке блок-схемы.
Предупреждение Если при соединении узлов блок-схемы вы используете букву "o" или "x" в качестве первой буквы, добавьте пробел перед буквой или сделайте букву заглавной (например: "dev--- ops", "dev---Ops").
Один узел (по умолчанию)
Копировать
Встраивание
---
title: Node
---
flowchart LR
id
id — это содержимое, отображаемое в блоке.
Синтаксис создания блок-схемы: помимо flowchart можно также использовать graph .
Узел с текстом
Также можно задать блоку текст, отличный от id. Если выполнить это несколько раз, система примет последний указанный текст для этого узла. Кроме того, если позже для узла определена соединительная линия, определение текста можно опустить; при рендеринге блока будет использован ранее определённый текст.
Копировать
Встраивание
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Текст Unicode
Заключите текст Unicode в двойные кавычки.
Копировать
Встраивание
flowchart LR
id["This ❤ Unicode"]
Формат Markdown
Заключите текст Markdown в двойные кавычки и обратные кавычки
Копировать
Встраивание
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Направление
Объявляет направление блок-схемы
Означает, что блок-схема расположена сверху вниз (TD или TB)
Копировать
Встраивание
flowchart TD
Start --> Stop
Направления блок-схемы включают:
- TB - сверху вниз
- TD - сверху вниз (то же, что сверху вниз)
- BT - снизу вверх
- RL - справа налево
- LR - слева направо
Форма узла
Скруглённый прямоугольник
Копировать
Встраивание
flowchart LR
id1(This is the text in the box)
Форма стадиона
Копировать
Встраивание
flowchart LR
id1([This is the text in the box])
Подпроцесс
Копировать
Встраивание
flowchart LR
id1[[This is the text in the box]]
База данных
Копировать
Встраивание
flowchart LR
id1[(Database)]
Круг
Копировать
Встраивание
flowchart LR
id1((This is the text in the circle))
Асимметричная фигура
Копировать
Встраивание
flowchart LR
id1>This is the text in the box]
Ромб
Копировать
Встраивание
flowchart LR
id1{This is the text in the box}
Шестиугольник
Копировать
Встраивание
flowchart LR
id1{{This is the text in the box}}
Параллелограмм
Копировать
Встраивание
flowchart TD
id1[/This is the text in the box/]
Обратный параллелограмм
Копировать
Встраивание
flowchart TD
id1[\This is the text in the box\]
Трапеция
Копировать
Встраивание
flowchart TD
A[/ProcessOn\]
Перевёрнутая трапеция
Копировать
Встраивание
flowchart TD
B[\ProcessOn/]
Двойной круг
Копировать
Встраивание
flowchart TD
id1(((This is the text in the circle)))
Расширение форм узлов блок-схемы Mermaid
Mermaid представила 30 новых форм для повышения гибкости и точности создания блок-схем. Эти новые формы предоставляют больше возможностей для наглядного представления процессов, решений, событий, хранилищ данных и других элементов блок-схемы, тем самым повышая ясность и семантический смысл.
Новый синтаксис определения форм
Mermaid теперь поддерживает общий синтаксис для определения типов форм, чтобы справляться с растущим числом форм. Этот синтаксис позволяет задавать конкретную форму для узла в понятном и гибком формате.
Копировать
Встраивание
A@{ shape: rect }
Этот синтаксис создаёт узел A в виде прямоугольника. Он рендерится так же, как [A] или A.
Полный список форм узлов
Ниже приведён полный список новых форм узлов с их соответствующими значениями, сокращёнными названиями и псевдонимами:
| Семантическое название | Синтаксис графа | Сокращённое название синтаксиса | Альтернативный синтаксис | Подробное описание |
|---|---|---|---|---|
| Карточка | Notched Rectangle | notch-rect | card, notched-rectangle | Обозначает карточку |
| Упорядочивание | Hourglass | hourglass | collate | Обозначает операцию упорядочивания |
| Канал связи | Lightning Bolt | bolt | com-link, lightning-bolt | Канал связи |
| Комментарий | Curly Brace | brace | brace-l, comment | Добавить комментарий |
| Комментарий справа | Curly Brace | brace-r | Добавить комментарий | |
| Комментарий с фигурными скобками с обеих сторон | Curly Braces | braces | Добавить комментарий | |
| Ввод или вывод данных | Lean Right | lean-r | in-out, lean-right | Обозначает ввод или вывод |
| Ввод или вывод данных | Lean Left | lean-l | lean-left, out-in | Обозначает вывод или ввод |
| База данных | Cylinder | cyl | cylinder, database, db | Хранилище базы данных |
| Решение | Diamond | diam | decision, diamond, question | Шаг принятия решения |
| Задержка | Half-Rounded Rectangle | delay | half-rounded-rectangle | Обозначает задержку |
| Память прямого доступа | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Память прямого доступа |
| Дисковая память | Lined Cylinder | lin-cyl | disk, lined-cylinder | Дисковая память |
| Дисплей | Curved Trapezoid | curv-trap | curved-trapezoid, display | Обозначает отображение информации на экране, терминале и других устройствах |
| Разделение обработки | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Форма разделения обработки |
| Документ | Document | doc | document | Обозначает документ |
| Событие | Rounded Rectangle | rounded | event | Обозначает событие |
| Извлечение | Triangle | tri | extract, triangle | Процесс извлечения |
| Разветвление/слияние | Filled Rectangle | fork | join | Разветвление или слияние в блок-схеме |
| Внутренняя память | Window Pane | win-pane | internal-storage, window-pane | Внутренняя память |
| Точка соединения | Filled Circle | f-circ | filled-circle, junction | Точка соединения |
| Документ с линией | Lined Document | lin-doc | lined-document | Документ с линией |
| Процесс с линией/тенью | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Форма процесса с линией |
| Ограничение цикла | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Шаг ограничения цикла |
| Ручной файл | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Операция с ручным файлом |
| Ручной ввод | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Шаг ручного ввода |
| Ручная операция | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Обозначает ручную задачу |
| Несколько документов | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Несколько процессов | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Неправильная фигура | Odd | odd | Неправильная фигура | |
| Бумажная лента | Flag | flag | paper-tape | Бумажная лента |
| Подготовка условия | Hexagon | hex | hexagon, prepare | Шаг подготовки или условия |
| Приоритетное действие | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Приоритетное действие |
| Обработка | Rectangle | rect | proc, process, rectangle | Стандартная форма обработки |
| Начало | Circle | circle | circ | Начальная точка |
| Начало | Small Circle | sm-circ | small-circle, start | Начало в виде малого круга |
| Останов | Double Circle | dbl-circ | double-circle | Обозначает точку остановки |
| Останов | Framed Circle | fr-circ | framed-circle, stop | Обозначает точку остановки |
| Хранение данных | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Хранение данных |
| Подпроцесс | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Подпроцесс, подпрограмма |
| Резюме | Crossed Circle | cross-circ | crossed-circle, summary | Резюме |
| Помеченный документ | Tagged Document | tag-doc | tagged-document | Помеченный документ |
| Стандартизированный процесс | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Конечная точка | Stadium | stadium | pill, terminal | Конечная точка |
| Текстовый блок | Text Block | text | Текстовый блок |
Ниже приведён пример кода блок-схемы с использованием новых форм:
Копировать
Встраивание
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
Процесс
Копировать
Встраивание
flowchart TD
A@{ shape: rect, label: "This is a process" }
Событие
Копировать
Встраивание
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Подпроцесс
Копировать
Встраивание
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
База данных (цилиндр)
Копировать
Встраивание
flowchart TD
A@{ shape: cyl, label: "Database" }
Начало (круг)
Копировать
Встраивание
flowchart TD
A@{ shape: circle, label: "Start" }
Неправильная фигура
Копировать
Встраивание
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Решение (ромб)
Копировать
Встраивание
flowchart TD
A@{ shape: diamond, label: "Decision" }
Подготовка условия (шестиугольник)
Копировать
Встраивание
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Ввод/вывод данных (наклон вправо)
Копировать
Встраивание
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Ввод/вывод данных (наклон влево)
Копировать
Встраивание
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Приоритетное действие (трапеция)
Копировать
Встраивание
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Ручная операция (перевёрнутая трапеция)
Копировать
Встраивание
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Останов (двойной круг)
Копировать
Встраивание
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Текстовый блок
Копировать
Встраивание
flowchart TD
A@{ shape: text, label: "This is a text block" }
Карточка (прямоугольник с вырезом)
Копировать
Встраивание
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Процесс с линией/тенью
Копировать
Встраивание
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Начало (малый круг)
Копировать
Встраивание
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Останов (круг в рамке)
Копировать
Встраивание
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Разветвление/слияние (длинный прямоугольник)
Копировать
Встраивание
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Упорядочивание (песочные часы)
Копировать
Встраивание
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Комментарий (фигурные скобки)
Копировать
Встраивание
flowchart TD
A@{ shape: comment, label: "Comment" }
Комментарий справа (правая фигурная скобка)
Копировать
Встраивание
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Комментарий (со скобками с обеих сторон)
Копировать
Встраивание
flowchart TD
A@{ shape: braces, label: "Comment" }
Канал связи (молния)
Копировать
Встраивание
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Документ
Копировать
Встраивание
flowchart TD
A@{ shape: doc, label: "Document" }
Задержка (полукруглый прямоугольник)
Копировать
Встраивание
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Копировать
Встраивание
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Дисковая память (цилиндр с прорезью)
Копировать
Встраивание
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Дисплей (фигура отображения)
Копировать
Встраивание
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Разделение обработки (разделённый прямоугольник)
Копировать
Встраивание
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Извлечение (малый треугольник)
Копировать
Встраивание
flowchart TD
A@{ shape: tri, label: "Extract" }
Внутренняя память (панель окна)
Копировать
Встраивание
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Точка соединения (закрашенный круг)
Копировать
Встраивание
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Документ с линией
Копировать
Встраивание
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Ограничение цикла (пятиугольник с вырезом)
Копировать
Встраивание
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Ручной файл (перевёрнутый треугольник)
Копировать
Встраивание
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Ручной ввод (прямоугольная трапеция)
Копировать
Встраивание
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Несколько документов (составной документ)
Копировать
Встраивание
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Несколько процессов (составной прямоугольник)
Копировать
Встраивание
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Бумажная лента (флаг)
Копировать
Встраивание
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Хранение данных (прямоугольник-бабочка)
Копировать
Встраивание
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Резюме (круг с крестом)
Копировать
Встраивание
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Помеченный документ
Копировать
Встраивание
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Помеченный процесс
Копировать
Встраивание
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Особые формы в блок-схеме Mermaid
Mermaid также добавила изображения для улучшения вашей блок-схемы, позволяя включать изображения непосредственно в блок-схему, тем самым обеспечивая больше визуального контекста и ясности.
Форма изображения
Вы можете использовать image для вставки изображения в блок-схему; синтаксис определения изображения следующий:
Копировать
Встраивание
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Параметр
- img: URL-адрес изображения для отображения.
- label: текстовая метка, связанная с изображением; может быть любой строкой. Если не определена, метка не отображается.
- pos: положение метки. Если не определено, по умолчанию метка размещается внизу изображения.
- w: ширина изображения. Если не определено, по умолчанию используется естественная ширина изображения.
- h: высота изображения. Если не определено, по умолчанию используется естественная высота изображения.
- constraint: определяет, ограничивает ли изображение размер узла. Эта настройка также гарантирует, что изображение сохраняет исходное соотношение сторон и подстраивает высоту в соответствии с шириной. Если не определено, по умолчанию используется off .
Изображения придают вашей блок-схеме дополнительную гибкость и визуальную привлекательность, делая её более информативной и привлекательной.
Соединения между узлами
Узлы могут соединяться соединительными линиями и стрелками. Существуют различные типы связей, а также можно прикреплять текстовые строки к связям.
Связь со стрелкой
Копировать
Встраивание
flowchart LR
A-->B
Открытая связь
Копировать
Встраивание
flowchart LR
A --- B
Связь с текстом
Копировать
Встраивание
flowchart LR
A-- This is the text! ---B
или
Копировать
Встраивание
flowchart LR
A --- | This is the text| B
Связь со стрелкой и текстом
Копировать
Встраивание
flowchart LR
A-->|text|B
или
Копировать
Встраивание
flowchart LR
A-- text -->B
Пунктирная связь
Копировать
Встраивание
flowchart LR
A-.->B;
Пунктирная связь с текстом
Копировать
Встраивание
flowchart LR
A-. text .->B;
Жирная связь
Копировать
Встраивание
flowchart LR
A ==> B
Жирная связь с текстом
Копировать
Встраивание
flowchart LR
A == |text| ==> B
Невидимая связь
Копировать
Встраивание
flowchart LR
A ~~~ B
Цепочка связей
Копировать
Встраивание
flowchart LR
A -- text --> B -- text2 --> C
Также можно объявить несколько связей узлов в одной строке, как показано ниже:
Копировать
Встраивание
flowchart LR
a --> b & c--> d
Вы также можете описать зависимости, как в следующем коде:
Копировать
Встраивание
flowchart LR
a --> b & c--> d & e--> f
Если описать тот же граф с помощью базового синтаксиса, потребуется 8 строк. Следует напомнить, что чрезмерное использование этого метода может усложнить чтение блок-схемы в формате Markdown.
Копировать
Встраивание
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Добавление ID к соединительной линии
Mermaid теперь поддерживает добавление ID к соединительным линиям, аналогично прикреплению ID и метаданных к узлам. Эта функция закладывает основу для более продвинутых возможностей стилизации, классов и анимации соединительных линий.
Синтаксис:Чтобы добавить ID к соединительной линии, поставьте ID перед синтаксисом соединительной линии, сразу за ним следует символ @. Например:
Копировать
Встраивание
flowchart LR
A e1@--> B
В этом примере e1 — это ID соединительной линии, соединяющей A и B. Вы можете использовать этот ID в последующих определениях или операторах стиля так же, как и для узла.
Включение анимации
После добавления ID к соединительной линии вы можете включить анимацию соединительной линии, определив её свойства:
Копировать
Встраивание
flowchart LR
A e1@==> B
e1@{ animate: true }
Это сообщает Mermaid, что соединительная линия e1 анимирована.
Выбор типа анимации
В первоначальной версии поддерживаются две скорости анимации: fast и slow. Выбор конкретного типа анимации — это простой способ включить анимацию и одновременно задать скорость анимации.
Копировать
Встраивание
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Анимация с помощью оператора classDef
Вы также можете анимировать соединительную линию, назначив ей класс, а затем определив свойства анимации в операторе classDef. Например:
Копировать
Встраивание
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
В этом коде:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate определяет класс с именем animate, обладающий свойствами стиля и анимации.
- class e1 animate применяет класс animate к соединительной линии e1.
Замечание об экранировании запятой: при задании свойства stroke-dasharray помните, что запятую нужно экранировать как ,, поскольку запятая используется в качестве разделителя в определениях стилей Mermaid.
Новый тип стрелки
Поддержка новых типов стрелок
- Соединительная линия с закрашенным кругом
- Соединительная линия с перекрестием
Соединительная линия с закрашенным кругом
Копировать
Встраивание
flowchart LR
A --o B
Соединительная линия с перекрестием
Копировать
Встраивание
flowchart LR
A --x B
Многонаправленные стрелки
Можно использовать многонаправленные стрелки, например:
Копировать
Встраивание
flowchart LR
A o--o B
B <--> C
C x--x D
Длина соединительной линии
Каждому узлу в блок-схеме в зависимости от узлов, с которыми он соединён, присваивается уровень в отрендеренном графе, то есть вертикальный или горизонтальный уровень (в зависимости от направления блок-схемы). По умолчанию связи могут охватывать любое количество уровней, но вы можете потребовать, чтобы некая связь была длиннее других, добавив дополнительные дефисы в определение соединения.
В этом примере в соединение от узла B к узлу E добавлены два дополнительных дефиса, так что оно охватывает на два уровня больше, чем обычная связь:
Копировать
Встраивание
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Когда метка соединения записывается в середине соединения, необходимо добавить дополнительные дефисы справа от соединения. Этот пример эквивалентен предыдущему:
Копировать
Встраивание
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
Для пунктирных линий или жирных связей добавляемым символом является знак равенства или точка, как показано в таблице ниже:
| Длина | 1 | 2 | 3 |
|---|---|---|---|
| Обычное соединение | --- | ---- | ----- |
| Обычное соединение со стрелкой | --> | ---> | ----> |
| Жирное соединение | === | ==== | ===== |
| Жирное соединение со стрелкой | ==> | ===> | ====> |
| Пунктирная линия | -.- | -..- | -...- |
| Пунктирная линия со стрелкой | -.- | -..-> | -...-> |
Специальные символы
Текст можно заключать в кавычки для отображения более сложных символов. Как показано в следующем примере:
Копировать
Встраивание
flowchart LR
id1["This is the (text) in the box"]
Символьные сущности для экранирования символов
Символы можно экранировать с помощью синтаксиса из примера.
Копировать
Встраивание
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Приведённое число является десятичным, поэтому # можно закодировать как #35. Также поддерживается использование имён символов HTML.
Подграф
Копировать
Встраивание
subgraph title
graph definition
end
Ниже приведён пример:
Копировать
Встраивание
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Вы также можете задать id для подграфа.
Копировать
Встраивание
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
Направление подграфа
При использовании типа блок-схемы вы можете задать направление рендеринга подграфа с помощью оператора направления, как показано ниже:
Копировать
Встраивание
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
Ограничения
Если какой-либо узел подграфа соединён с внешней частью, направление подграфа игнорируется. В противном случае подграф наследует направление родительского графа:
Копировать
Встраивание
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
Строки Markdown
Строки Markdown улучшают блок-схемы и интеллект-карты, предоставляя более гибкий тип строки, поддерживая такие параметры форматирования текста, как полужирный и курсив, а также возможность автоматического переноса текста внутри метки.
Копировать
Встраивание
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- Чтобы сделать текст полужирным, используйте две звёздочки (**) перед текстом и после него.
- Для курсива используйте одну звёздочку (*) перед текстом и после него.
- Для традиционных строк вам нужно добавить тег <br>, чтобы текст переносился в узле. Однако строки Markdown автоматически переносятся, когда текст слишком длинный, и для начала новой строки достаточно использовать символ перевода строки вместо тега <br>.
Эта функция применима к меткам узлов, меткам соединительных линий и меткам подграфов
Автоматический перенос можно отключить с помощью специального синтаксиса
Копировать
Встраивание
---
config:
markdownAutoWrap: false
---
graph LR
Комментарий
В блок-схему можно вводить комментарии, которые редактор игнорирует. Комментарий должен занимать отдельную строку и начинаться с двойного знака процента (%%). Любой текст от начала комментария до следующей строки считается комментарием, включая любой синтаксис блок-схемы.
Копировать
Встраивание
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Стили и классы
Стиль связи
Можно задать стиль связи. Например, вы можете захотеть оформить связь, которая движется назад в процессе; поскольку связи, в отличие от узлов, не имеют ID, необходимо определить стиль, применяемый к связи, другим способом. Используйте порядковый номер при определении связи или значение по умолчанию, применяемое ко всем связям.
Копировать
Встраивание
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Также можно добавить стиль нескольким связям, разделив номера связей запятыми в одном операторе:
Копировать
Встраивание
linkStyle 1,2,7 color:blue;
Настройка стиля кривой соединительной линии
Если метод по умолчанию не удовлетворяет вашим потребностям, можно задать стиль кривой для соединительных линий между элементами. Доступные стили кривых включают basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter и stepBefore.
В приведённом ниже примере диаграмма слева направо использует стиль кривой stepBefore.
Копировать
Встраивание
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Настройка стиля узла
Можно задать узлу определённый стиль, например более толстую рамку или другой цвет фона.
Копировать
Встраивание
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
Класс
Вместо определения стиля каждый раз удобнее определить класс стиля и прикрепить этот класс к узлам, которым нужен другой внешний вид.
Определение класса выглядит следующим образом:
Копировать
Встраивание
classDef className fill:pink,stroke:#333,stroke-width:4px;
Кроме того, можно определить стиль для нескольких классов в одном операторе:
Копировать
Встраивание
classDef firstClassName,secondClassName font-size:12pt;
Прикрепление класса к узлу выполняется следующим образом:
Копировать
Встраивание
class nodeId1 className;
Также можно прикрепить класс к списку узлов в одном операторе:
Копировать
Встраивание
class nodeId1,nodeId2 className;
Для добавления класса можно использовать оператор :::, чтобы прикрепить имя класса к узлу, как показано ниже:
Копировать
Встраивание
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Эту форму можно использовать при объявлении нескольких связей между узлами:
Копировать
Встраивание
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- В объявлении графа операторы теперь могут не заканчиваться точкой с запятой. После версии 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]
