Mermaid:Theme test: Difference between revisions
Label every shape with its official meaning and syntax; add the ANSI symbols reachable only via @{ shape: } |
Make the six captions borderless so they read as annotations, not as shapes |
||
| (One intermediate revision by the same user not shown) | |||
| Line 3: | Line 3: | ||
subgraph FLOW [Start, end and flow control] | subgraph FLOW [Start, end and flow control] | ||
direction LR | direction LR | ||
f1(["Start / end<br/> | 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 | end | ||
subgraph STEPS [Steps and actions] | subgraph STEPS [Steps and actions] | ||
direction LR | direction LR | ||
s1["Process<br/> | 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/> | 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/> | s7[/"Priority action<br/>[/text\]"\] ~~~ s8{{"Prepare / condition<br/>{{text}}"}} ~~~ s9@{ shape: delay, label: "Delay<br/>@{ shape: delay }" } | ||
end | end | ||
subgraph DEC [Decision] | subgraph DEC [Decision] | ||
direction LR | direction LR | ||
d1{"Decision<br/> | d1{"Decision<br/>{text}"} | ||
end | end | ||
subgraph IO [Data, input and output] | subgraph IO [Data, input and output] | ||
direction LR | direction LR | ||
i1[/"Data in / out<br/> | 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/> | 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/> | 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 | end | ||
subgraph STORE [Storage] | subgraph STORE [Storage] | ||
direction LR | direction LR | ||
t1[("Database<br/> | 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/> | t4@{ shape: bow-rect, label: "Stored data<br/>@{ shape: bow-rect }" } ~~~ t5@{ shape: win-pane, label: "Internal storage<br/>@{ shape: win-pane }" } | ||
end | end | ||
subgraph MISC [Other standard symbols] | subgraph MISC [Other standard symbols] | ||
direction LR | direction LR | ||
m1@{ shape: cross-circ, label: "Summary<br/> | 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 | end | ||
subgraph AVOID [Avoid - these clash with | subgraph AVOID [Avoid - these clash with the convention above] | ||
direction LR | direction LR | ||
a1("Mermaid calls this Event - use Start / end<br/> | 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 | end | ||
subgraph UNDEF [No agreed meaning here - kept for reference only] | subgraph UNDEF [No agreed meaning here - kept for reference only] | ||
direction LR | direction LR | ||
u1((("Undefined<br/> | u1((("Undefined<br/>(((text)))"))) ~~~ u2>"Undefined<br/>>text]"] | ||
end | end | ||
| Line 55: | Line 58: | ||
MISC ~~~ AVOID | MISC ~~~ AVOID | ||
AVOID ~~~ UNDEF | 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; | |||