Mermaid:Theme test

flowchart TD subgraph FLOW [Start, end and flow control] direction LR f1(["Start / end ([text])"]) ~~~ f2(("Connector ((text))")) ~~~ f3@{ shape: f-circ, label: "Junction @{ shape: f-circ }" } f4@{ shape: fork, label: "Fork / join @{ shape: fork }" } ~~~ f5@{ shape: notch-pent, label: "Loop limit @{ shape: notch-pent }" } end subgraph STEPS [Steps and actions] direction LR s1["Process [text]"] ~~~ s2[["Subprocess [[text]]"]] ~~~ s3@{ shape: st-rect, label: "Multi-process @{ shape: st-rect }" } s4@{ shape: lin-rect, label: "Lined / shaded process @{ shape: lin-rect }" } ~~~ s5@{ shape: div-rect, label: "Divided process @{ shape: div-rect }" } ~~~ s6[\"Manual operation [\text/]"/] s7[/"Priority action [/text\]"\] ~~~ s8{{"Prepare / condition {{text}}"}} ~~~ s9@{ shape: delay, label: "Delay @{ shape: delay }" } end subgraph DEC [Decision] direction LR d1{"Decision {text}"} end subgraph IO [Data, input and output] direction LR i1[/"Data in / out [/text/]"/] ~~~ i2[\"Data in / out (alt) [\text\]"\] ~~~ i3@{ shape: sl-rect, label: "Manual input @{ shape: sl-rect }" } i4@{ shape: curv-trap, label: "Display @{ shape: curv-trap }" } ~~~ i5@{ shape: doc, label: "Document @{ shape: doc }" } ~~~ i6@{ shape: docs, label: "Multi-document @{ shape: docs }" } i7@{ shape: lin-doc, label: "Lined document @{ shape: lin-doc }" } ~~~ i8@{ shape: flag, label: "Paper tape @{ shape: flag }" } ~~~ i9@{ shape: notch-rect, label: "Card @{ shape: notch-rect }" } end subgraph STORE [Storage] direction LR t1[("Database [(text)]")] ~~~ t2@{ shape: h-cyl, label: "Direct access storage @{ shape: h-cyl }" } ~~~ t3@{ shape: lin-cyl, label: "Disk storage @{ shape: lin-cyl }" } t4@{ shape: bow-rect, label: "Stored data @{ shape: bow-rect }" } ~~~ t5@{ shape: win-pane, label: "Internal storage @{ shape: win-pane }" } end subgraph MISC [Other standard symbols] direction LR m1@{ shape: cross-circ, label: "Summary @{ shape: cross-circ }" } ~~~ m2@{ shape: hourglass, label: "Collate @{ shape: hourglass }" } ~~~ m3@{ shape: tri, label: "Extract @{ shape: tri }" } m4@{ shape: flip-tri, label: "Manual file @{ shape: flip-tri }" } ~~~ m5@{ shape: brace, label: "Comment @{ shape: brace }" } end subgraph AVOID [Avoid - these clash with our convention above] direction LR a1("Mermaid calls this Event - use Start / end (text)") ~~~ a2@{ shape: sm-circ, label: "Mermaid calls this Start - use Start / end @{ shape: sm-circ }" } ~~~ a3@{ shape: fr-circ, label: "Mermaid calls this Stop - use Start / end @{ shape: fr-circ }" } end subgraph UNDEF [No agreed meaning here - kept for reference only] direction LR u1((("Undefined (((text)))"))) ~~~ u2>"Undefined >text]"] end FLOW ~~~ STEPS STEPS ~~~ DEC DEC ~~~ IO IO ~~~ STORE STORE ~~~ MISC MISC ~~~ AVOID AVOID ~~~ UNDEF

