Help:Contributing/diagrams

Diagrams are written in the page text and render automatically when the page is viewed — no external tool, no exporting and re-uploading an image. Editing a diagram is editing the page itself.

Tag	What it renders	Where it renders
<uml>	PlantUML (sequence, class, state, activity, component, …)	server-side, cached image
<graphviz>	GraphViz (dot, neato, fdp, sfdp, circo, twopi, osage)	server-side, cached image
<mscgen>	Message sequence charts	server-side, cached image
<mermaid>	Mermaid (flowchart, sequence, ER, Gantt, …)	in your browser

PlantUML

Write the diagram body directly, with type="uml":

<uml type="uml">
Alice -> Bob: hello
</uml>

Result:

You can also write the usual @startuml/@enduml directives (both forms work):

<uml>
@startuml
Alice -> Bob: hello
@enduml
</uml>

The bundled PlantUML stdlib is available (!include <C4/C4_Context> and friends).

PlantUML runs in its SANDBOX security profile on this instance: !include of local files and URLs is disabled. Diagrams must be self-contained (except the bundled stdlib).

GraphViz

<graphviz>
digraph g { A -> B -> C }
</graphviz>

The renderer attribute selects the layout engine — the same graph under each engine (the body is identical in every row; only the attribute changes):

Renderer	Same graph
dot (default)
neato
fdp
sfdp
circo
twopi
osage

Mscgen

<mscgen>
msc { A, B; A -> B [ label="hello" ]; }
</mscgen>

Mermaid

<mermaid>
graph LR
  A --> B
</mermaid>

graph LR A --> B

Mermaid renders in your browser (JavaScript): the diagram is empty in printed/static export. Use <uml> for print-friendly diagrams.

Output format

The default output is SVG (crisp, small). Force PNG per diagram with format="png":

<uml type="uml" format="png">
Alice -> Bob: hello
</uml>

See also

• Help:Contributing — contributing to this wiki
• Help:Contributing/math — LaTeX + KaTeX math
• Help:Contributing/code — code blocks and syntax highlighting