marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-10 09:39:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2832 from gwincr11/cg-accessibility

Browse Source 
ER and Sequence Chart Accessibility
This commit is contained in:
Knut Sveidqvist
2022-03-31 21:01:31 +02:00
committed by GitHub
parent 9123757549 50f522ae5c
commit 44877545e5
14 changed files with 242 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
demos/er.html Normal file
View File

@@ -0,0 +1,45 @@
<!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">
erDiagram
title This is a title
accDescription Test a description
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
</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>

2
demos/flowchart.html
View File

@@ -230,6 +230,8 @@
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <div class="mermaid">
flowchart TD flowchart TD
title Christmas
accDescription Get money
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss} B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
C -->|One| D[Laptop] C -->|One| D[Laptop]

1
demos/index.html
View File

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

72
demos/sequence.html Normal file
View File

@@ -0,0 +1,72 @@
<!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
title: FancySequenceDiagram
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>

11
launch.json Normal file
View File

@@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229
}
]
}

5
src/accessibility.js
View File

@@ -9,15 +9,16 @@
* @param id * @param id
*/ */
export default function addSVGAccessibilityFields(yy_parser, svg, id) { export default function addSVGAccessibilityFields(yy_parser, svg, id) {
if (typeof svg.insert == 'undefined') {
return;
}
let title_string = yy_parser.getTitle(); let title_string = yy_parser.getTitle();
let description = yy_parser.getAccDescription(); let description = yy_parser.getAccDescription();
svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id); svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id);
svg svg
.insert('desc', ':first-child') .insert('desc', ':first-child')
.attr('id', 'chart-desc-' + id) .attr('id', 'chart-desc-' + id)
.text(description); .text(description);
svg svg
.insert('title', ':first-child') .insert('title', ':first-child')
.attr('id', 'chart-title-' + id) .attr('id', 'chart-title-' + id)

11
src/diagrams/er/erDb.js
View File

