Help:Contributing/diagrams: Difference between revisions

From Wikibase
Jump to navigation Jump to search
Diagram syntax guide for the vendored Diagrams extension (deployed 2026-08-24) (via create-page on MediaWiki MCP Server)
 
math see-also wording: inline LaTeX ($…) + KaTeX snippets (via update-page on MediaWiki MCP Server)
 
(8 intermediate revisions by 2 users not shown)
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">
Line 28: Line 27:
</uml>
</uml>


You can also write the usual <syntaxhighlight lang="wikitext" inline>@startuml</syntaxhighlight>/<syntaxhighlight lang="wikitext" inline>@enduml</syntaxhighlight> directives (both forms work):
You can optional write out the usual <syntaxhighlight lang="wikitext" inline>@startuml</syntaxhighlight>/<syntaxhighlight lang="wikitext" inline>@enduml</syntaxhighlight> directives (it is added automatically when you don't):


<syntaxhighlight lang="wikitext" copy><uml>
<syntaxhighlight lang="wikitext" copy><uml>
Line 45: Line 44:


<blockquote>
<blockquote>
PlantUML runs in its '''SANDBOX''' security profile on this instance: <syntaxhighlight lang="wikitext" inline>!include</syntaxhighlight> of '''local files''' and '''URLs''' is disabled. Diagrams must be self-contained (except the bundled stdlib).
PlantUML runs in its '''SANDBOX''' security profile on this instance: <syntaxhighlight lang="wikitext" inline>!include</syntaxhighlight> of '''local files''' and '''URLs''' is disabled. Diagrams can use the bundled [https://plantuml.com/stdlib stdlib] but must be otherwise self-contained.
</blockquote>
</blockquote>


== GraphViz ==
== GraphViz ==


<syntaxhighlight lang="wikitext" copy><graphviz>
<syntaxhighlight lang="wikitext" copy><graphviz renderer="dot">
digraph g { A -> B -> C }
digraph g { A -> B -> C }
</graphviz></syntaxhighlight>
</graphviz></syntaxhighlight>
Line 58: Line 57:
</graphviz>
</graphviz>


The <syntaxhighlight lang="wikitext" inline>renderer</syntaxhighlight> attribute selects the layout engine (<syntaxhighlight lang="wikitext" inline>dot</syntaxhighlight> default, or <syntaxhighlight lang="wikitext" inline>neato</syntaxhighlight>/<syntaxhighlight lang="wikitext" inline>fdp</syntaxhighlight>/<syntaxhighlight lang="wikitext" inline>sfdp</syntaxhighlight>/<syntaxhighlight lang="wikitext" inline>circo</syntaxhighlight>/<syntaxhighlight lang="wikitext" inline>twopi</syntaxhighlight>/<syntaxhighlight lang="wikitext" inline>osage</syntaxhighlight>).
Different renderer engines provide different layouts:
 
{| class="wikitable"
|-
! Renderer !! Rendered graph
|-
| <syntaxhighlight lang="wikitext" inline>dot</syntaxhighlight> (default if "renderer" omitted) || <graphviz>
digraph g { A -> B -> C }
</graphviz>
|-
| <syntaxhighlight lang="wikitext" inline>neato</syntaxhighlight> || <graphviz renderer="neato">
digraph g { A -> B -> C }
</graphviz>
|-
| <syntaxhighlight lang="wikitext" inline>fdp</syntaxhighlight> || <graphviz renderer="fdp">
digraph g { A -> B -> C }
</graphviz>
|-
| <syntaxhighlight lang="wikitext" inline>sfdp</syntaxhighlight> || <graphviz renderer="sfdp">
digraph g { A -> B -> C }
</graphviz>
|-
| <syntaxhighlight lang="wikitext" inline>circo</syntaxhighlight> || <graphviz renderer="circo">
digraph g { A -> B -> C }
</graphviz>
|-
| <syntaxhighlight lang="wikitext" inline>twopi</syntaxhighlight> || <graphviz renderer="twopi">
digraph g { A -> B -> C }
</graphviz>
|-
| <syntaxhighlight lang="wikitext" inline>osage</syntaxhighlight> || <graphviz renderer="osage">
digraph g { A -> B -> C }
</graphviz>
|}


== Mscgen ==
== Mscgen ==
Line 83: Line 115:


<blockquote>
<blockquote>
Mermaid renders '''in your browser''' (JavaScript): the diagram is empty in printed/static export. Use <syntaxhighlight lang="wikitext" inline><uml></syntaxhighlight> for print-friendly diagrams.
Mermaid renders '''in your browser''' (JavaScript): the diagram is empty in printed/static export. Use other options above for print-friendly diagrams.
</blockquote>
</blockquote>


Line 97: Line 129:


* [[Help:Contributing]] — contributing to this wiki
* [[Help:Contributing]] — contributing to this wiki
* [[Help:Contributing/math]] — LaTeX + KaTeX math
* [[Help:Contributing/math]] — inline LaTeX math ($…) and KaTeX snippets
* [[Help:Contributing/code]] — code blocks and syntax highlighting
* [[Help:Contributing/code]] — code blocks and syntax highlighting

Latest revision as of 15:19, 4 September 2026

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 optional write out the usual @startuml/@enduml directives (it is added automatically when you don't):

<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 can use the bundled stdlib but must be otherwise self-contained.

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