Diagrams and flowcharts

Note

For information on working with diagrams in the new editor, see Formatting text.

Warning

Specially formatted blocks work in both dynamic tables and pages built with the legacy editor.

Creating new pages in the legacy editor is no longer possible.

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
 }
 %%
See the result

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 is dot.

  • 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;
}
%%
See the result

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"];
}
%%
See the result

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
%%
See the result

For more information about the PlantUML diagram markup language, see the PlantUML Language Reference Guide.