RECESSIM

Help:Diagrams: Difference between revisions

← Older editNewer edit →
VisualWikitext
Mermaid is 11.17.2 now, not 10.9 — correct the version note, record the ELK limitation and the handDrawn default
Teach {{Diagram|page=}} as the normal way to embed: it can be inserted and repointed in the visual editor, unlike the bare parser function
Line 35: Line 35:
== Showing a diagram on another page ==
== Showing a diagram on another page ==


Diagram pages are '''not''' transcluded with the usual double braces. Use the <code>#display_diagram</code> parser function instead, naming the diagram page including its namespace:
Diagram pages are '''not''' transcluded with the usual double braces. Use [[Template:Diagram]], naming the diagram page including its namespace:


<pre>
<pre>
{{#display_diagram:Mermaid:Meter capture chain}}
{{Diagram|page=Mermaid:Meter capture chain}}
</pre>
</pre>


That renders the diagram inline wherever you put it, so an article can show a diagram that is maintained on its own page. Each section below gives the exact line for that format's example.
That renders the diagram inline wherever you put it, so an article can show a diagram that is maintained on its own page. Each section below gives the exact line for that format's example.
'''In the visual editor''' you do not need to type that at all: '''Insert → Template''', type <code>Diagram</code>, and fill in the '''Diagram page''' field. To point an existing embed at a different diagram, click it and edit the same field. Double-clicking an embedded diagram opens its own editor in a new tab.
The older form <code><nowiki>{{#display_diagram:Mermaid:Meter capture chain}}</nowiki></code> still works and renders identically. Prefer the template: <code>#display_diagram</code> is a parser function, and the visual editor can edit a template's parameters but not a parser function's target, so bare calls can only be changed by editing the page source.


'''One limit to know about:''' a single page can contain '''at most one BPMN or Gantt''' diagram — the extension gives both of them the same internal element name, so a second one on the same page is refused with an error message. Mermaid, DOT and Drawio can be embedded as many times as you like.
'''One limit to know about:''' a single page can contain '''at most one BPMN or Gantt''' diagram — the extension gives both of them the same internal element name, so a second one on the same page is refused with an error message. Mermaid, DOT and Drawio can be embedded as many times as you like.
Line 65: Line 69:


<pre>
<pre>
{{#display_diagram:Mermaid:Example diagram}}
{{Diagram|page=Mermaid:Example diagram}}
</pre>
</pre>


which renders as:
which renders as:


{{#display_diagram:Mermaid:Example diagram}}
{{Diagram|page=Mermaid:Example diagram}}


See [https://mermaid.js.org/intro/ the Mermaid documentation] for the full syntax. This wiki bundles '''Mermaid 11.17.2''', so the Mermaid 11 diagram types — architecture, packet, kanban, treemap and radar — all work. Diagram types added in Mermaid 12 will not render, and <code>layout: elk</code> is not available (it falls back to the default layout silently). The default look is <code>handDrawn</code>; override it per diagram with <code>%%{init: {'look': 'classic'}}%%</code>.
See [https://mermaid.js.org/intro/ the Mermaid documentation] for the full syntax. This wiki bundles '''Mermaid 11.17.2''', so the Mermaid 11 diagram types — architecture, packet, kanban, treemap and radar — all work. Diagram types added in Mermaid 12 will not render, and <code>layout: elk</code> is not available (it falls back to the default layout silently). The default look is <code>handDrawn</code>; override it per diagram with <code>%%{init: {'look': 'classic'}}%%</code>.
Line 99: Line 103:


<pre>
<pre>
{{#display_diagram:DOT:Example diagram}}
{{Diagram|page=DOT:Example diagram}}
</pre>
</pre>


which renders as:
which renders as:


{{#display_diagram:DOT:Example diagram}}
{{Diagram|page=DOT:Example diagram}}


[[File:FlexDiagrams DOT editor.png|thumb|none|700px|The DOT editor: Graphviz source in the text box, with the rendered graph above it.]]
[[File:FlexDiagrams DOT editor.png|thumb|none|700px|The DOT editor: Graphviz source in the text box, with the rendered graph above it.]]
Line 117: Line 121:


<pre>
<pre>
{{#display_diagram:Drawio:Example diagram}}
{{Diagram|page=Drawio:Example diagram}}
</pre>
</pre>


which renders as:
which renders as:


{{#display_diagram:Drawio:Example diagram}}
{{Diagram|page=Drawio:Example diagram}}


'''One thing to know:''' the Drawio editor is loaded from the external site <code>embed.diagrams.net</code> while you are editing. Your diagram is saved here on the wiki, not on their servers, and viewing a saved Drawio diagram does not contact them at all — but ''editing'' one needs that external site reachable from your browser. The other four formats are served entirely from this wiki.
'''One thing to know:''' the Drawio editor is loaded from the external site <code>embed.diagrams.net</code> while you are editing. Your diagram is saved here on the wiki, not on their servers, and viewing a saved Drawio diagram does not contact them at all — but ''editing'' one needs that external site reachable from your browser. The other four formats are served entirely from this wiki.
Line 137: Line 141:


<pre>
<pre>
{{#display_diagram:BPMN:Example diagram}}
{{Diagram|page=BPMN:Example diagram}}
</pre>
</pre>


which renders as:
which renders as:


{{#display_diagram:BPMN:Example diagram}}
{{Diagram|page=BPMN:Example diagram}}


That embed uses this page's one BPMN-or-Gantt slot; a second diagram of either type on the same page would be refused.
That embed uses this page's one BPMN-or-Gantt slot; a second diagram of either type on the same page would be refused.
Line 157: Line 161:


<pre>
<pre>
{{#display_diagram:Gantt:Example diagram}}
{{Diagram|page=Gantt:Example diagram}}
</pre>
</pre>


Retrieved from "https://wiki.recessim.com/view/Help:Diagrams"