Mermaid:Theme test - Revision history

Hash: Make the six captions borderless so they read as annotations, not as shapes

2026-09-22T23:32:47Z

Make the six captions borderless so they read as annotations, not as shapes

← Older revision		Revision as of 23:32, 22 September 2026
Line 58:		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;

Hash: Use literal syntax in labels (HTML entities are eaten by mermaids own #nn; entity syntax); caption the six shapes that cannot carry a label

2026-09-22T23:31:56Z

Use literal syntax in labels (HTML entities are eaten by mermaids own #nn; entity syntax); caption the six shapes that cannot carry a label

← Older revision		Revision as of 23:31, 22 September 2026
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/>~~([~~text~~])~~"]) ~~~ f2(("Connector<br/>~~((~~text~~))~~")) ~~~~~~~ f3@{ shape: f-circ, label: "Junction<br/>~~@{~~ shape: f-circ ~~}~~" }		f1(["Start / end<br/>([text])"]) ~~~ f2(("Connector<br/>((text))"))
	f4@{ shape: fork, label: "Fork / join<br/>~~@{~~ shape: fork ~~}~~" } ~~~~~~~ f5@{ shape: notch-pent, label: "Loop limit<br/>~~@{~~ shape: notch-pent ~~}~~" }		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/>~~[~~text~~]~~"] ~~~ s2[["Subprocess<br/>~~[[~~text~~]]~~"]] ~~~ s3@{ shape: st-rect, label: "Multi-process<br/>~~@{~~ shape: st-rect ~~}~~" }		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~~/]~~"/]		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 ~~}~~" }		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/>~~{~~text~~}~~"}		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/>~~[/~~text~~/]~~"/] ~~~ i2[\"Data in / out (alt)<br/>~~[\~~text~~\]~~"\] ~~~ i3@{ shape: sl-rect, label: "Manual input<br/>~~@{~~ shape: sl-rect ~~}~~" }		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 ~~}~~" }		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 ~~}~~" }		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/>~~[(~~text~~)]~~")] ~~~ t2@{ shape: h-cyl, label: "Direct access storage<br/>~~@{~~ shape: h-cyl ~~}~~" } ~~~ t3@{ shape: lin-cyl, label: "Disk storage<br/>~~@{~~ shape: lin-cyl ~~}~~" }		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 ~~}~~" }		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/>~~@{~~ shape: cross-circ ~~}~~" } ~~~ m2@{ shape: hourglass, label: "Collate<br/>~~@{~~ shape: hourglass ~~}~~" } ~~~~~~~ m3@{ shape: tri, label: "Extract<br/>~~@{~~ shape: tri ~~}~~" }		m1@{ shape: cross-circ } ~~~ c3@{ shape: text, label: "Summary<br/>@{ shape: cross-circ }" } ~~~ m2@{ shape: hourglass } ~~~ c4@{ shape: text, label: "Collate<br/>@{ shape: hourglass }" }
	m4@{ shape: flip-tri, label: "Manual file<br/>~~@{~~ shape: flip-tri ~~}~~" } ~~~~~~~ m5@{ shape: brace, label: "Comment<br/>~~@{~~ shape: brace ~~}~~" }		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 ~~our~~ convention above]		subgraph AVOID [Avoid - these clash with the convention above]
	direction LR		direction LR
	a1("Mermaid calls this Event - use Start / end<br/>~~(~~text~~)~~") ~~~ a2@{ shape: sm-circ, label: "Mermaid calls this Start - use Start / end<br/>~~@{~~ shape: sm-circ ~~}~~" } ~~~~~~~ a3@{ shape: fr-circ, label: "Mermaid calls this Stop - use Start / end<br/>~~@{~~ shape: fr-circ ~~}~~" }		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/>~~(((~~text~~)))~~"))) ~~~ u2>"Undefined<br/>~~>~~text~~]~~"]		u1((("Undefined<br/>(((text)))"))) ~~~ u2>"Undefined<br/>>text]"]
	end		end

Hash: Label every shape with its official meaning and syntax; add the ANSI symbols reachable only via @{ shape: }

2026-09-22T23:28:34Z

Label every shape with its official meaning and syntax; add the ANSI symbols reachable only via @{ shape: }

