Help:Diagrams: Difference between revisions
Teach {{Diagram|page=}} as the normal way to embed: it can be inserted and repointed in the visual editor, unlike the bare parser function |
Add a Using the visual editor section: add, edit and repoint diagrams without wikitext, with screenshot slots to fill in later |
||
| Line 43: | Line 43: | ||
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. | ||
''' | '''You do not have to type any of that.''' In the visual editor, diagrams can be added, repointed and opened for editing without touching wikitext — see [[#Using the visual editor|Using the visual editor]] below. | ||
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. | 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. | ||
== Using the visual editor == | |||
''Screenshots for this section have not been uploaded yet. Each caption below names the file to upload — for example <code>FlexDiagrams VE insert template.png</code> — so uploading under that exact name fills the slot with no further edit to this page.'' | |||
Everything here works in the ordinary visual editor. Nothing below requires editing wikitext. | |||
=== Adding a diagram to a page === | |||
Put the cursor where the diagram should go, then '''Insert → Template'''. Type <code>Diagram</code> and choose it. | |||
[[File:FlexDiagrams VE insert template.png|thumb|none|700px|The Insert → Template dialog with "Diagram" typed into the search box.]] | |||
Fill in the '''Diagram page''' field with the diagram's full page name, ''including'' its namespace prefix — <code>Mermaid:</code>, <code>DOT:</code>, <code>Drawio:</code>, <code>BPMN:</code> or <code>Gantt:</code>. The field suggests existing pages as you type, so you rarely need to type the whole name. | |||
[[File:FlexDiagrams VE diagram field.png|thumb|none|700px|The Diagram page field, suggesting existing diagram pages as you type.]] | |||
Insert, and save the page as usual. | |||
=== What a diagram looks like while editing === | |||
An embedded diagram does '''not''' appear as a picture in the visual editor. It shows as a single labelled line naming the diagram, like: | |||
◈ Mermaid:RE FlowChart Overview — diagram, edit it on its own page | |||
[[File:FlexDiagrams VE placeholder.png|thumb|none|700px|An embedded diagram as it appears while editing: one labelled line rather than the rendered picture.]] | |||
That is deliberate. The visual editor cannot run the diagram renderer, so without it you would see the diagram's raw source — dozens of lines of flowchart code — sitting in the middle of the article. The line above is shown instead. Save or preview the page to see the diagram itself. | |||
=== Editing the diagram === | |||
'''Double-click''' the line. The diagram's own editor opens '''in a new tab''', leaving your article edit untouched in the original tab. Edit the diagram, save it there, then return to your article. | |||
=== Changing which diagram is shown === | |||
'''Single-click''' the line to select it. A small box appears with two choices: | |||
* '''Edit "…" ↗''' — opens that diagram's editor in a new tab, the same as double-clicking. | |||
* '''Change which diagram is shown''' — opens the template's settings so you can point this embed at a different diagram page. | |||
[[File:FlexDiagrams VE context menu.png|thumb|none|700px|Selecting an embedded diagram: edit the diagram itself, or change which diagram the page shows.]] | |||
Single-clicking also selects the diagram as a block, so <code>Backspace</code> removes the embed from the article — which deletes only the embed, never the diagram page itself. | |||
=== If you edit the source instead === | |||
The visual editor is not required. In the source editor the same embed is one line: | |||
<pre> | |||
{{Diagram|page=Mermaid:RE FlowChart Overview}} | |||
</pre> | |||
Both editors produce exactly the same thing, and you can move between them freely. | |||
== Mermaid == | == Mermaid == | ||