{diagram} turns a few lines of text in its content into a picture, written the way Mermaid writes them, and lays it out on the server (tags/_lib/diagram.php) as inline SVG - no JavaScript in the browser. The content is taken as it stands before the level walks it, so the braces of a decision like B{Paid?} need no ignore.

Flowcharts

A line is a chain of nodes and edges. Nodes: A[Box], B(Rounded), C([Stadium]), D{Decision?}, E((Circle)), F[(Database)], G{{Hexagon}} - a node is named once with its text and later by its id alone. Edges: --> (arrow), --- (line), -.-> and -.- (dashed), ==> and === (thick), a label as -->|text| or -- text -->; & joins several nodes on one side (A & B --> C) and %% starts a comment. The layout is layered, with as few crossings as it can find; direction turns it, edges chooses how the lines run.

Sequence diagrams

With type='sequence': participant A as Alice, actor U, messages ->> (arrow), -->> (dashed), -> and --> (no head), -x (cross), -) (open), Note left of A: text (also right of and over A,B), the frames loop, alt / else, opt, par / and, critical and break closed by end, and autonumber.

The SVG has role="img", a <title> and a <desc> that says every edge or message. A diagram without nodes answers nothing, so its @else@ shows; a line it cannot read, or an unknown type, direction or edges, is an error under the strict check.