В этой статье в основном рассказывается, как быстро начать работуMermaidБлок-схема, нет загрузки карты, нет необходимости перетаскивать точки, на основе исходного кода блок-схема рендеринга в реальном времени, проста в эксплуатации, проста, обширна, интегрирована в основной редактор, в том числеmarkdownсреда письма.
В этом разделе вы изучите следующее основное содержание:
- Узнайте, что такое блок-схема и
Mermaidблок-схема; - Понять и помнить, как рисовать
Mermaidблок-схема; - К пониманию
GitbookСоответствующие плагины интеграции для среды написания.
Что такое блок-схема русалки
Ключевые слова
- 项目地址
- 在线编辑
- 官方文档
Тысяча слов не так хороша, как картинка, и график, который использует графики для отображения потока обработки вещей, называется графиком.блок-схема.
Mermaidосновывается наJavascriptпо диаграмме и инструментам рисования. Он основан наmarkdownсинтаксис для упрощения и ускорения процесса создания блок-схем, а не только создания блок-схем.
исходный код
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
Эффект
- адрес проекта:GitHub.com/русалка-просто/…
- Онлайн редактор:русалка это .GitHub.IO / русалка- Lee V ...
- Официальная документация:русалка — просто .GitHub.IO/mermaid/#/post…
Быстрый старт с блок-схемой Mermaid
направление компоновки
Ключевые слова
+ TB
+ BT
+ LR
+ RL
Направление компоновки блок-схемы состоит из четырех основных направлений, которые представляют собой английские слова:top(начальство),bottom(Вниз),left(слева) иright(справа).Где необязательные значения:TB(сверху донизу),BT(снизу вверх),LR(слева направо) иRL(справа налево) Четыре.
основной: Только четыре вертикально вверх и вниз, английское слово капитализированные инициалы.
- TB
Сверху вниз: отTop to Bottom
исходный код
graph TB
Start --> Stop
Эффект
- BT
Снизу вверх: отBottom to Top
исходный код
graph BT
Start --> Stop
Эффект
- LR
Слева направо: отLeft to Right
исходный код
graph LR
Start --> Stop
Эффект
- RL
Справа налево: отRight to Left
исходный код
graph RL
Start --> Stop
Эффект
форма
Ключевые слова
- 节点形状
+ [矩形]
- [[暂不支持]]
- [(圆柱)]
- [{暂不支持}]
- [/平行四边形/]
- [\平行四边形\]
- [/梯形\]
- [\梯形/]
+ (圆角矩形)
- ((圆形))
- ([体育场])
- ({暂不支持})
+ {菱形}
- {{六边形}}
- {[暂不支持]}
- {(暂不支持)}
+ >不对称矩形]
Фигуры блок-схем узлов, прямоугольники и круги по умолчанию поддерживают две основные фигуры, включая простой вариант базовой фигуры, поддерживают вложенные комбинации, в которых[]представляет собой прямоугольник,()представляет дугу,{}Указывает на острые углы<>больше подходит) и так далее.
основной: внешний слой представляет собой основную форму, а внутренний слой является вспомогательным украшением.
одноразовый узел
Одноразовый узел, по умолчанию это прямоугольный узел, и его текстовое содержимое отображается напрямую.idЭто значение подходит для случая, когда множественные ссылки не будут встречаться в будущем.
idРекомендуется писать его непосредственно как осмысленное текстовое описание, а не как уникальный идентификатор.
исходный код
graph TD
id
Эффект
Повторяемый узел, задает форму узла, его текстовое содержимое больше неidвместо этого значение<node shape>Значение , подходящее для последующих случаев, когда на один и тот же узел ссылаются несколько раз.
idПредставляет уникальный идентификатор узла, текстовое описание текущего узла задается<node shape>Значение указано, рекомендуетсяidЗаписывается как осмысленный уникальный идентификатор.
- прямоугольник
Общий формат:
[node description],[]Квадратные скобки означают, что узелпрямоугольникформа,node descriptionтекст описания узла.
исходный код
graph LR
id1[This is the text in the box]
Эффект
- Прямоугольник с закругленными углами
Общий формат:
(node description),()Скобки указывают, что узелПрямоугольник с закругленными угламиформа,node descriptionтекст описания узла.
исходный код
graph LR
id1(This is the text in the box)
Эффект
- стадион
Общий формат:
([node description]),()вложение скобок[]Квадратные скобки указывают на то, что узел представляет собой закругленную прямоугольную форму с большими радианами, т. е.стадионформа,node descriptionтекст описания узла.
исходный код
graph LR
id1([This is the text in the box])
Эффект
- цилиндр
Общий формат:
[(node description)],[]вложенные скобки()Скобки указывают, что узелцилиндрформа,node descriptionтекст описания узла.
исходный код
graph LR
id1[(Database)]
Эффект
- круглый
Общий формат:
((node description)),()вложение скобок()Скобки указывают, что узелкруглыйформа,node descriptionтекст описания узла.
исходный код
graph LR
id1((This is the text in the circle))
Эффект
- асимметричный прямоугольник
Общий формат:
>node description], левая - правая угловая скобка>, правая сторона - правая скобка]выражатьасимметричный прямоугольникформа,node descriptionтекст описания узла.
исходный код
graph LR
id1>This is the text in the box]
Эффект
- алмаз
Общий формат:
{node description},{}фигурные скобкиалмазформа,node descriptionтекст описания узла.
исходный код
graph LR
id1{This is the text in the box}
Эффект
- Шестиугольник
Общий формат:
{{node description}},{}вложенные скобки{}фигурные скобкиШестиугольникформа,node descriptionтекст описания узла.
исходный код
graph LR
id1\{\{This is the text in the box\}\}
Gitbookдвойные фигурные скобки в грамматике{}Это указывает на особое значение, то единственный исходный исход, на самом деле не нужен\Сбежать.
Эффект
- Параллелограмм
Общий формат:
[/node description/],[]вложенные скобки//Левая косая черта означаетЛевый косой параллелограммформа,node descriptionтекст описания узла.
исходный код
graph TD
id1[/This is the text in the box/]
Эффект
- Параллелограмм
Общий формат:
[\node description\],[]вложенные скобки\\правая косая черта означаетПравая наклонная параллелограммаформа,node descriptionтекст описания узла.
исходный код
graph TD
id1[\This is the text in the box\]
Эффект
- трапеция
Общий формат:
[/node description\],[]вложенные скобки/\Левая и правая косая чертаКороткая верхняя и нижняя длинная трапецияформа,node descriptionтекст описания узла.
исходный код
graph TD
A[/Christmas\]
Эффект
- Другой трапециевидный
Общий формат:
[\node description/],[]вложенные скобки\/правая и левая косая чертаДлинная верхняя и короткая нижняя трапецияформа,node descriptionтекст описания узла.
исходный код
graph TD
B[\Go shopping/]
Эффект
соединительная линия
Ключевые слова
+ 实线/虚线
- --
- -.
+ 有箭头/无箭头
- >
- -
+ 有描述/无描述
- 实线
+ --描述文字
+ |描述文字|
- 虚线
+ -.描述文字
+ |描述文字|
+ 加粗
- ==
+ 组合形式
- -->
- ---
- -.->
- -.-
- 有描述实线有箭头
+ --描述文字-->
+ -->|描述文字|
- 有描述实线无箭头
+ --描述文字---
+ ---|描述文字|
- 有描述虚线有箭头
+ -.描述文字-.->
+ -.->|描述文字|
- 有描述虚线无箭头
+ -.描述文字-.-
+ -.-|描述文字|
- ==>
- ===
- 有描述加粗实线有箭头(2)
+ ==描述文字==>
+ ==>|描述文字|
- 有描述加粗实线无箭头(2)
+ ==描述文字===
+ ===|描述文字|
Стиль линии блок-схемы, поддерживает твердую линию и пунктирную линию, стиль стрелки и без стиля стрелки, в дополнение к добавлению текста описания соединительной линии, среди которых--Представляет собой сплошную линию с небольшим выступом в середине сплошной линии.-.-Чтобы представлять пунктирную линию, добавьте стрелку с углом закрытия кронштейна>, стрелки не заканчиваются тире-.
основной: сначала сплошная линия, а затем пунктирная линия, сначала стрелка, а затем стрелка, текст описания с левой стороны необходимо отличать от реализации или пунктирной линии, а текст описания с правой стороны имеет тот же формат .
- Сплошная линия со стрелкой и без описания
Общий формат:
-->,в--Указывает сплошную линию,>Он выразился стрелой.
исходный код
graph LR
A-->B
Эффект
- Сплошная линия без стрелки
Общий формат:
---,в--представляет сплошную линию,-Указывает на нет стрелок.
исходный код
graph LR
A --- B
Эффект
- Сплошная линия со стрелками с описанием
Общий формат:
--connection line description-->, из которых осталось--добавить вЛевое положение сплошной линии,правая сторона-->выражатьсплошная линия со стрелкой.
исходный код
graph LR
A-- text -->B
Эффект
Общий формат:
|connection line description|,в||добавить вПравильное положение соединительной линии.
исходный код
graph LR
A-->|text|B
Эффект
- Сплошная линия без стрелок с описанием
Общий формат:
--connection line description, из которых осталось--добавить вЛевое положение сплошной линии,правая сторона---выражатьсплошная линия без стрелки.
исходный код
graph LR
A-- This is the text ---B
Эффект
Общий формат:
|connection line description|,в||добавить вПравильное положение соединительной линии.
исходный код
graph LR
A---|This is the text|B
Эффект
- пунктирная линия со стрелкой
Общий формат:
-.connection line description.->, из которых осталось-.добавить в,правая сторона.->выражатьпунктирная линия со стрелкой.
исходный код
graph LR
A-. text .-> B
Эффект
- Сплошная жирная линия со стрелками
Общий формат:
==>, представляет собой жирную сплошную линию.
исходный код
graph LR
A ==> B
Эффект
- Жирная сплошная линия со стрелками с описанием
Общий формат:
==connection line description,слева==Добавить к Bold для достижения влево, вправо==>Представляет жирную сплошную линию.
исходный код
graph LR
A == text ==> B
Эффект
- Жирная сплошная линия со стрелками с описанием
Общий формат:
|connection line description|,в||добавить вПравильное положение соединительной линии.
исходный код
graph LR
A ==>|text| B
Эффект
Расширенное использование
Ключевые слова
+ -->-->
+ &
+ ""
+ %%
+ subgraph
- Многоузловое цепное соединение
исходный код
Цепное соединение поддержки,A-->B-->CЭквивалентноA-->Bа такжеB-->Cформа.
graph LR
A -- text --> B -- text2 --> C
Эффект
- Многоузловое общее соединение
Поддержка общего метода подключения,A-->B & CЭквивалентноA-->Bа такжеA-->Cформа.
исходный код
graph LR
a --> b & c--> d
Эффект
- Несколько узлов соединены друг с другом
Вариант многоузлового сосоединения,A & B --> C & DЭквивалентноA-->C ,A-->D,B-->Cа такжеB-->DЧетыре комбинации.
исходный код
graph TB
A & B--> C & D
Эффект
- Двойные кавычки оборачивают специальные символы
Текст описания линии подключения содержит специальные символы и использует двойные кавычки.""Обработка пакетов, если они встречаются[]а также()так же как{}и другие специальные символы.
исходный код
graph LR
id1["This is the (text) in the box"]
Эффект
- Двойные кавычки заключают escape-символы
служба поддержкиHtmlescape-символ
исходный код
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
Эффект
- Вложенные диаграммы подлока
определение
subgraph title
graph definition
end
Пример
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
- Синтаксис комментариев
аннотированный с%%начать и быть на линии своей собственной.
graph LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Резюме обзора блок-схемы быстрого старта
Ключевые слова
- 英文单词缩写
- 几何化形状
- 有限语法
Mermaidэто инструмент для рисования с открытым исходным кодом, который можно использоватьMarkdownСинтаксис для рисования блок-схем, поддержка изменения формы узлов блок-схемы, добавления текста описания, изменения стиля соединительных линий и т. д.
Аббревиатура английского слова
Значения четырех направлений компоновки представляют собой аббревиатуры английских слов с заглавной буквы, и по умолчанию поддерживается только вертикальное направление.
| китайский язык | английский | Пример |
|---|---|---|
| диаграмма | graph |
graphИдентификация типа блок-схемы |
| подграф | subgraph |
subgraphИдентификация вложенной схемы подпотока |
| начальство | top |
TBилиBT, направление компоновки сверху вниз или снизу вверх |
| Вниз | bottom |
BTилиTB, направление компоновки снизу вверх или сверху вниз |
| Осталось | left |
LRилиRL, направление макета слева направо или справа налево |
| правильно | right |
RLилиLR, Справа налево или слева направо направление компоновки |
Геометрическая форма
Символы клавиатуры визуализируют геометрические фигуры, а составная форма представляет собой суперпозицию фигур, где самый внешний символ является основной формой, а вложенный символ — вспомогательной формой.
- основная единица
| Обозначение | имея в виду | Типы | Примечание |
|---|---|---|---|
[] |
прямоугольник | форма узла | служба поддержки |
() |
Прямоугольник с закругленными углами | форма узла | служба поддержки |
{} |
алмаз | форма узла | служба поддержки |
<> |
алмаз | форма узла | не поддерживается |
-- |
Сплошная линия | стиль соединителя | служба поддержки |
-. |
пунктирная линия | стиль соединителя | служба поддержки |
== |
жирная сплошная линия | стиль соединителя | служба поддержки |
=: |
жирная пунктирная линия | стиль соединителя | не поддерживается |
> |
со стрелами | стиль соединителя | служба поддержки |
- |
нет стрелки | стиль соединителя | служба поддержки |
双竖线 |
Текст описания правой соединительной линии | текст описания коннектора | служба поддержки |
-- |
Текст описания левой сплошной соединительной линии | текст описания коннектора | служба поддержки |
-. |
текст описания коннектора | служба поддержки | |
== |
текст описания коннектора | служба поддержки | |
=: |
Текст описания соединительной линии, выделенный жирным шрифтом слева | текст описания коннектора | не поддерживается |
- Комбинированный блок
| Обозначение | имея в виду | Типы | Примечание |
|---|---|---|---|
[[]] |
квадратный | форма узла | не поддерживается |
[()] |
цилиндр | форма узла | служба поддержки |
[{}] |
призма | форма узла | не поддерживается |
(()) |
круглый | форма узла | служба поддержки |
([]) |
стадион | форма узла | служба поддержки |
({}) |
дуга | форма узла | не поддерживается |
双大括号 |
шестиугольник | форма узла | служба поддержки |
{[]} |
правильный многоугольник | форма узла | не поддерживается |
{()} |
дуга | форма узла | не поддерживается |
--> |
Сплошная линия со стрелкой | стиль соединителя | служба поддержки |
--- |
Сплошная линия без стрелки | стиль соединителя | служба поддержки |
-.> |
стиль соединителя | не поддерживается | |
-.-> |
стиль соединителя | служба поддержки | |
.-> |
Пунктирная линия со стрелкой | стиль соединителя | служба поддержки |
-.- |
Пунктирная линия без стрелки | стиль соединителя | служба поддержки |
.- |
Пунктирная линия без стрелки | стиль соединителя | служба поддержки |
==> |
жирная сплошная линия со стрелкой | стиль соединителя | служба поддержки |
=== |
Жирная сплошная линия без стрелки | стиль соединителя | служба поддержки |
=:> |
жирная пунктирная линия со стрелкой | стиль соединителя | не поддерживается |
=:=> |
жирная пунктирная линия со стрелкой | стиль соединителя | не поддерживается |
=:= |
Жирная пунктирная линия без стрелки | стиль соединителя | не поддерживается |
:= |
Жирная пунктирная линия без стрелки | стиль соединителя | не поддерживается |
双竖线 |
Текст описания правой соединительной линии | текст описания коннектора | служба поддержки |
--connection line description--> |
текст описания коннектора | служба поддержки | |
-.connection line description-.-> |
текст описания коннектора | служба поддержки | |
--connection line description--- |
Сплошная левая линия без стрелки, соединяющая текст описания линии | текст описания коннектора | служба поддержки |
-.connection line description-.- |
Пунктирная линия слева без текста описания соединительной линии со стрелкой | текст описания коннектора | служба поддержки |
==connection line description==> |
Слева жирная сплошная линия со стрелкой, соединяющей текст описания линии | текст описания коннектора | служба поддержки |
=:connection line description=:=> |
текст описания коннектора | не поддерживается | |
==connection line description=== |
Слева жирная сплошная линия без стрелки, соединяющая текст описания линии | текст описания коннектора | служба поддержки |
=:connection line description=:= |
Жирная пунктирная линия слева без текста описания линии соединения со стрелкой | текст описания коннектора | не поддерживается |
ограниченная грамматика
Будь то форма узла или стиль соединительной линии, поддержка синтаксиса ограничена, и это не состояние суперпозиции случайной комбинации, и она может поддерживать больше с последующими обновлениями, и все в основном основано на официальных документах.
В дополнение к предоставлению самых основных возможностей для работы с узлами, вы также можетеJSа такжеCSSСоответствующие знания очень настраивают поведение блок-схем. Для получения подробной информации, пожалуйста, обратитесь к официальной документации.
Официальная документация:русалка — просто .GitHub.IO/mermaid/#/post…
- Возможность взаимодействиярусалка — просто .GitHub.IO/mermaid/#/post…
- Стили внешности Стайлинг и классы:русалка — просто .GitHub.IO/mermaid/#/post…
- Поддержка шрифтов Базовая поддержка fontawesome:русалка — просто .GitHub.IO/mermaid/#/post…
- Разделение пространстварусалка — просто .GitHub.IO/mermaid/#/post…