Mermaid 1.00
============

Mermaid displays a Mermaid diagram (https://mermaid.js.org) both as
source text and as a rendered diagram, and saves the diagram as a Drawfile.

Using it
--------
* Double-click !Mermaid to put it on the icon bar. Click SELECT on the
  icon to open the Examples directory.
* Drag a Mermaid text file onto the icon to open it in two windows:
    - the source window shows the text with line numbers, plus a list of
      any lines that could not be understood;
    - the diagram window shows the rendered drawing.
* Text files whose names end in /mmd or /mermaid can also be double-clicked
  while MermaidView is running.
* Drop a new file on either window to replace that document. Edit the file
  elsewhere and choose Reload to see your changes.
* MENU over either window:
    Info        - details of the Mermaid file.
    Save        - save box: drag the Drawfile icon to a directory display or
                  to another application (e.g. Draw), or type a full path and
                  click Save.  F3 also opens the save box.
    Zoom        - scale the diagram.
    Source text - open the source window or bring it to the front.
    Diagram     - bring the diagram window to the front.
    Reload      - re-read the file from disc.
* Close the diagram window to close the document.

Supported Mermaid
-----------------
flowchart / graph (TD, TB, BT, LR, RL)
  - node shapes: [ ] ( ) ([ ]) [[ ]] [( )] (( )) ((( ))) > ] { } {{ }}
    [/ /] [\ \] [/ \] [\ /]
  - links: --> --- -.-> ==> --o --x <--> ~~~, labels with -- text --> and
    -->|text|, chains (A --> B --> C) and & (A & B --> C)
  - subgraph ... end (with titles and nesting), direction
  - style, classDef, class and :::class (fill, stroke, color,
    stroke-width, stroke-dasharray)
  - "quoted" labels, <br> line breaks, #quot; style entities, %% comments
stateDiagram / stateDiagram-v2
  - [*] start/end, transitions with labels, state "desc" as id,
    id : description, composite states { }, <<choice>> <<fork>> <<join>>,
    note left of/right of
classDiagram / classDiagram-v2
  - class Name, class Name { members }, Name : member, ~generic~ types,
    <<interface>> style annotations, ["label"], `quoted names`
  - attributes and methods (anything with brackets) in separate
    compartments; $ and * classifiers are accepted but not shown
  - relations <|-- *-- o-- --> -- ..> ..|> .. (either way round), with
    "multiplicity" at either end and : labels
  - namespace Name { ... }, note "text", note for Class "text",
    direction, style, classDef, cssClass and :::class
erDiagram
  - entities with attribute tables (type name PK, FK, UK "comment"),
    "quoted" names and alias[Label]
  - relationships with crow's foot ends |o || }o }| (and o| || o{ |{),
    -- identifying and .. non-identifying lines, : labels, and the word
    form (e.g. A one or more to zero or many B : label)
  - direction, style, classDef and :::class
gantt
  - title, section, tasks "Name :tags, id, start, end" where tags are
    done / active / crit / milestone, start is a date or "after id ...",
    end is a date, a duration (30m 24h 3d 2w) or "until id"
  - dateFormat (YYYY MM DD HH mm ss, X, x), axisFormat (%Y %m %d %b %a
    %H %M ...), tickInterval, excludes weekends / dates,
    inclusiveEndDates, topAxis
