Диаграммы и блок-схемы
Примечание
Работа с диаграммами в новом редакторе описана на странице Форматирование текста.
Важно
Блоки со специальным форматированием работают в динамических таблицах и на страницах, созданных в старом редакторе.
Возможность создать страницу в старом редакторе больше не доступна.
Вы можете конвертировать страницу, созданную в старом редакторе, в страницу нового редактора. Подробнее в разделе Перевести страницу на новый редактор.
Чтобы добавить на страницу диаграмму, схему или граф, можно использовать один из поддерживаемых языков текстовой разметки.
Graphviz (DOT)
Graphviz лучше всего подходит для оформления графов и деревьев.
Пример разметки:
%%(graphviz neato)
digraph A {
a -> b0
a -> b3
xb [label="hi",width=.1,style=invis]
a -> xb [style=invis]
a -> b1
{rank=same b0 -> xb -> b1 [style=invis]}
b0 -> c0
xc [label="bye",width=.1,style=invis]
b0 -> xc [style=invis]
b0 -> c1
{rank=same c0 -> xc -> c1 [style=invis]}
b0 -> c2
}
%%
Как выглядит результат
Настроить внешний вид графа можно с помощью необязательных параметров:
-
dot,neato,circo,twopi,fdp— имя утилиты, с помощью которой строится граф. По умолчанию используетсяdot. -
width— максимальная ширина графа в пикселях. -
height— максимальная высота графа в пикселях.
Blockdiag
Blockdiag предназначен для построения блок-схем.
Пример разметки:
%%(blockdiag)
{
orientation = portrait
box [shape = "box"];
roundedbox [shape = "roundedbox"];
diamond [shape = "diamond"];
ellipse [shape = "ellipse"];
box -> roundedbox -> diamond -> ellipse;
}
%%
Как выглядит результат
Настроить внешний вид блок-схемы можно с помощью необязательных параметров:
-
width— максимальная ширина блок-схемы в пикселях. -
height— максимальная высота блок-схемы в пикселях.
Seqdiag
Seqdiag предназначен для построения диаграмм последовательностей.
Пример разметки:
%%(seqdiag)
{
// normal edge and doted edge
A -> B [label = "normal edge"];
B --> C [label = "dotted edge"];
B <-- C [label = "return dotted edge"];
A <- B [label = "return edge"];
// asynchronus edge
A ->> B [label = "asynchronus edge"];
B -->> C [label = "asynchronus dotted edge"];
B <<-- C [label = "return asynchronus doted edge"];
A <<- B [label = "return asynchronus edge"];
// self referenced edge
A -> A [label = "self reference edge"];
}
%%
Как выглядит результат
Настроить внешний вид диаграммы можно с помощью необязательных параметров:
-
width— максимальная ширина диаграммы в пикселях. -
height— максимальная высота диаграммы в пикселях.
PlantUML
PlantUML — проект с открытым кодом, который поддерживает множество нотаций и позволяет быстро создавать сложные диаграммы.
Пример разметки:
%%(plantuml)
@startuml
actor Foo1
boundary Foo2
control Foo3
entity Foo4
database Foo5
collections Foo6
queue Foo7
Foo1 -> Foo2 : To boundary
Foo1 -> Foo3 : To control
Foo1 -> Foo4 : To entity
Foo1 -> Foo5 : To database
Foo1 -[#00cc00]> Foo6 : To collections
Foo1 -> Foo7 : To Queue
@enduml
%%
Как выглядит результат
Подробнее о языке разметки диаграмм PlantUML можно прочитать в Справочном руководстве по языку PlantUML.