Mermaid:Theme test

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

flowchart TD

  subgraph FLOW [Start, end and flow control]
    direction LR
    f1(["Start / end<br/>([text])"]) ~~~ f2(("Connector<br/>((text))"))
    f3@{ shape: f-circ } ~~~ c1@{ shape: text, label: "Junction<br/>@{ shape: f-circ }" } ~~~ f4@{ shape: fork } ~~~ c2@{ shape: text, label: "Fork / join<br/>@{ shape: fork }" }
    f5@{ shape: notch-pent, label: "Loop limit<br/>@{ shape: notch-pent }" }
  end

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

  subgraph DEC [Decision]
    direction LR
    d1{"Decision<br/>{text}"}
  end

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

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

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

  subgraph AVOID [Avoid - these clash with the convention above]
    direction LR
    a1("Mermaid calls this Event - use Start / end<br/>(text)") ~~~ a2@{ shape: sm-circ } ~~~ c5@{ shape: text, label: "Mermaid calls this Start - use Start / end<br/>@{ shape: sm-circ }" }
    a3@{ shape: fr-circ } ~~~ c6@{ shape: text, label: "Mermaid calls this Stop - use Start / end<br/>@{ shape: fr-circ }" }
  end

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

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

  %% Captions for the six shapes that cannot carry a label of their own.
  %% Borderless so they read as annotations rather than as shapes.
  classDef caption fill:none,stroke:none;
  class c1,c2,c3,c4,c5,c6 caption;