Help:Diagrams: Difference between revisions

Help page
Created page with "Diagrams are setup on this wiki to be: - Translatable - Easy to edit - Collaborative == Diagram Options == When creating Diagrams you have a number of options, these are ranked in order of preference. # [https://mermaidjs.github.io/ Mermaid.js] # SVG # PNG == Diagram Namespace == We have a "Diagram" namespace, that allows diagrams to have their own page, which allows for transclusion onto various pages. It will also be used in the future to enable easy caching and deli..."
 
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
Diagrams are setup on this wiki to be:
We have the following goals for diagrams on our wiki:
- Translatable
* Translatable - Diagrams must be translatable
- Easy to edit
* Easy to edit - No one wants to download another item of software to edit a diagram
- Collaborative
* Collaborative - Diagrams like all other pages must be editable by multiple users.


== Diagram Options ==
== Diagram Options ==
When creating Diagrams you have a number of options, these are ranked in order of preference.
When creating Diagrams you have a number of options, these are ranked in order of preference and their alignment to our goals.
# [https://mermaidjs.github.io/ Mermaid.js]
# [https://mermaidjs.github.io/ Mermaid.js]
# SVG
# SVG
Line 15: Line 15:
== Including a Diagram in a page ==
== Including a Diagram in a page ==
To include a diagram in a page use this syntax:
To include a diagram in a page use this syntax:
<nowiki>{{Diagram:<diagram name>{{UseLangLink}}}}</nowiki>
<nowiki>{{Diagram:<diagram name>{{UseLangLink}}}}</nowiki>


Line 35: Line 36:
# Always use <nowiki><translate nowrap></nowiki> to prevent issues with Mermaid rendering
# Always use <nowiki><translate nowrap></nowiki> to prevent issues with Mermaid rendering
# Use [https://mermaid.js.org/syntax/sequenceDiagram.html#aliases aliases] where possible as this reduces the amount of translation strings. Most document types have an alias system.
# Use [https://mermaid.js.org/syntax/sequenceDiagram.html#aliases aliases] where possible as this reduces the amount of translation strings. Most document types have an alias system.
=== Example ===
A good example Diagram in Mermaid is [[Diagram:LNLRelayConnection]]

Latest revision as of 05:58, 16 February 2024

We have the following goals for diagrams on our wiki:

  • Translatable - Diagrams must be translatable
  • Easy to edit - No one wants to download another item of software to edit a diagram
  • Collaborative - Diagrams like all other pages must be editable by multiple users.

Diagram Options

When creating Diagrams you have a number of options, these are ranked in order of preference and their alignment to our goals.

  1. Mermaid.js
  2. SVG
  3. PNG

Diagram Namespace

We have a "Diagram" namespace, that allows diagrams to have their own page, which allows for transclusion onto various pages. It will also be used in the future to enable easy caching and delivery of diagrams to other sources such as Resonite itself.

Including a Diagram in a page

To include a diagram in a page use this syntax:

{{Diagram:<diagram name>{{UseLangLink}}}}

This specific format uses the Template:UseLangLink template to suffix the diagram with the language of the page.

Using Mermaid

We're running Mermaid Js 10.8.0 which is the latest at the moment. This means that everything on Mermaid's website can be used.

To create a diagram it is recommended to:

  1. Create the diagram first using the Mermaid Js live editor.
  2. Copy and paste the diagram source into a new page in the "Diagram" namespace.
  3. Update the syntax to include the required Mermaid syntax(see below).

Mermaid Syntax

{{#mermaid:<your diagram from Mermaid editor}}

Mermaid Translation

When enabling translation on a mermaid diagram:

  1. Only wrap translate tags around text that needs to be translated.
  2. Always use <translate nowrap> to prevent issues with Mermaid rendering
  3. Use aliases where possible as this reduces the amount of translation strings. Most document types have an alias system.

Example

A good example Diagram in Mermaid is Diagram:LNLRelayConnection