mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge pull request #2832 from gwincr11/cg-accessibility
ER and Sequence Chart Accessibility
This commit is contained in:
commit
44877545e5
45
demos/er.html
Normal file
45
demos/er.html
Normal 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>
|
@ -230,6 +230,8 @@
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
flowchart TD
|
||||
title Christmas
|
||||
accDescription Get money
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
|
||||
C -->|One| D[Laptop]
|
||||
|
@ -467,6 +467,7 @@
|
||||
|
||||
<div class="mermaid">
|
||||
sequenceDiagram
|
||||
accDescription Hello friends
|
||||
participant Alice
|
||||
participant Bob
|
||||
participant John as John<br />Second Line
|
||||
|
72
demos/sequence.html
Normal file
72
demos/sequence.html
Normal 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
11
launch.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "node",
|
||||
"request": "attach",
|
||||
"name": "Attach",
|
||||
"port": 9229
|
||||
}
|
||||
]
|
||||
}
|
@ -9,15 +9,16 @@
|
||||
* @param id
|
||||
*/
|
||||
export default function addSVGAccessibilityFields(yy_parser, svg, id) {
|
||||
if (typeof svg.insert == 'undefined') {
|
||||
return;
|
||||
}
|
||||
let title_string = yy_parser.getTitle();
|
||||
let description = yy_parser.getAccDescription();
|
||||
svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id);
|
||||
|
||||
svg
|
||||
.insert('desc', ':first-child')
|
||||
.attr('id', 'chart-desc-' + id)
|
||||
.text(description);
|
||||
|
||||
svg
|
||||
.insert('title', ':first-child')
|
||||
.attr('id', 'chart-title-' + id)
|
||||
|
@ -5,6 +5,7 @@ import * as configApi from '../../config';
|
||||
let entities = {};
|
||||
let relationships = [];
|
||||
let title = '';
|
||||
let description = '';
|
||||
|
||||
const Cardinality = {
|
||||
ZERO_OR_ONE: 'ZERO_OR_ONE',
|
||||
@ -75,6 +76,14 @@ const getTitle = function () {
|
||||
return title;
|
||||
};
|
||||
|
||||
const setAccDescription = function (txt) {
|
||||
description = txt;
|
||||
};
|
||||
|
||||
const getAccDescription = function () {
|
||||
return description;
|
||||
};
|
||||
|
||||
const clear = function () {
|
||||
entities = {};
|
||||
relationships = [];
|
||||
@ -94,4 +103,6 @@ export default {
|
||||
clear,
|
||||
setTitle,
|
||||
getTitle,
|
||||
setAccDescription,
|
||||
getAccDescription,
|
||||
};
|
||||
|
@ -7,6 +7,7 @@ import { getConfig } from '../../config';
|
||||
import { log } from '../../logger';
|
||||
import erMarkers from './erMarkers';
|
||||
import { configureSvgSize } from '../../utils';
|
||||
import addSVGAccessibilityFields from '../../accessibility';
|
||||
|
||||
const conf = {};
|
||||
|
||||
@ -637,6 +638,8 @@ export const draw = function (text, id) {
|
||||
configureSvgSize(svg, height, width, conf.useMaxWidth);
|
||||
|
||||
svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
|
||||
|
||||
addSVGAccessibilityFields(parser.yy, svg, id);
|
||||
}; // draw
|
||||
|
||||
export default {
|
||||
|
@ -2,8 +2,14 @@
|
||||
|
||||
%options case-insensitive
|
||||
%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'; }
|
||||
<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; }
|
||||
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
|
||||
@ -84,6 +90,8 @@ statement
|
||||
}
|
||||
| entityName BLOCK_START BLOCK_STOP { yy.addEntity($1); }
|
||||
| entityName { yy.addEntity($1); }
|
||||
| title title_value { $$=$2.trim();yy.setTitle($$); }
|
||||
| accDescription description_value { $$=$2.trim();yy.setAccDescription($$); }
|
||||
;
|
||||
|
||||
entityName
|
||||
|
@ -181,6 +181,17 @@ describe('when parsing ER diagram it...', function () {
|
||||
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 () {
|
||||
const line1 = 'CAR ||--o{ PERSON : "insured for"';
|
||||
const line2 = 'CAR }o--|| PERSON : "owned by"';
|
||||
|
@ -33,7 +33,7 @@
|
||||
\%%(?!\{)[^\n]* /* skip comments */
|
||||
[^\}]\%\%[^\n]* /* skip comments */
|
||||
"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'; }
|
||||
<ALIAS>"as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
|
||||
<ALIAS>(?:) { this.popState(); this.popState(); return 'NEWLINE'; }
|
||||
@ -56,7 +56,9 @@
|
||||
"note" return 'note';
|
||||
"activate" { this.begin('ID'); return 'activate'; }
|
||||
"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';
|
||||
"autonumber" return 'autonumber';
|
||||
"," return ',';
|
||||
@ -121,7 +123,9 @@ statement
|
||||
| link_statement 'NEWLINE'
|
||||
| properties_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
|
||||
{
|
||||
$3.unshift({type: 'loopStart', loopText:yy.parseMessage($2), signalType: yy.LINETYPE.LOOP_START});
|
||||
|
@ -8,7 +8,7 @@ let actors = {};
|
||||
let messages = [];
|
||||
const notes = [];
|
||||
let title = '';
|
||||
let titleWrapped = false;
|
||||
let description = '';
|
||||
let sequenceNumbersEnabled = false;
|
||||
let wrapEnabled = false;
|
||||
|
||||
@ -122,9 +122,6 @@ export const getActorKeys = function () {
|
||||
export const getTitle = function () {
|
||||
return title;
|
||||
};
|
||||
export const getTitleWrapped = function () {
|
||||
return titleWrapped;
|
||||
};
|
||||
export const enableSequenceNumbers = function () {
|
||||
sequenceNumbersEnabled = true;
|
||||
};
|
||||
@ -324,9 +321,9 @@ export const getActorProperty = function (actor, key) {
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const setTitle = function (titleWrap) {
|
||||
title = titleWrap.text;
|
||||
titleWrapped = (titleWrap.wrap === undefined && autoWrap()) || !!titleWrap.wrap;
|
||||
export const setTitle = function (txt) {
|
||||
let sanitizedText = sanitizeText(txt, configApi.getConfig());
|
||||
title = sanitizedText;
|
||||
};
|
||||
|
||||
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 {
|
||||
addActor,
|
||||
addMessage,
|
||||
@ -428,7 +434,6 @@ export default {
|
||||
getTitle,
|
||||
parseDirective,
|
||||
getConfig: () => configApi.getConfig().sequence,
|
||||
getTitleWrapped,
|
||||
clear,
|
||||
parseMessage,
|
||||
LINETYPE,
|
||||
@ -437,4 +442,6 @@ export default {
|
||||
addNote,
|
||||
setTitle,
|
||||
apply,
|
||||
setAccDescription,
|
||||
getAccDescription,
|
||||
};
|
||||
|
@ -60,7 +60,7 @@ Bob-->Alice: I am good thanks!`;
|
||||
mermaidAPI.parse(str);
|
||||
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 = `
|
||||
sequenceDiagram
|
||||
title: Diagram Title
|
||||
@ -73,6 +73,7 @@ Bob-->Alice: I am good thanks!`;
|
||||
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();
|
||||
|
||||
@ -81,6 +82,52 @@ Bob-->Alice: I am good thanks!`;
|
||||
expect(messages[2].from).toBe('Bob');
|
||||
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 () {
|
||||
const str = `
|
||||
sequenceDiagram
|
||||
@ -1586,6 +1633,7 @@ participant Alice
|
||||
|
||||
renderer.bounds.init();
|
||||
mermaidAPI.parse(str);
|
||||
|
||||
renderer.draw(str, 'tst');
|
||||
|
||||
const { bounds, models } = renderer.bounds.getBounds();
|
||||
|
@ -6,6 +6,7 @@ import common from '../common/common';
|
||||
import sequenceDb from './sequenceDb';
|
||||
import * as configApi from '../../config';
|
||||
import utils, { assignWithDepth, configureSvgSize } from '../../utils';
|
||||
import addSVGAccessibilityFields from '../../accessibility';
|
||||
|
||||
parser.yy = sequenceDb;
|
||||
|
||||
@ -727,6 +728,7 @@ export const draw = function (text, id) {
|
||||
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)
|
||||
if (
|
||||
[
|
||||
@ -802,6 +804,8 @@ export const draw = function (text, id) {
|
||||
' ' +
|
||||
(height + extraVertForTitle)
|
||||
);
|
||||
|
||||
addSVGAccessibilityFields(parser.yy, diagram, id);
|
||||
log.debug(`models:`, bounds.models);
|
||||
};
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user