Help:Contributing/diagrams - Revision history

SeedBot: math see-also wording: inline LaTeX ($…) + KaTeX snippets (via update-page on MediaWiki MCP Server)

2026-09-04T15:19:15Z

math see-also wording: inline LaTeX ($…) + KaTeX snippets (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 15:19, 4 September 2026
Line 129:		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

Rongzhou: /* PlantUML */

2026-08-26T16:01:10Z

PlantUML

← Older revision		Revision as of 16:01, 26 August 2026
Line 44:		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 can use the bundled stdlib but must be otherwise self-contained.		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>

Rongzhou: /* PlantUML */

2026-08-26T15:51:00Z

PlantUML

← Older revision		Revision as of 15:51, 26 August 2026
Line 27:		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>

Rongzhou: /* PlantUML */

2026-08-26T15:46:39Z

PlantUML

← Older revision		Revision as of 15:46, 26 August 2026
Line 44:		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 stdlib but must be otherwise self-contained.
	</blockquote>		</blockquote>

Rongzhou at 17:13, 24 August 2026

2026-08-24T17:13:22Z

← Older revision		Revision as of 17:13, 24 August 2026
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">

Rongzhou: /* GraphViz */

2026-08-24T17:08:19Z

GraphViz

← Older revision		Revision as of 17:08, 24 August 2026
Line 50:		Line 50:
	== 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 58:
	</graphviz>		</graphviz>

	~~The <syntaxhighlight lang="wikitext" inline>~~renderer~~</syntaxhighlight> attribute selects the layout engine. It goes on the '''opening tag''' — the graph body stays the same~~:		Different renderer engines provide different layouts:

	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	! ~~Without (default <syntaxhighlight lang="wikitext" inline>dot</syntaxhighlight>)~~ !! ~~With <syntaxhighlight lang="wikitext" inline>renderer="circo"</syntaxhighlight>~~		! Renderer !! Rendered graph
	\|-		\|-
	~~\| <syntaxhighlight lang="wikitext" copy><graphviz>~~		\| <syntaxhighlight lang="wikitext" inline>dot</syntaxhighlight> (default if "renderer" omitted) \|\| <graphviz>
	~~digraph g { A -> B -> C }~~
	~~</graphviz></syntaxhighlight>~~
	~~\| <syntaxhighlight lang="wikitext" copy line highlight="1"><graphviz renderer="circo">~~
	~~digraph g { A -> B -> C }~~
	~~</graphviz></syntaxhighlight>~~
	\|-
	~~\| <graphviz>~~
	~~digraph g { A -> B -> C }~~
	~~</graphviz>~~
	~~\| <graphviz renderer="circo">~~
	~~digraph g { A -> B -> C }~~
	~~</graphviz>~~
	\|}

	~~Same graph under each engine (the body is identical in every row; only the attribute changes):~~

	~~{\| class="wikitable"~~
	\|-
	~~! Renderer !! Same graph~~
	\|-
	\| <syntaxhighlight lang="wikitext" inline>dot</syntaxhighlight> (default) \|\| <graphviz>
	digraph g { A -> B -> C }		digraph g { A -> B -> C }
	</graphviz>		</graphviz>

SeedBot: Show where the renderer attribute goes: without/with source example (attribute line highlighted) + keep the 7-engine overview (via update-page on MediaWiki MCP Server)

2026-08-24T17:02:03Z

Show where the renderer attribute goes: without/with source example (attribute line highlighted) + keep the 7-engine overview (via update-page on MediaWiki MCP Server)

@@ Line 58: / Line 58: @@
 </graphviz>
-The <syntaxhighlight lang="wikitext" inline>renderer</syntaxhighlight> attribute selects the layout engine — the same graph under each engine (the body is identical in every row; only the attribute changes):
+The <syntaxhighlight lang="wikitext" inline>renderer</syntaxhighlight> attribute selects the layout engine. It goes on the '''opening tag''' — the graph body stays the same:
 {| class="wikitable"

Rongzhou: /* Mermaid */

2026-08-24T15:55:29Z

Mermaid

← Older revision		Revision as of 15:55, 24 August 2026
Line 116:		Line 116:

	<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>

SeedBot: Illustrate the graphviz renderer attribute with the same graph under each of the 7 layout engines (live-rendered) (via update-page on MediaWiki MCP Server)

2026-08-24T15:51:48Z

Illustrate the graphviz renderer attribute with the same graph under each of the 7 layout engines (live-rendered) (via update-page on MediaWiki MCP Server)

@@ Line 58: / Line 58: @@
 </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>).
+The <syntaxhighlight lang="wikitext" inline>renderer</syntaxhighlight> attribute selects the layout engine — the same graph under each engine (the body is identical in every row; only the attribute changes):
 == Mscgen ==

SeedBot: Diagram syntax guide for the vendored Diagrams extension (deployed 2026-08-24) (via create-page on MediaWiki MCP Server)

2026-08-24T15:40:52Z

Diagram syntax guide for the vendored Diagrams extension (deployed 2026-08-24) (via create-page on MediaWiki MCP Server)

New page

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.

{| class="wikitable"
|-
! Tag !! What it renders !! Where it renders
|-
| <syntaxhighlight lang="wikitext" inline><uml></syntaxhighlight> || PlantUML (sequence, class, state, activity, component, …) || server-side, cached image
|-
| <syntaxhighlight lang="wikitext" inline><graphviz></syntaxhighlight> || GraphViz (dot, neato, fdp, sfdp, circo, twopi, osage) || server-side, cached image
|-
| <syntaxhighlight lang="wikitext" inline><mscgen></syntaxhighlight> || Message sequence charts || server-side, cached image
|-
| <syntaxhighlight lang="wikitext" inline><mermaid></syntaxhighlight> || Mermaid (flowchart, sequence, ER, Gantt, …) || in your browser
|}

== PlantUML ==

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

<syntaxhighlight lang="wikitext" copy><uml type="uml">
Alice -> Bob: hello
</uml></syntaxhighlight>

Result:

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

You can also write the usual <syntaxhighlight lang="wikitext" inline>@startuml</syntaxhighlight>/<syntaxhighlight lang="wikitext" inline>@enduml</syntaxhighlight> directives (both forms work):

<syntaxhighlight lang="wikitext" copy><uml>
@startuml
Alice -> Bob: hello
@enduml
</uml></syntaxhighlight>

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

The bundled PlantUML stdlib is available (<syntaxhighlight lang="wikitext" inline>!include <C4/C4_Context></syntaxhighlight> and friends).

<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).
</blockquote>

== GraphViz ==

<syntaxhighlight lang="wikitext" copy><graphviz>
digraph g { A -> B -> C }
</graphviz></syntaxhighlight>

<graphviz>
digraph g { A -> B -> C }
</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>).

== Mscgen ==

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

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

== Mermaid ==

<syntaxhighlight lang="wikitext" copy><mermaid>
graph LR
A --> B
</mermaid></syntaxhighlight>

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

<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.
</blockquote>

== Output format ==

The default output is '''SVG''' (crisp, small). Force PNG per diagram with <syntaxhighlight lang="wikitext" inline>format="png"</syntaxhighlight>:

<syntaxhighlight lang="wikitext" copy><uml type="uml" format="png">
Alice -> Bob: hello
</uml></syntaxhighlight>

== See also ==

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