Help:Diagrams: Difference between revisions

This wiki can store '''diagrams as diagrams''' rather than as uploaded pictures. A diagram lives on its own page, keeps a full edit history like any other page, and can be re-opened and changed by the next person — no hunting for the original file, and no re-uploading a flat image every time something moves.

You need to be logged in and in the '''writer''' group to create or change a diagram. Anyone can view them.

== Choosing a format ==

| [[#Mermaid|Mermaid:]] || Flowcharts, sequence diagrams, state machines, ER diagrams, timelines || Text — a few lines of Mermaid syntax

| [[#DOT|DOT:]] || Graphs and trees: signal chains, network maps, workflows || Text — Graphviz DOT syntax

| [[#Drawio|Drawio:]] || Free-form drawings, block diagrams, anything you want to drag around || Full visual editor (draw.io / diagrams.net)

| [[#BPMN|BPMN:]] || Formal process diagrams, with elements that can link to wiki pages || Visual editor

| [[#Gantt|Gantt:]] || Project schedules with dependencies || Visual editor

'''Mermaid''' and '''DOT''' are the two most useful here for typical hardware, RF and reverse-engineering documentation, and they are the easiest to review in a diff because the source is plain text.

You can also go straight to the editor for a page that does not exist yet by visiting its URL with <code>?action=editdiagram</code> on the end.

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:

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.

== Mermaid ==

 

'''Example page:''' [[Mermaid:Example diagram]] — [{{fullurl:Mermaid:Example diagram|action=editdiagram}} open it in the editor]

 

Its source is simply:

See [https://mermaid.js.org/intro/ the Mermaid documentation] for the full syntax. Note that this wiki bundles '''Mermaid 10.9''', so diagram types added in Mermaid 11 will not render.

 

 

 

Graphviz DOT source, rendered in your browser by the bundled Viz.js. You describe what connects to what and Graphviz works out the layout. Served entirely from this wiki.

'''Example page:''' [[DOT:Example diagram]] — [{{fullurl:DOT:Example diagram|action=editdiagram}} open it in the editor]

Its source:

 

 

which renders as:

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

 

 

The full draw.io drawing tool, for free-form diagrams you build by dragging shapes around. Good when the layout itself carries meaning — panel layouts, wiring sketches, block diagrams.

 

 

 

 

 

 

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

 

 

 

Formal business-process diagrams, drawn with bpmn-js. Worth knowing: an element named <code><nowiki>[[Some page]]</nowiki></code> becomes a link to that wiki page, so a process diagram can double as navigation.

 

 

 

 

 

 

[[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.]]

 

 

Project schedules with tasks, durations and dependencies, drawn with dhtmlxGantt. Useful for planning a long teardown or a multi-stage project on its own page.

 

 

Embed it in a page with:

 

 

[[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.]]