Help:Diagrams: Difference between revisions

Restructure: a section per format with an editable example, embed syntax and an editor screenshot slot
Document the one-BPMN-or-Gantt-per-page limit instead of triggering it
 
Line 44: Line 44:


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


== Mermaid ==
== Mermaid ==
Line 143: Line 145:


{{#display_diagram:BPMN:Example diagram}}
{{#display_diagram: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.


[[File:FlexDiagrams BPMN editor.png|thumb|none|700px|The BPMN editor: the shape palette down the left, canvas in the middle, zoom controls on the right.]]
[[File:FlexDiagrams BPMN editor.png|thumb|none|700px|The BPMN editor: the shape palette down the left, canvas in the middle, zoom controls on the right.]]
Line 158: Line 162:
</pre>
</pre>


which renders as:
This help page cannot show that live: it already embeds a BPMN diagram above, and only one BPMN-or-Gantt diagram is allowed per page (see [[#Showing a diagram on another page|above]]). To see it rendered, open [[Gantt:Example diagram]] itself.
 
{{#display_diagram:Gantt:Example diagram}}


[[File:FlexDiagrams Gantt editor.png|thumb|none|700px|The Gantt editor: task grid on the left, timeline on the right, with zoom controls for hours through years.]]
[[File:FlexDiagrams Gantt editor.png|thumb|none|700px|The Gantt editor: task grid on the left, timeline on the right, with zoom controls for hours through years.]]