Diagrams and flowcharts in the old editor
Specially formatted blocks work in both dynamic tables and pages built with the legacy editor. For information on working with diagrams in the new editor, see Formatting text.
You can no longer create pages using the old editor. However, you can easily convert any existing pages from the legacy editor to the new editor format. For more information, see Switching a page to the new editor format.
To add a diagram, chart, or graph to the page, you can use one of the supported text markup languages.
Graphviz (DOT)
Graphviz is best suited for creating graphs and trees.
Sample markup:
%%(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
}
%%
Customize your graph using optional parameters:
-
dot,neato,circo,twopi,fdp: Name of the tool you are using to create the graph. The default value isdot. -
width: Maximum width of the graph in pixels. -
height: Maximum height of the graph in pixels.
Blockdiag
Blockdiag is designed for creating flowcharts.
Sample markup:
%%(blockdiag)
{
orientation = portrait
box [shape = "box"];
roundedbox [shape = "roundedbox"];
diamond [shape = "diamond"];
ellipse [shape = "ellipse"];
box -> roundedbox -> diamond -> ellipse;
}
%%
You can configure the flowchart layout using optional parameters:
-
width: Maximum width of the flowchart in pixels. -
height: Maximum height of the flowchart in pixels.
Seqdiag
Seqdiag is designed for creating sequence charts.
Sample markup:
%%(seqdiag)
{
// normal edge and dotted edge
A -> B [label = "normal edge"];
B --> C [label = "dotted edge"];
B <-- C [label = "return dotted edge"];
A <- B [label = "return edge"];
// asynchronous edge
A ->> B [label = "asynchronous edge"];
B -->> C [label = "asynchronous dotted edge"];
B <<-- C [label = "return asynchronous dotted edge"];
A <<- B [label = "return asynchronous edge"];
// self-reference edge
A -> A [label = "self-reference edge"];
}
%%
You can customize your diagram using optional parameters:
-
width: Maximum width of the diagram in pixels. -
height: Maximum height of the diagram in pixels.
PlantUML
PlantUML is an open-source project that supports multiple notations and helps you quickly create complex diagrams.
Sample markup:
%%(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
%%
For more information about the PlantUML diagram markup language, see the PlantUML Language Reference Guide.