@@ -5,6 +5,7 @@ import * as configApi from '../../config';
let entities = {}; let entities = {};
let relationships = []; let relationships = [];
let title = ''; let title = '';
let description = '';
const Cardinality = { const Cardinality = {
ZERO_OR_ONE: 'ZERO_OR_ONE', ZERO_OR_ONE: 'ZERO_OR_ONE',
@@ -75,6 +76,14 @@ const getTitle = function () {
return title; return title;
}; };
const setAccDescription = function (txt) {
description = txt;
};
const getAccDescription = function () {
return description;
};
const clear = function () { const clear = function () {
entities = {}; entities = {};
relationships = []; relationships = [];
@@ -94,4 +103,6 @@ export default {
clear, clear,
setTitle, setTitle,
getTitle, getTitle,
setAccDescription,
getAccDescription,
}; };

3
src/diagrams/er/erRenderer.js
View File

@@ -7,6 +7,7 @@ import { getConfig } from '../../config';
import { log } from '../../logger'; import { log } from '../../logger';
import erMarkers from './erMarkers'; import erMarkers from './erMarkers';
import { configureSvgSize } from '../../utils'; import { configureSvgSize } from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
const conf = {}; const conf = {};
@@ -637,6 +638,8 @@ export const draw = function (text, id) {
configureSvgSize(svg, height, width, conf.useMaxWidth); configureSvgSize(svg, height, width, conf.useMaxWidth);
svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`); svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
addSVGAccessibilityFields(parser.yy, svg, id);
}; // draw }; // draw
export default { export default {

8
src/diagrams/er/parser/erDiagram.jison
View File

@@ -2,8 +2,14 @@
%options case-insensitive %options case-insensitive
%x open_directive type_directive arg_directive block %x open_directive type_directive arg_directive block
%x title
%x accDescription
%% %%
title { this.begin("title");return 'title'; }
<title>(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; }
accDescription { this.begin("accDescription");return 'accDescription'; }
<accDescription>(?!\n|;|#)*[^\n]* { this.popState(); return "description_value"; }
\%\%\{ { this.begin('open_directive'); return 'open_directive'; } \%\%\{ { this.begin('open_directive'); return 'open_directive'; }
<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; } <open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; }
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; } <type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
@@ -84,6 +90,8 @@ statement
} }
| entityName BLOCK_START BLOCK_STOP { yy.addEntity($1); } | entityName BLOCK_START BLOCK_STOP { yy.addEntity($1); }
| entityName { yy.addEntity($1); } | entityName { yy.addEntity($1); }
| title title_value { $$=$2.trim();yy.setTitle($$); }
| accDescription description_value { $$=$2.trim();yy.setAccDescription($$); }
; ;
entityName entityName

11
src/diagrams/er/parser/erDiagram.spec.js
View File

@@ -181,6 +181,17 @@ describe('when parsing ER diagram it...', function () {
expect(Object.keys(erDb.getEntities()).length).toBe(1); expect(Object.keys(erDb.getEntities()).length).toBe(1);
}); });
it('should allow for a title and acc description', function () {
const teacherRole = 'is teacher of';
const line1 = `TEACHER }o--o{ STUDENT : "${teacherRole}"`;
erDiagram.parser.parse(
`erDiagram\ntitle graph title\n accDescription this graph is about stuff\n${line1}`
);
expect(erDb.getTitle()).toBe('graph title');
expect(erDb.getAccDescription()).toBe('this graph is about stuff');
});
it('should allow more than one relationship between the same two entities', function () { it('should allow more than one relationship between the same two entities', function () {
const line1 = 'CAR ||--o{ PERSON : "insured for"'; const line1 = 'CAR ||--o{ PERSON : "insured for"';
const line2 = 'CAR }o--|| PERSON : "owned by"'; const line2 = 'CAR }o--|| PERSON : "owned by"';

10
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'; }
@@ -56,7 +56,9 @@
"note" return 'note'; "note" return 'note';
"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"\s[^#\n;]+ return 'title';
"title:"\s[^#\n;]+ return 'legacy_title';
"accDescription"\s[^#\n;]+ return 'accDescription';
"sequenceDiagram" return 'SD'; "sequenceDiagram" return 'SD';
"autonumber" return 'autonumber'; "autonumber" return 'autonumber';
"," return ','; "," return ',';
@@ -121,7 +123,9 @@ statement
| link_statement 'NEWLINE' | link_statement 'NEWLINE'
| properties_statement 'NEWLINE' | properties_statement 'NEWLINE'
| details_statement 'NEWLINE' | details_statement 'NEWLINE'
| title text2 'NEWLINE' {$$=[{type:'setTitle', text:$2}]} | title {yy.setTitle($1.substring(6));$$=$1.substring(6);}
| legacy_title {yy.setTitle($1.substring(7));$$=$1.substring(7);}
| 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});

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

@@ -8,7 +8,7 @@ let actors = {};
let messages = []; let messages = [];
const notes = []; const notes = [];
let title = ''; let title = '';
let titleWrapped = false; let description = '';
let sequenceNumbersEnabled = false; let sequenceNumbersEnabled = false;
let wrapEnabled = false; let wrapEnabled = false;
@@ -122,9 +122,6 @@ export const getActorKeys = function () {
export const getTitle = function () { export const getTitle = function () {
return title; return title;
}; };
export const getTitleWrapped = function () {
return titleWrapped;
};
export const enableSequenceNumbers = function () { export const enableSequenceNumbers = function () {
sequenceNumbersEnabled = true; sequenceNumbersEnabled = true;
}; };
@@ -324,9 +321,9 @@ export const getActorProperty = function (actor, key) {
return undefined; return undefined;
}; };
export const setTitle = function (titleWrap) { export const setTitle = function (txt) {
title = titleWrap.text; let sanitizedText = sanitizeText(txt, configApi.getConfig());
titleWrapped = (titleWrap.wrap === undefined && autoWrap()) || !!titleWrap.wrap; title = sanitizedText;
}; };
export const apply = function (param) { export const apply = function (param) {
@@ -409,6 +406,15 @@ export const apply = function (param) {
} }
}; };
const setAccDescription = function (description_lex) {
let sanitizedText = sanitizeText(description_lex, configApi.getConfig());
description = sanitizedText;
};
const getAccDescription = function () {
return description;
};
export default { export default {
addActor, addActor,
addMessage, addMessage,
@@ -428,7 +434,6 @@ export default {
getTitle, getTitle,
parseDirective, parseDirective,
getConfig: () => configApi.getConfig().sequence, getConfig: () => configApi.getConfig().sequence,
getTitleWrapped,
clear, clear,
parseMessage, parseMessage,
LINETYPE, LINETYPE,
@@ -437,4 +442,6 @@ export default {
addNote, addNote,
setTitle, setTitle,
apply, apply,
setAccDescription,
getAccDescription,
}; };

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

@@ -60,7 +60,7 @@ Bob-->Alice: I am good thanks!`;
mermaidAPI.parse(str); mermaidAPI.parse(str);
expect(parser.yy.showSequenceNumbers()).toBe(true); expect(parser.yy.showSequenceNumbers()).toBe(true);
}); });
it('it should handle a sequenceDiagram definition with a title', function () { it('it should handle a sequenceDiagram definition with a title:', function () {
const str = ` const str = `
sequenceDiagram sequenceDiagram
title: Diagram Title title: Diagram Title
@@ -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,52 @@ 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 title without a :', function () {
const str = `
sequenceDiagram
title Diagram Title
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('');
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');
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
@@ -1586,6 +1633,7 @@ participant Alice
renderer.bounds.init(); renderer.bounds.init();
mermaidAPI.parse(str); mermaidAPI.parse(str);
renderer.draw(str, 'tst'); renderer.draw(str, 'tst');
const { bounds, models } = renderer.bounds.getBounds(); const { bounds, models } = renderer.bounds.getBounds();

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);
}; };