diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index c77c261097..a941329420 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -298,8 +298,8 @@ describe('Gantt diagram', () => {
renderGraph(
`
gantt
- title ${expectedTitle}
- accDescription ${expectedAccDescription}
+ accTitle: ${expectedTitle}
+ accDescr: ${expectedAccDescription}
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js
index 7dc6b51b48..be27f39faa 100644
--- a/cypress/integration/rendering/requirement.spec.js
+++ b/cypress/integration/rendering/requirement.spec.js
@@ -53,8 +53,8 @@ describe('Requirement diagram', () => {
renderGraph(
`
requirementDiagram
- title ${expectedTitle}
- accDescription ${expectedAccDescription}
+ accTitle: ${expectedTitle}
+ accDescr: ${expectedAccDescription}
requirement test_req {
id: 1
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 3e67c04377..6bedd233eb 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -658,7 +658,7 @@ context('Sequence diagram', () => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
- expect(height).to.be.within(920, 960);
+ expect(height).to.be.within(920, 971);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -697,7 +697,7 @@ context('Sequence diagram', () => {
cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
- expect(height).to.be.within(920, 960);
+ expect(height).to.be.within(920, 971);
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(820 * 0.95, 820 * 1.05);
expect(svg).to.not.have.attr('style');
diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js
index 30a7efb7f9..0eb8d111b0 100644
--- a/cypress/integration/rendering/theme.spec.js
+++ b/cypress/integration/rendering/theme.spec.js
@@ -36,6 +36,8 @@ describe('Pie Chart', () => {
imgSnapshotTest(
`
pie title Sports in Sweden
+ accTitle: This is a title
+ accDescr: This is a description
"Bandy" : 40
"Ice-Hockey" : 80
"Football" : 90
@@ -49,6 +51,8 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0} }%%
graph TD
+ accTitle: This is a title
+ accDescr: This is a description
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
@@ -72,6 +76,9 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
flowchart TD
+ accTitle: This is a title
+ accDescr: This is a description
+
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[Another]
@@ -95,6 +102,9 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
sequenceDiagram
+ accTitle: This is a title
+ accDescr: This is a description
+
autonumber
par Action 1
Alice->>John: Hello John, how are you?
@@ -122,6 +132,9 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
classDiagram
+ accTitle: This is a title
+ accDescr: This is a description
+
Animal "*" <|-- "1" Duck
Animal "1" <|-- "10" Fish
Animal <|-- Zebra
@@ -168,6 +181,9 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
stateDiagram
+ accTitle: This is a title
+ accDescr: This is a description
+
[*] --> Active
state Active {
@@ -200,6 +216,9 @@ stateDiagram
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
stateDiagram-v2
+ accTitle: This is a title
+ accDescr: This is a description
+
[*] --> Active
state Active {
@@ -231,6 +250,9 @@ stateDiagram-v2
imgSnapshotTest(
`
erDiagram
+ accTitle: This is a title
+ accDescr: This is a description
+
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
@@ -250,6 +272,9 @@ erDiagram
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
journey
+ accTitle: This is a title
+ accDescr: This is a description
+
title My working day
section Go to work
Make tea: 5: Me
@@ -268,6 +293,9 @@ erDiagram
imgSnapshotTest(
`
gantt
+ accTitle: This is a title
+ accDescr: This is a description
+
dateFormat :YYYY-MM-DD
title :Adding GANTT diagram functionality to mermaid
excludes :excludes the named dates/days from being included in a charted task..
diff --git a/cypress/platform/gitgraph.html b/cypress/platform/gitgraph.html
index 13a7da8132..176e0f5ea1 100644
--- a/cypress/platform/gitgraph.html
+++ b/cypress/platform/gitgraph.html
@@ -34,8 +34,8 @@ info below
"git0": "#550055"
} } }%%
gitGraph
- accTitle: "Git Graph"
- accDescr {
+ accTitle: "Git Graph"
+ accDescr {
Git Graph description.
Multiline description
}
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index 3961533857..ccbc007647 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -31,23 +31,24 @@
-graph LR
- subgraph id1 [title is set]
- A-->B
- end
- subgraph id2 [title]
- E
- end
+ sequenceDiagram
+ accTitle: This is a title
+ accDescr: This is a description
- B-->C
-
- subgraph id3
- C-->D
- end
- class id3,id2,A redBg;
- class id3,A whiteTxt;
- classDef redBg fill:#622;
- classDef whiteTxt color: white;
+ autonumber
+ par Action 1
+ Alice->>John: Hello John, how are you?
+ and Action 2
+ Alice->>Bob: Hello Bob, how are you?
+ end
+ Alice->>+John: Hello John, how are you?
+ Alice->>+John: John, can you hear me?
+ John-->>-Alice: Hi Alice, I can hear you!
+ Note right of John: John is perceptive
+ John-->>-Alice: I feel great!
+ loop Every minute
+ John-->Alice: Great!
+ end
journey
diff --git a/src/diagrams/pie/parser/pie.jison b/src/diagrams/pie/parser/pie.jison
index 690d2d7084..5d74261516 100644
--- a/src/diagrams/pie/parser/pie.jison
+++ b/src/diagrams/pie/parser/pie.jison
@@ -69,7 +69,7 @@ line
statement
:
| txt value { yy.addSection($1,yy.cleanupValue($2)); }
- | title title_value { $$=$2.trim();yy.setTitle($$); }
+ | title title_value { $$=$2.trim();yy.setPieTitle($$); }
| acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); }
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
diff --git a/src/diagrams/pie/pieDb.js b/src/diagrams/pie/pieDb.js
index a1941a9c2a..3d2f1a2e86 100644
--- a/src/diagrams/pie/pieDb.js
+++ b/src/diagrams/pie/pieDb.js
@@ -52,6 +52,15 @@ const clear = function () {
commonClear();
};
+export const setPieTitle = function (txt) {
+ let sanitizedText = common.sanitizeText(txt, configApi.getConfig());
+ title = sanitizedText;
+};
+
+export const getPieTitle = function () {
+ return title;
+};
+
export default {
parseDirective,
getConfig: () => configApi.getConfig().pie,
@@ -61,6 +70,8 @@ export default {
clear,
setTitle,
getTitle,
+ setPieTitle,
+ getPieTitle,
setShowData,
getShowData,
getAccDescription,
diff --git a/src/diagrams/pie/pieRenderer.js b/src/diagrams/pie/pieRenderer.js
index 78e65ab492..f2d8c2916d 100644
--- a/src/diagrams/pie/pieRenderer.js
+++ b/src/diagrams/pie/pieRenderer.js
@@ -136,7 +136,7 @@ export const draw = (txt, id) => {
svg
.append('text')
- .text(parser.yy.getTitle())
+ .text(parser.yy.getPieTitle())
.attr('x', 0)
.attr('y', -(height - 50) / 2)
.attr('class', 'pieTitleText');
diff --git a/src/diagrams/sequence/parser/sequenceDiagram.jison b/src/diagrams/sequence/parser/sequenceDiagram.jison
index a04f356f36..c53bba72c1 100644
--- a/src/diagrams/sequence/parser/sequenceDiagram.jison
+++ b/src/diagrams/sequence/parser/sequenceDiagram.jison
@@ -136,8 +136,8 @@ statement
| link_statement 'NEWLINE'
| properties_statement 'NEWLINE'
| details_statement 'NEWLINE'
- | title {yy.setTitle($1.substring(6));$$=$1.substring(6);}
- | legacy_title {yy.setTitle($1.substring(7));$$=$1.substring(7);}
+ | title {yy.setDiagramTitle($1.substring(6));$$=$1.substring(6);}
+ | legacy_title {yy.setDiagramTitle($1.substring(7));$$=$1.substring(7);}
| acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); }
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
diff --git a/src/diagrams/sequence/sequenceDb.js b/src/diagrams/sequence/sequenceDb.js
index 10569ba382..6c9478ae6f 100644
--- a/src/diagrams/sequence/sequenceDb.js
+++ b/src/diagrams/sequence/sequenceDb.js
@@ -14,7 +14,7 @@ let prevActor = undefined;
let actors = {};
let messages = [];
const notes = [];
-let title = '';
+let diagramTitle = '';
let description = '';
let sequenceNumbersEnabled = false;
let wrapEnabled = false;
@@ -144,6 +144,7 @@ export const clear = function () {
actors = {};
messages = [];
sequenceNumbersEnabled = false;
+ diagramTitle = '';
commonClear();
};
@@ -330,6 +331,15 @@ export const getActorProperty = function (actor, key) {
return undefined;
};
+export const setDiagramTitle = function (txt) {
+ let sanitizedText = sanitizeText(txt, configApi.getConfig());
+ diagramTitle = sanitizedText;
+};
+
+export const getDiagramTitle = function () {
+ return diagramTitle;
+};
+
export const apply = function (param) {
if (param instanceof Array) {
param.forEach(function (item) {
@@ -441,6 +451,7 @@ export default {
getActorKeys,
getActorProperty,
getTitle,
+ getDiagramTitle,
parseDirective,
getConfig: () => configApi.getConfig().sequence,
clear,
@@ -450,6 +461,7 @@ export default {
PLACEMENT,
addNote,
setTitle,
+ setDiagramTitle,
apply,
setAccDescription,
getAccDescription,
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index 528387fd73..6421e8d804 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -612,7 +612,7 @@ export const draw = function (text, id) {
const actors = parser.yy.getActors();
const actorKeys = parser.yy.getActorKeys();
const messages = parser.yy.getMessages();
- const title = parser.yy.getTitle();
+ const title = parser.yy.getDiagramTitle();
const maxMessageWidthPerActor = getMaxMessageWidthPerActor(actors, messages);
conf.height = calculateActorMargins(actors, maxMessageWidthPerActor);