{diagram}

Draws a flowchart or a sequence diagram from Mermaid-style lines of text, laid out on the server as inline SVG.

Charts and codes Tag pairs

Syntax 

{diagram direction='LR', edges='curved', title='text'} A[Start] --> B{Ready?} {/diagram}
{diagram type='sequence', title='text'} Shop ->> Bank: Charge {/diagram}

Options

type
flowchart (default) or sequence - a first line sequenceDiagram says so too.
direction
TB (default), BT, LR or RL - else a first line graph LR or flowchart LR names it.
edges
How a flowchart's edges run: orthogonal (default, rounded turns), straight or curved.
title
The accessible name, default Flowchart or Sequence diagram.

Description

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

Examples

A flowchart

Nodes of several shapes, labelled edges and a dashed loop back.

Templateexamples/diagram/1-flowchart.pad 
{diagram title='Handling an order'}
  A([Order placed]) --> B{In stock?}
  B -->|no| C[Order from supplier]
  C -.->|delivered| B
  B -->|yes| D[Take payment] --> E[(Orders database)] --> F((Shipped))
{/diagram}
Resultopen alone
Handling an order Order placed → In stock?; In stock? → Order from supplier (no); Order from supplier → In stock? (delivered); In stock? → Take payment (yes); Take payment → Orders database; Orders database → Shipped Order placed → In stock? In stock? → Order from supplier (no) Order from supplier → In stock? (delivered) In stock? → Take payment (yes) Take payment → Orders database Orders database → Shipped no delivered yes Order placed In stock? Order from supplier Take payment Orders database Shipped

Left to right, curved

direction=LR and edges=curved; & fans one node out to several.

Templateexamples/diagram/2-lr.pad 
{diagram direction='LR', edges='curved', title='Deploy pipeline'}
  code([Commit]) --> build[Build]
  build --> unit[Tests] & lint[Lint]
  unit & lint --> gate{Green?}
  gate -->|yes| live((Live))
  gate -.->|no| code
{/diagram}
Resultopen alone
Deploy pipeline Commit → Build; Build → Tests; Build → Lint; Tests → Green?; Lint → Green?; Green? → Live (yes); Green? → Commit (no) Commit → Build Build → Tests Build → Lint Tests → Green? Lint → Green? Green? → Live (yes) Green? → Commit (no) yes no Commit Build Tests Lint Green? Live

A sequence diagram

Participants, numbered messages, dashed replies, an alt frame and a note.

Templateexamples/diagram/3-sequence.pad 
{diagram type='sequence', title='Paying an order'}
  participant S as Shop
  participant B as Bank
  autonumber
  S ->> B: Charge 42.00
  alt Enough funds
    B -->> S: Approved
  else Declined
    B -->> S: Refused
  end
  Note over S,B: The card number never reaches the shop
{/diagram}
Resultopen alone
Paying an order Shop to Bank: Charge 42.00; Alt: Enough funds; Bank to Shop: Approved; Else: Declined; Bank to Shop: Refused; Note: The card number never reaches the shop Shop Shop Bank Bank alt [Enough funds] [Declined] Shop → Bank: Charge 42.00 1. Charge 42.00 Bank → Shop: Approved 2. Approved Bank → Shop: Refused 3. Refused Note: The card number never reaches the shop The card number never reaches the shop

See also

  • {chart} Draws a chart as inline SVG on the server - 46 kinds, from bars and lines to sankeys, maps of a hierarchy and org charts.
  • {timeline} Draws events on a time axis as inline SVG - cards above and below the axis, spans as bars, or one under the other.