← Older revision		Revision as of 23:28, 22 September 2026
Line 1:		Line 1:
	flowchart TD		flowchart TD

	subgraph ~~SHAPES~~ [~~Node shapes~~]		subgraph FLOW [Start, end and flow control]
	direction LR		direction LR
	~~n1[rectangle] ~~~ n2(rounded) ~~~ n3~~([~~stadium~~]) ~~~ ~~n4[[subroutine]] ~~~ n5[~~(~~cylinder)]~~		f1(["Start / end<br/>([text])"]) ~~~ f2(("Connector<br/>((text))")) ~~~ f3@{ shape: f-circ, label: "Junction<br/>@{ shape: f-circ }" }
	n6(~~(circle~~)) ~~~ n7>~~asymmetric] ~~~ n8{rhombus~~} ~~~~~ n9~~{~~{hexagon}} ~~~ n10[~~/~~parallelogram~~/]		f4@{ shape: fork, label: "Fork / join<br/>@{ shape: fork }" } ~~~ f5@{ shape: notch-pent, label: "Loop limit<br/>@{ shape: notch-pent }" }
	~~n11[\parallelogram alt\]~~ ~~~ ~~n12[~~/~~trapezoid\] ~~~ n13[\trapezoid alt/] ~~~ n14(((double circle)))~~
	end		end

	subgraph ~~LINKS~~ [~~Link styles, arrowheads~~ and ~~edge labels~~]		subgraph STEPS [Steps and actions]
	direction LR		direction LR
	a1[~~from] --~~> ~~a2[arrow~~]		s1["Process<br/>[text]"] ~~~ s2[["Subprocess<br/>[[text]]"]] ~~~ s3@{ shape: st-rect, label: "Multi-process<br/>@{ shape: st-rect }" }
	b1[~~from] --- b2~~[~~open~~]		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/]"/]
	~~c1[from~~] -.-> ~~c2[dotted]~~		s7[/"Priority action<br/>[/text\]"\] ~~~ s8{{"Prepare / condition<br/>{{text}}"}} ~~~ s9@{ shape: delay, label: "Delay<br/>@{ shape: delay }" }
	~~d1[from] ==~~> ~~d2[thick]~~
	~~e1[from]~~ --~~x e2[cross end]~~
	~~f1[from] -~~-~~o f2~~[~~circle end~~]
	g1[~~from~~] -->~~\|edge~~ label~~\| g2[labelled]~~
	end		end

	subgraph ~~NESTED~~ [~~Nested subgraph and cluster edges~~]		subgraph DEC [Decision]
	direction LR		direction LR
	~~subgraph INNER [Inner cluster]~~		d1{"Decision<br/>{text}"}
	~~h1[inside]~~
	~~end~~
	~~h1 --~~> ~~h2[outside the inner cluster]~~
	end		end

	~~SHAPES~~ --> ~~LINKS~~		subgraph IO [Data, input and output]
	~~LINKS~~ --> ~~NESTED~~		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, label: "Summary<br/>@{ shape: cross-circ }" } ~~~ m2@{ shape: hourglass, 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 our convention above]
			direction LR
			a1("Mermaid calls this Event - use Start / end<br/>(text)") ~~~ a2@{ shape: sm-circ, label: "Mermaid calls this Start - use Start / end<br/>@{ shape: sm-circ }" } ~~~ a3@{ shape: fr-circ, 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

Hash: Lay the shape gallery out in rows using invisible links

2026-09-22T22:15:24Z

Lay the shape gallery out in rows using invisible links

← Older revision		Revision as of 22:15, 22 September 2026
Line 3:		Line 3:
	subgraph SHAPES [Node shapes]		subgraph SHAPES [Node shapes]
	direction LR		direction LR
	n1[rectangle]		n1[rectangle] ~~~ n2(rounded) ~~~ n3([stadium]) ~~~ n4[[subroutine]] ~~~ n5[(cylinder)]
	n2(rounded)		n6((circle)) ~~~ n7>asymmetric] ~~~ n8{rhombus} ~~~ n9{{hexagon}} ~~~ n10[/parallelogram/]
	n3([stadium])		n11[\parallelogram alt\] ~~~ n12[/trapezoid\] ~~~ n13[\trapezoid alt/] ~~~ n14(((double circle)))
	n4[[subroutine]]
	n5[(cylinder)]
	n6((circle))
	n7>asymmetric]
	n8{rhombus}
	n9{{hexagon}}
	n10[/parallelogram/]
	n11[\parallelogram alt\]
	n12[/trapezoid\]
	n13[\trapezoid alt/]
	n14(((double circle)))
	end		end

Hash: Theme test diagram: every node shape, link style and nested subgraph, for validating the sitewide theme

2026-09-22T22:14:35Z

Theme test diagram: every node shape, link style and nested subgraph, for validating the sitewide theme

New page

flowchart TD

subgraph SHAPES [Node shapes]
direction LR
n1[rectangle]
n2(rounded)
n3([stadium])
n4[[subroutine]]
n5[(cylinder)]
n6((circle))
n7>asymmetric]
n8{rhombus}
n9{{hexagon}}
n10[/parallelogram/]
n11[\parallelogram alt\]
n12[/trapezoid\]
n13[\trapezoid alt/]
n14(((double circle)))
end

subgraph LINKS [Link styles, arrowheads and edge labels]
direction LR
a1[from] --> a2[arrow]
b1[from] --- b2[open]
c1[from] -.-> c2[dotted]
d1[from] ==> d2[thick]
e1[from] --x e2[cross end]
f1[from] --o f2[circle end]
g1[from] -->|edge label| g2[labelled]
end

subgraph NESTED [Nested subgraph and cluster edges]
direction LR
subgraph INNER [Inner cluster]
h1[inside]
end
h1 --> h2[outside the inner cluster]
end

SHAPES --> LINKS
LINKS --> NESTED