flowchart TD

  subgraph FLOW [Start, end and flow control]
    direction LR
    f1(["Start / end<br/>&#40;&#91;text&#93;&#41;"]) ~~~ f2(("Connector<br/>&#40;&#40;text&#41;&#41;")) ~~~ f3@{ shape: f-circ, label: "Junction<br/>&#64;&#123; shape: f-circ &#125;" }
    f4@{ shape: fork, label: "Fork / join<br/>&#64;&#123; shape: fork &#125;" } ~~~ f5@{ shape: notch-pent, label: "Loop limit<br/>&#64;&#123; shape: notch-pent &#125;" }
  end

  subgraph STEPS [Steps and actions]
    direction LR
    s1["Process<br/>&#91;text&#93;"] ~~~ s2[["Subprocess<br/>&#91;&#91;text&#93;&#93;"]] ~~~ s3@{ shape: st-rect, label: "Multi-process<br/>&#64;&#123; shape: st-rect &#125;" }
    s4@{ shape: lin-rect, label: "Lined / shaded process<br/>&#64;&#123; shape: lin-rect &#125;" } ~~~ s5@{ shape: div-rect, label: "Divided process<br/>&#64;&#123; shape: div-rect &#125;" } ~~~ s6[\"Manual operation<br/>&#91;&#92;text&#47;&#93;"/]
    s7[/"Priority action<br/>&#91;&#47;text&#92;&#93;"\] ~~~ s8{{"Prepare / condition<br/>&#123;&#123;text&#125;&#125;"}} ~~~ s9@{ shape: delay, label: "Delay<br/>&#64;&#123; shape: delay &#125;" }
  end

  subgraph DEC [Decision]
    direction LR
    d1{"Decision<br/>&#123;text&#125;"}
  end

  subgraph IO [Data, input and output]
    direction LR
    i1[/"Data in / out<br/>&#91;&#47;text&#47;&#93;"/] ~~~ i2[\"Data in / out (alt)<br/>&#91;&#92;text&#92;&#93;"\] ~~~ i3@{ shape: sl-rect, label: "Manual input<br/>&#64;&#123; shape: sl-rect &#125;" }
    i4@{ shape: curv-trap, label: "Display<br/>&#64;&#123; shape: curv-trap &#125;" } ~~~ i5@{ shape: doc, label: "Document<br/>&#64;&#123; shape: doc &#125;" } ~~~ i6@{ shape: docs, label: "Multi-document<br/>&#64;&#123; shape: docs &#125;" }
    i7@{ shape: lin-doc, label: "Lined document<br/>&#64;&#123; shape: lin-doc &#125;" } ~~~ i8@{ shape: flag, label: "Paper tape<br/>&#64;&#123; shape: flag &#125;" } ~~~ i9@{ shape: notch-rect, label: "Card<br/>&#64;&#123; shape: notch-rect &#125;" }
  end

  subgraph STORE [Storage]
    direction LR
    t1[("Database<br/>&#91;&#40;text&#41;&#93;")] ~~~ t2@{ shape: h-cyl, label: "Direct access storage<br/>&#64;&#123; shape: h-cyl &#125;" } ~~~ t3@{ shape: lin-cyl, label: "Disk storage<br/>&#64;&#123; shape: lin-cyl &#125;" }
    t4@{ shape: bow-rect, label: "Stored data<br/>&#64;&#123; shape: bow-rect &#125;" } ~~~ t5@{ shape: win-pane, label: "Internal storage<br/>&#64;&#123; shape: win-pane &#125;" }
  end

  subgraph MISC [Other standard symbols]
    direction LR
    m1@{ shape: cross-circ, label: "Summary<br/>&#64;&#123; shape: cross-circ &#125;" } ~~~ m2@{ shape: hourglass, label: "Collate<br/>&#64;&#123; shape: hourglass &#125;" } ~~~ m3@{ shape: tri, label: "Extract<br/>&#64;&#123; shape: tri &#125;" }
    m4@{ shape: flip-tri, label: "Manual file<br/>&#64;&#123; shape: flip-tri &#125;" } ~~~ m5@{ shape: brace, label: "Comment<br/>&#64;&#123; shape: brace &#125;" }
  end

  subgraph AVOID [Avoid - these clash with our convention above]
    direction LR
    a1("Mermaid calls this Event - use Start / end<br/>&#40;text&#41;") ~~~ a2@{ shape: sm-circ, label: "Mermaid calls this Start - use Start / end<br/>&#64;&#123; shape: sm-circ &#125;" } ~~~ a3@{ shape: fr-circ, label: "Mermaid calls this Stop - use Start / end<br/>&#64;&#123; shape: fr-circ &#125;" }
  end

  subgraph UNDEF [No agreed meaning here - kept for reference only]
    direction LR
    u1((("Undefined<br/>&#40;&#40;&#40;text&#41;&#41;&#41;"))) ~~~ u2>"Undefined<br/>&gt;text&#93;"]
  end

  FLOW ~~~ STEPS
  STEPS ~~~ DEC
  DEC ~~~ IO
  IO ~~~ STORE
  STORE ~~~ MISC
  MISC ~~~ AVOID
  AVOID ~~~ UNDEF