mindmap
  - an indented tree; the first node is the root, and each node's parent
    is the nearest node above it with less indentation
  - shapes id[square] id(rounded) id((circle)) id))bang(( id)cloud(
    id{{hexagon}} or plain text; ::icon() and ::: classes are ignored
  - drawn with the root in the middle and the branches out to either
    side, each top-level branch in its own colour; long labels wrap
timeline
  - title, section, and time periods with events: "2004 : Facebook : Google";
    a line starting ":" adds more events to the period above
  - periods run left to right above an axis with their events below; each
    section (or each period, if there are no sections) has its own colour
C4Context, C4Container, C4Component, C4Dynamic, C4Deployment
  - Person, System, SystemDb, SystemQueue, Container..., Component...,
    each with _Ext; Boundary, Enterprise_Boundary, System_Boundary,
    Container_Boundary, Node, Deployment_Node, Node_L, Node_R { ... }
  - Rel, BiRel, Rel_U/D/L/R (and _Up/_Down/_Left/_Right), Rel_Back,
    RelIndex; C4Dynamic numbers relationships in the order written
  - UpdateElementStyle / UpdateBoundaryStyle ($bgColor, $fontColor,
    $borderColor), UpdateRelStyle ($textColor, $lineColor, $offsetX,
    $offsetY), UpdateLayoutConfig ($c4ShapeInRow, $c4BoundaryInRow)
  - elements go in rows (4 to a row), then boundaries below them (2 to a
    row); relationship directions don't change the layout
treemap-beta
  - one item per line, indented under its section: "Section" or
    "Leaf": value, either followed by :::class; title and classDef
  - a section's size is the total of the values inside it; each section
    is a box with its name and total at the top and its items packed
    inside (squarified layout), and each top-level item has its own colour
radar-beta
  - title; axis id["Label"], id2["Label 2"] ... (over one or more lines);
    curve id["Label"]{1, 2, 3} or curve id{ axisId: 1, axisId2: 2 },
    several to a line if separated by commas
  - max, min (0 if left out; max comes from the data if left out),
    ticks n (5), graticule circle or polygon, showLegend true / false
  - axes run clockwise from the top; each curve is a filled polygon in its
    own colour (solid, as Drawfiles have no transparency) with its
    outline drawn on top of all the fills
architecture-beta
  - group id(icon)[Title] (in parent), service id(icon)[Title] (in group)
    and junction id (in group); icons cloud, database, disk, internet and
    server are drawn, other icons (e.g. logos:aws-s3) show their name
  - edges a:R -- L:b, with arrows a:R --> L:b, a:R <-- L:b or <-->, and
    a{group}:B -- T:b{group} to join the border of a service's group
  - services go on a grid placed by the sides their edges join (b:L is to
    the right of a:R, b:T below a:B, and so on); groups are drawn round
    their members, so edges that put a service in the middle of another
    group can make the groups overlap
packet-beta
  - "title"; fields "0-15: "Source port"", single bits "106: "URG"" and
    "+16: "Next field"" (counting on from the previous field)
  - rows of 32 bits, with bit numbers above each field; a field that
    crosses the end of a row is split across rows
kanban
  - columns are the lines with the least indentation ("Todo" or
    id[Todo]); the more indented lines below a column are its cards
  - card fields @{ assigned: 'name', ticket: MC-123, priority: 'High' },
    with priorities Very High, High, Low and Very Low shown as a coloured
    edge; columns are drawn side by side and long card text wraps
block-beta
  - "columns n" (or auto), blocks filling the grid left to right, with
    the flowchart shapes (e.g. a["text"] b(("circle")) c[("database")]),
    widths such as a:2, and "space" or "space:n" gaps
  - block:id ... end groups (or just block ... end), each with its own
    columns; a group can have a width (block:id:2) and a ["label"]
  - block arrows id<["label"]>(right / left / up / down / x / y)
  - links between blocks (a --> b, a -- "label" --> b, a --- b),
    style, classDef, class and :::class
sankey-beta
  - CSV lines "source,target,value"; names may be "quoted", with ""
    for a quote; repeated links are added together; links that would
    make a loop are left out with a warning
  - nodes in columns left to right, sized by their flow, with labels
    showing the value; links are drawn solid (no transparency)
xychart-beta
  - title and horizontal; "x-axis [a, b, c]" or "x-axis min --> max";
    "y-axis min --> max" (worked out from the data if left out); axis
    titles can be "quoted" or a single word
  - any number of "bar [...]" and "line [...]" series; several bar
    series are drawn side by side; y-axis titles are written across
quadrantChart
  - title, "x-axis Low --> High", "y-axis Low --> High" (the high
    label is optional) and quadrant-1 to quadrant-4 labels
  - points "Name: [x, y]" with x and y from 0 to 1, styled with radius,
    color, stroke-color and stroke-width, directly or via
    "Name:::class" and "classDef class ..."; y-axis labels are written
    across, not up the page
requirementDiagram
  - requirement, functionalRequirement, interfaceRequirement,
    performanceRequirement, physicalRequirement and designConstraint
    blocks with id, text, risk (low / medium / high) and verifymethod
    (analysis / inspection / test / demonstration); element blocks with
    type and docRef
  - relationships "a - satisfies -> b" or "b <- satisfies - a" for
    contains, copies, derives, satisfies, verifies, refines and traces;
    direction, style and classDef
gitGraph
  - commit (id: "..." tag: "..." type: NORMAL / REVERSE / HIGHLIGHT),
    branch name (order: n), checkout / switch name, merge name (with id,
    tag and type), cherry-pick id: "..."; "gitGraph TB:" and
    "gitGraph BT:" draw it top to bottom or bottom to top
  - one lane per branch, each in its own colour, with a commit per step;
    commit ids are shown under the commits and tags above them
journey
  - title, section, and tasks "Task name: score: Actor1, Actor2" with
    scores from 1 (bad) to 5 (good)
  - tasks run left to right, each section in its own colour; a face below
    each task is higher and happier the better the score, coloured dots
    on the task show its actors, and a legend lists the actors
pie
  - title (also "pie title ..."), showData, slices "Label" : value;
    slices are drawn largest first from 12 o'clock with percentages and a
    legend (with values when showData is given)
sequenceDiagram
  - participant / actor with aliases, all arrow types (->> -->> -) --) -x
    --x -> -->), activations (+/- and activate/deactivate), notes,
    loop / alt / else / opt / par / and / critical / break / rect blocks,
    autonumber, title

Other diagram types (zenuml...) show a message explaining
that they are not supported. Front matter (--- title: ... ---) is read for
the title.

Text uses the Homerton.Medium outline font. UTF-8 files are converted to
Latin-1.

Requirements: RISC OS 3.5 or later (tested on RISC OS 5), the DrawFile
module and SharedUnixLibrary 1.07+ (supplied in the !System from
www.riscos.info).
