feat(accessibility): add accessibility attributes to sequence diagrams

2025-08-22 01:36:43 +02:00 · 2022-03-17 16:18:10 +00:00
parent b50052c073
commit 0181cbf743
6 changed files with 116 additions and 4 deletions
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Mermaid Quick Test Page</title>
+	<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+	<style>
+		div.mermaid {
+			/* font-family: 'trebuchet ms', verdana, arial; */
+			font-family: 'Courier New', Courier, monospace !important;
+		}
+	</style>
+</head>
+
+<body>
+
+
+	<div class="mermaid">
+		sequenceDiagram
+		accDescription Test a description
+		participant Alice
+		participant Bob
+		participant John as John<br />Second Line
+		rect rgb(200, 220, 100)
+		rect rgb(200, 255, 200)
+		Alice ->> Bob: Hello Bob, how are you?
+		Bob-->>John: How about you John?
+		end
+		Bob--x Alice: I am good thanks!
+		Bob-x John: I am good thanks!
+		Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
+		Bob-->Alice: Checking with John...
+		Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
+		Bob-x John: Hey John - we're still waiting to know<br />how you're doing
+		Note over John:nowrap: John's trying hard not to break his train of thought.
+		Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
+		Note over John: After a few more moments, John<br />finally snaps out of it.
+		end
+		alt either this
+		Alice->>John: Yes
+		else or this
+		Alice->>John: No
+		else or this will happen
+		Alice->John: Maybe
+		end
+		par this happens in parallel
+		Alice -->> Bob: Parallel message 1
+		and
+		Alice -->> John: Parallel message 2
+		end
+	</div>
+
+	<script src="./mermaid.js"></script>
+	<script>
+		mermaid.initialize({
+		  theme: 'forest',
+		  // themeCSS: '.node rect { fill: red; }',
+		  logLevel: 3,
+		  securityLevel: 'loose',
+		  flowchart: { curve: 'basis' },
+		  gantt: { axisFormat: '%m/%d/%Y' },
+		  sequence: { actorMargin: 50 },
+		  // sequenceDiagram: { actorMargin: 300 } // deprecated
+		});
+	</script>
+
+</body>
+
+</html>