marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-22 17:56:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(accessibility): add accessibility attributes to sequence diagrams

Browse Source
This commit is contained in:
Cory Gwin
2022-03-17 16:18:10 +00:00
committed by GitHub
parent b50052c073
commit 0181cbf743
6 changed files with 116 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
demos/index.html
View File

@@ -37,7 +37,7 @@
axisFormat %m-%d %a axisFormat %m-%d %a
excludes weekends, 2021-10-01,2021-10-04,2021-10-05,2021-10-06,2021-10-07 excludes weekends, 2021-10-01,2021-10-04,2021-10-05,2021-10-06,2021-10-07
includes 2021-10-09 includes 2021-10-09
section Airworks 3.4.1 section Airworks 3.4.1
开发 :b, 2021-10-07, 5d 开发 :b, 2021-10-07, 5d
测试 :after b, 4d 测试 :after b, 4d
@@ -467,6 +467,7 @@
<div class="mermaid"> <div class="mermaid">
sequenceDiagram sequenceDiagram
accDescription Hello friends
participant Alice participant Alice
participant Bob participant Bob
participant John as John<br />Second Line participant John as John<br />Second Line
@@ -619,7 +620,7 @@
<div class="mermaid"> <div class="mermaid">
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01 &lt;&lt;interface&gt;&gt; Class01
Class03 "0" *-- "0..n" Class04 Class03 "0" *-- "0..n" Class04
@@ -656,7 +657,7 @@
<div class="mermaid"> <div class="mermaid">
classDiagram classDiagram
Class01~T~ <|-- AveryLongClass : Cool Class01~T~ <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01 &lt;&lt;interface&gt;&gt; Class01
Class03~T~ "0" *-- "0..n" Class04 Class03~T~ "0" *-- "0..n" Class04
Class05 "1" o-- "many" Class06 Class05 "1" o-- "many" Class06

71
demos/sequence.html Normal file
View File

@@ -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>

4
src/diagrams/sequence/parser/sequenceDiagram.jison
View File

@@ -33,7 +33,7 @@
\%%(?!\{)[^\n]* /* skip comments */ \%%(?!\{)[^\n]* /* skip comments */
[^\}]\%\%[^\n]* /* skip comments */ [^\}]\%\%[^\n]* /* skip comments */
"participant" { this.begin('ID'); return 'participant'; } "participant" { this.begin('ID'); return 'participant'; }
"actor" { this.begin('ID'); return 'participant_actor'; } "actor" { this.begin('ID'); return 'participant_actor'; }
<ID>[^\->:\n,;]+?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; } <ID>[^\->:\n,;]+?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
<ALIAS>"as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; } <ALIAS>"as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
<ALIAS>(?:) { this.popState(); this.popState(); return 'NEWLINE'; } <ALIAS>(?:) { this.popState(); this.popState(); return 'NEWLINE'; }
@@ -57,6 +57,7 @@
"activate" { this.begin('ID'); return 'activate'; } "activate" { this.begin('ID'); return 'activate'; }
"deactivate" { this.begin('ID'); return 'deactivate'; } "deactivate" { this.begin('ID'); return 'deactivate'; }
"title" return 'title'; "title" return 'title';
"accDescription"\s[^#\n;]+ return 'accDescription';
"sequenceDiagram" return 'SD'; "sequenceDiagram" return 'SD';
"autonumber" return 'autonumber'; "autonumber" return 'autonumber';
"," return ','; "," return ',';
@@ -122,6 +123,7 @@ statement
| properties_statement 'NEWLINE' | properties_statement 'NEWLINE'
| details_statement 'NEWLINE' | details_statement 'NEWLINE'
| title text2 'NEWLINE' {$$=[{type:'setTitle', text:$2}]} | title text2 'NEWLINE' {$$=[{type:'setTitle', text:$2}]}
| accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}
| 'loop' restOfLine document end | 'loop' restOfLine document end
{ {
$3.unshift({type: 'loopStart', loopText:yy.parseMessage($2), signalType: yy.LINETYPE.LOOP_START}); $3.unshift({type: 'loopStart', loopText:yy.parseMessage($2), signalType: yy.LINETYPE.LOOP_START});

11
src/diagrams/sequence/sequenceDb.js
View File

@@ -8,6 +8,7 @@ let actors = {};
let messages = []; let messages = [];
const notes = []; const notes = [];
let title = ''; let title = '';
let description = '';
let titleWrapped = false; let titleWrapped = false;
let sequenceNumbersEnabled = false; let sequenceNumbersEnabled = false;
let wrapEnabled = false; let wrapEnabled = false;
@@ -408,6 +409,14 @@ export const apply = function (param) {
} }
}; };
const setAccDescription = function (description_lex) {
description = description_lex;
};
const getAccDescription = function () {
return description;
};
export default { export default {
addActor, addActor,
addMessage, addMessage,
@@ -436,4 +445,6 @@ export default {
addNote, addNote,
setTitle, setTitle,
apply, apply,
setAccDescription,
getAccDescription,
}; };

23
src/diagrams/sequence/sequenceDiagram.spec.js
View File

@@ -73,6 +73,7 @@ Bob-->Alice: I am good thanks!`;
expect(actors.Alice.description).toBe('Alice'); expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob'; actors.Bob.description = 'Bob';
expect(parser.yy.getAccDescription()).toBe('');
const messages = parser.yy.getMessages(); const messages = parser.yy.getMessages();
const title = parser.yy.getTitle(); const title = parser.yy.getTitle();
@@ -81,6 +82,28 @@ Bob-->Alice: I am good thanks!`;
expect(messages[2].from).toBe('Bob'); expect(messages[2].from).toBe('Bob');
expect(title).toBe('Diagram Title'); expect(title).toBe('Diagram Title');
}); });
it('it should handle a sequenceDiagram definition with a accDescription', function () {
const str = `
sequenceDiagram
accDescription: Accessibility Description
Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
mermaidAPI.parse(str);
const actors = parser.yy.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
expect(parser.yy.getAccDescription()).toBe('Accessibility Description');
const messages = parser.yy.getMessages();
const title = parser.yy.getTitle();
expect(messages.length).toBe(3);
expect(messages[0].from).toBe('Alice');
expect(messages[2].from).toBe('Bob');
});
it('it should space in actor names', function () { it('it should space in actor names', function () {
const str = ` const str = `
sequenceDiagram sequenceDiagram

4
src/diagrams/sequence/sequenceRenderer.js
View File

@@ -6,6 +6,7 @@ import common from '../common/common';
import sequenceDb from './sequenceDb'; import sequenceDb from './sequenceDb';
import * as configApi from '../../config'; import * as configApi from '../../config';
import utils, { assignWithDepth, configureSvgSize } from '../../utils'; import utils, { assignWithDepth, configureSvgSize } from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
parser.yy = sequenceDb; parser.yy = sequenceDb;
@@ -727,6 +728,7 @@ export const draw = function (text, id) {
log.error('error while drawing message', e); log.error('error while drawing message', e);
} }
} }
// Increment sequence counter if msg.type is a line (and not another event like activation or note, etc) // Increment sequence counter if msg.type is a line (and not another event like activation or note, etc)
if ( if (
[ [
@@ -802,6 +804,8 @@ export const draw = function (text, id) {
' ' + ' ' +
(height + extraVertForTitle) (height + extraVertForTitle)
); );
addSVGAccessibilityFields(parser.yy, diagram, id);
log.debug(`models:`, bounds.models); log.debug(`models:`, bounds.models);
}; };