How to insert a diagram or a flow chart

You can insert a diagram or a flow chart formatted using one of the graph description languages:

Graphviz (DOT)

is best for graphs and trees.

Markup Result
%%(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
}
%%

You can use optional parameters to configure the graph's appearance:

  • dot, neato, circo, twopi, fdp – The name of the tool for building the graph. dot is used by default.

  • width – The maximum width of the graph, in pixels.

  • height – The maximum height of the graph, in pixels.

Blockdiag
Blockdiag is used for creating flow charts.
Markup Result

%%(blockdiag)
{
orientation = portrait
  box [shape = "box"];
  roundedbox [shape = "roundedbox"];
  diamond [shape = "diamond"];
  ellipse [shape = "ellipse"];
  box -> roundedbox -> diamond -> ellipse;
}
%%
                      

You can use optional parameters to configure the diagram's appearance:

  • width – The maximum width of the flow chart, in pixels.

  • height – The maximum height of the flow chart, in pixels.

Seqdiag

Seqdiag is used for creating .

Markup Result
%%(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"];
}
%%

You can use optional parameters to configure the diagram's appearance:

  • width – The maximum width of the diagram, in pixels.

  • height – The maximum height of the diagram, in pixels.