Help:Contributing/diagrams: Difference between revisions

From Wikibase
Jump to navigation Jump to search
mNo edit summary
Line 1: Line 1:
Diagrams are written <b>in the page text</b> 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.
RonzzWikiBase has the Diagrams extension installed (vendored v1.0.0).
Therefore, you can create diagrams directly with in the page via PlantUML/GraphViz/Mscgen/Mermaid snippets.


{| class="wikitable"
{| class="wikitable"
Line 15: Line 16:


== PlantUML ==
== PlantUML ==
Write the diagram body directly, with <syntaxhighlight lang="wikitext" inline>type="uml"</syntaxhighlight>:


<syntaxhighlight lang="wikitext" copy><uml type="uml">
<syntaxhighlight lang="wikitext" copy><uml type="uml">

Revision as of 17:13, 24 August 2026

Languages: English · français · Esperanto

RonzzWikiBase has the Diagrams extension installed (vendored v1.0.0). Therefore, you can create diagrams directly with in the page via PlantUML/GraphViz/Mscgen/Mermaid snippets.

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

<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 renderer="dot">
digraph g { A -> B -> C }
</graphviz>

Different renderer engines provide different layouts:

Renderer Rendered graph
dot (default if "renderer" omitted)
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 other options above 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