From 70f024735b57ac5b29b5c339ac871078ab46fa5a Mon Sep 17 00:00:00 2001
From: Mason Malone <651224+MasonM@users.noreply.github.com>
Date: Wed, 16 Nov 2022 19:36:51 -0800
Subject: [PATCH 1/9] Add title support using YAML frontmatter
---
__mocks__/d3.ts | 12 ++++
.../rendering/classDiagram-v2.spec.js | 12 ++++
.../integration/rendering/erDiagram.spec.js | 13 ++++
.../rendering/flowchart-v2.spec.js | 11 +++
.../integration/rendering/gitGraph.spec.js | 11 +++
.../rendering/stateDiagram-v2.spec.js | 12 ++++
demos/classchart.html | 3 +
demos/er.html | 3 +
demos/flowchart.html | 6 ++
demos/git.html | 3 +
demos/journey.html | 6 +-
demos/state.html | 6 ++
docs/config/setup/modules/defaultConfig.md | 2 +-
docs/syntax/classDiagram.md | 12 ++++
docs/syntax/entityRelationshipDiagram.md | 6 ++
docs/syntax/flowchart.md | 12 ++++
docs/syntax/gitgraph.md | 6 ++
docs/syntax/stateDiagram.md | 6 ++
package.json | 2 +
packages/mermaid/src/Diagram.ts | 11 +++
packages/mermaid/src/config.type.ts | 5 ++
packages/mermaid/src/defaultConfig.ts | 52 ++++++++++++++
.../mermaid/src/diagram-api/detectType.ts | 3 +-
.../src/diagram-api/frontmatter.spec.ts | 71 +++++++++++++++++++
.../mermaid/src/diagram-api/frontmatter.ts | 39 ++++++++++
.../mermaid/src/diagrams/class/classDb.js | 4 ++
.../src/diagrams/class/classRenderer-v2.js | 3 +
packages/mermaid/src/diagrams/class/styles.js | 5 ++
packages/mermaid/src/diagrams/er/erDb.js | 4 ++
.../mermaid/src/diagrams/er/erRenderer.js | 3 +
packages/mermaid/src/diagrams/er/styles.js | 6 ++
.../mermaid/src/diagrams/flowchart/flowDb.js | 4 ++
.../src/diagrams/flowchart/flowRenderer-v2.js | 3 +
.../mermaid/src/diagrams/flowchart/styles.ts | 6 ++
.../mermaid/src/diagrams/git/gitGraphAst.js | 4 ++
.../src/diagrams/git/gitGraphRenderer.js | 7 ++
packages/mermaid/src/diagrams/git/styles.js | 5 ++
.../mermaid/src/diagrams/state/stateDb.js | 4 ++
.../src/diagrams/state/stateRenderer-v2.js | 4 +-
packages/mermaid/src/diagrams/state/styles.js | 6 ++
.../mermaid/src/docs/syntax/classDiagram.md | 6 ++
.../docs/syntax/entityRelationshipDiagram.md | 3 +
packages/mermaid/src/docs/syntax/flowchart.md | 6 ++
packages/mermaid/src/docs/syntax/gitgraph.md | 3 +
.../mermaid/src/docs/syntax/stateDiagram.md | 3 +
packages/mermaid/src/utils.spec.js | 31 ++++++++
packages/mermaid/src/utils.ts | 27 +++++++
pnpm-lock.yaml | 10 +++
48 files changed, 477 insertions(+), 5 deletions(-)
create mode 100644 packages/mermaid/src/diagram-api/frontmatter.spec.ts
create mode 100644 packages/mermaid/src/diagram-api/frontmatter.ts
diff --git a/__mocks__/d3.ts b/__mocks__/d3.ts
index 67f09b6f4..f90d93557 100644
--- a/__mocks__/d3.ts
+++ b/__mocks__/d3.ts
@@ -53,6 +53,18 @@ export const MockD3 = (name, parent) => {
get __parent() {
return parent;
},
+ node() {
+ return {
+ getBBox() {
+ return {
+ x: 5,
+ y: 10,
+ height: 15,
+ width: 20,
+ };
+ },
+ };
+ },
};
elem.append = (name) => {
const mockElem = MockD3(name, elem);
diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index e36693a65..f9ed7c64b 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -496,4 +496,16 @@ describe('Class diagram V2', () => {
);
cy.get('svg');
});
+
+ it('1433: should render a simple class with a title', () => {
+ imgSnapshotTest(
+ `---
+ title: simple class diagram
+ ---
+ classDiagram-v2
+ class Class10
+ `,
+ {}
+ );
+ });
});
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index 057b36dc1..dea3c7620 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -273,4 +273,17 @@ describe('Entity Relationship Diagram', () => {
);
cy.get('svg');
});
+
+ it('1433: should render a simple ER diagram with a title', () => {
+ imgSnapshotTest(
+ `---
+ title: simple ER diagram
+ ---
+ erDiagram
+ CUSTOMER ||--o{ ORDER : places
+ ORDER ||--|{ LINE-ITEM : contains
+ `,
+ {}
+ );
+ });
});
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 61dccfb84..cdf0d07ca 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -663,4 +663,15 @@ flowchart RL
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
+ it('1433: should render a titled flowchart with titleTopMargin set to 0', () => {
+ imgSnapshotTest(
+ `---
+ title: Simple flowchart
+ ---
+ flowchart TD
+ A --> B
+ `,
+ { titleTopMargin: 0 }
+ );
+ });
});
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index afb39b62e..cb70f7272 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -322,4 +322,15 @@ describe('Git Graph diagram', () => {
{}
);
});
+ it('1433: should render a simple gitgraph with a title', () => {
+ imgSnapshotTest(
+ `---
+ title: simple gitGraph
+ ---
+ gitGraph
+ commit
+ `,
+ {}
+ );
+ });
});
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 5b43c890c..7c322c1b3 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -559,4 +559,16 @@ stateDiagram-v2
);
});
});
+ it('1433: should render a simple state diagram with a title', () => {
+ imgSnapshotTest(
+ `---
+ title: simple state diagram
+ ---
+ stateDiagram-v2
+ [*] --> State1
+ State1 --> [*]
+ `,
+ {}
+ );
+ });
});
diff --git a/demos/classchart.html b/demos/classchart.html
index 5979152d6..3481bbad5 100644
--- a/demos/classchart.html
+++ b/demos/classchart.html
@@ -17,6 +17,9 @@
Class diagram demos
+ ---
+ title: Demo Class Diagram
+ ---
classDiagram
accTitle: Demo Class Diagram
accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.
diff --git a/demos/er.html b/demos/er.html
index 4c1a72c20..06fbf020e 100644
--- a/demos/er.html
+++ b/demos/er.html
@@ -20,6 +20,9 @@
+---
+title: This is a title
+---
erDiagram
%% title This is a title
%% accDescription Test a description
diff --git a/demos/flowchart.html b/demos/flowchart.html
index e11bfcb26..60e6160c3 100644
--- a/demos/flowchart.html
+++ b/demos/flowchart.html
@@ -17,6 +17,9 @@
Sample 1
graph
+ ---
+ title: This is a complicated flow
+ ---
graph LR
accTitle: This is a complicated flow
accDescr: This is the descriptoin for the complicated flow.
@@ -221,6 +224,9 @@
Sample 2
graph
+ ---
+ title: What to buy
+ ---
graph TD
accTitle: What to buy
accDescr: Options of what to buy with Christmas money
diff --git a/demos/git.html b/demos/git.html
index 15b4401db..5e683152a 100644
--- a/demos/git.html
+++ b/demos/git.html
@@ -16,6 +16,9 @@
Git diagram demo
+ ---
+ title: Simple Git diagram
+ ---
gitGraph:
options
{
diff --git a/demos/journey.html b/demos/journey.html
index c5c6c25e8..71eecb584 100644
--- a/demos/journey.html
+++ b/demos/journey.html
@@ -16,8 +16,10 @@
Journey diagram demo
- journey
- title My working day
+ ---
+ title: My working day
+ ---
+ journey
accTitle: Very simple journey demo
accDescr: 2 main sections: work and home, each with just a few tasks
diff --git a/demos/state.html b/demos/state.html
index dbe2286a3..9f126cbc2 100644
--- a/demos/state.html
+++ b/demos/state.html
@@ -17,6 +17,9 @@
State diagram demos
Very simple showing change from State1 to State2
+ ---
+ title: Very simple diagram
+ ---
stateDiagram
accTitle: This is the accessible title
accDescr:This is an accessible description
@@ -43,6 +46,9 @@
+ ---
+ title: Very simple diagram
+ ---
stateDiagram-v2
accTitle: This is the accessible title
accDescr: This is an accessible description
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index c7ad1402f..05f6f8a2c 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
#### Defined in
-[defaultConfig.ts:1881](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1881)
+[defaultConfig.ts:1933](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1933)
---
diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index d57125c84..e29c7295e 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -14,6 +14,9 @@ The class diagram is the main building block of object-oriented modeling. It is
Mermaid can render class diagrams.
```mermaid-example
+---
+title: Animal example
+---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
@@ -40,6 +43,9 @@ classDiagram
```
```mermaid
+---
+title: Animal example
+---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
@@ -77,6 +83,9 @@ A single instance of a class in the diagram contains three compartments:
- The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.
```mermaid-example
+---
+title: Bank example
+---
classDiagram
class BankAccount
BankAccount : +String owner
@@ -87,6 +96,9 @@ classDiagram
```
```mermaid
+---
+title: Bank example
+---
classDiagram
class BankAccount
BankAccount : +String owner
diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md
index fef7b6fee..9b938bc36 100644
--- a/docs/syntax/entityRelationshipDiagram.md
+++ b/docs/syntax/entityRelationshipDiagram.md
@@ -13,6 +13,9 @@ Note that practitioners of ER modelling almost always refer to _entity types_ si
Mermaid can render ER diagrams
```mermaid-example
+---
+title: Order example
+---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
@@ -20,6 +23,9 @@ erDiagram
```
```mermaid
+---
+title: Order example
+---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 234f46236..a6094499a 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -15,11 +15,17 @@ It can also accommodate different arrow types, multi directional arrows, and lin
### A node (default)
```mermaid-example
+---
+title: Node
+---
flowchart LR
id
```
```mermaid
+---
+title: Node
+---
flowchart LR
id
```
@@ -33,11 +39,17 @@ found for the node that will be used. Also if you define edges for the node late
one previously defined will be used when rendering the box.
```mermaid-example
+---
+title: Node with text
+---
flowchart LR
id1[This is the text in the box]
```
```mermaid
+---
+title: Node with text
+---
flowchart LR
id1[This is the text in the box]
```
diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index cd1a3f12a..051e7ce39 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -13,6 +13,9 @@ These kind of diagram are particularly helpful to developers and devops teams to
Mermaid can render Git diagrams
```mermaid-example
+ ---
+ title: Example Git diagram
+ ---
gitGraph
commit
commit
@@ -27,6 +30,9 @@ Mermaid can render Git diagrams
```
```mermaid
+ ---
+ title: Example Git diagram
+ ---
gitGraph
commit
commit
diff --git a/docs/syntax/stateDiagram.md b/docs/syntax/stateDiagram.md
index ec91411f6..1cec5afca 100644
--- a/docs/syntax/stateDiagram.md
+++ b/docs/syntax/stateDiagram.md
@@ -11,6 +11,9 @@
Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
```mermaid-example
+---
+title: Simple sample
+---
stateDiagram-v2
[*] --> Still
Still --> [*]
@@ -22,6 +25,9 @@ stateDiagram-v2
```
```mermaid
+---
+title: Simple sample
+---
stateDiagram-v2
[*] --> Still
Still --> [*]
diff --git a/package.json b/package.json
index 7bd648877..1b904cb17 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
"@types/eslint": "^8.4.10",
"@types/express": "^4.17.14",
"@types/jsdom": "^20.0.1",
+ "@types/js-yaml": "^4.0.5",
"@types/lodash": "^4.14.188",
"@types/mdast": "^3.0.10",
"@types/node": "^18.11.9",
@@ -90,6 +91,7 @@
"jest": "^29.3.1",
"jison": "^0.4.18",
"jsdom": "^20.0.2",
+ "js-yaml": "^4.1.0",
"lint-staged": "^13.0.3",
"path-browserify": "^1.0.1",
"pnpm": "^7.15.0",
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 798adf501..574dd0fac 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -2,6 +2,7 @@ import * as configApi from './config';
import { log } from './logger';
import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
import { detectType, getDiagramLoader } from './diagram-api/detectType';
+import { extractFrontMatter } from './diagram-api/frontmatter';
import { isDetailedError, type DetailedError } from './utils';
export type ParseErrorFunction = (err: string | DetailedError, hash?: any) => void;
@@ -29,6 +30,16 @@ export class Diagram {
this.db.clear?.();
this.renderer = diagram.renderer;
this.parser = diagram.parser;
+ const originalParse = this.parser.parse.bind(this.parser);
+ // Wrap the jison parse() method to handle extracting frontmatter.
+ //
+ // This can't be done in this.parse() because some code
+ // directly calls diagram.parser.parse(), bypassing this.parse().
+ //
+ // Similarly, we can't do this in getDiagramFromText() because some code
+ // calls diagram.db.clear(), which would reset anything set by
+ // extractFrontMatter().
+ this.parser.parse = (text: string) => originalParse(extractFrontMatter(text, this.db));
this.parser.parser.yy = this.db;
if (diagram.init) {
diagram.init(cnf);
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index cbcd2f661..ff199ca8b 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -189,6 +189,7 @@ export interface C4DiagramConfig extends BaseDiagramConfig {
}
export interface GitGraphDiagramConfig extends BaseDiagramConfig {
+ titleTopMargin?: number;
diagramPadding?: number;
nodeLabel?: NodeLabel;
mainBranchName?: string;
@@ -227,6 +228,7 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig {
export type PieDiagramConfig = BaseDiagramConfig;
export interface ErDiagramConfig extends BaseDiagramConfig {
+ titleTopMargin?: number;
diagramPadding?: number;
layoutDirection?: string;
minEntityWidth?: number;
@@ -238,6 +240,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig {
}
export interface StateDiagramConfig extends BaseDiagramConfig {
+ titleTopMargin?: number;
arrowMarkerAbsolute?: boolean;
dividerMargin?: number;
sizeUnit?: number;
@@ -258,6 +261,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig {
}
export interface ClassDiagramConfig extends BaseDiagramConfig {
+ titleTopMargin?: number;
arrowMarkerAbsolute?: boolean;
dividerMargin?: number;
padding?: number;
@@ -343,6 +347,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
}
export interface FlowchartDiagramConfig extends BaseDiagramConfig {
+ titleTopMargin?: number;
arrowMarkerAbsolute?: boolean;
diagramPadding?: number;
htmlLabels?: boolean;
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 2ddae580c..37d4f71ff 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -154,6 +154,17 @@ const config: Partial = {
/** The object containing configurations specific for flowcharts */
flowchart: {
+ /**
+ * ### titleTopMargin
+ *
+ * | Parameter | Description | Type | Required | Values |
+ * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+ * | titleTopMargin | Margin top for the text over the flowchart | Integer | Required | Any Positive Value |
+ *
+ * **Notes:** Default value: 25
+ */
+ titleTopMargin: 25,
+
/**
* | Parameter | Description | Type | Required | Values |
* | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
@@ -851,6 +862,16 @@ const config: Partial = {
sectionColours: ['#fff'],
},
class: {
+ /**
+ * ### titleTopMargin
+ *
+ * | Parameter | Description | Type | Required | Values |
+ * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+ * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value |
+ *
+ * **Notes:** Default value: 25
+ */
+ titleTopMargin: 25,
arrowMarkerAbsolute: false,
dividerMargin: 10,
padding: 5,
@@ -884,6 +905,16 @@ const config: Partial = {
defaultRenderer: 'dagre-wrapper',
},
state: {
+ /**
+ * ### titleTopMargin
+ *
+ * | Parameter | Description | Type | Required | Values |
+ * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+ * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value |
+ *
+ * **Notes:** Default value: 25
+ */
+ titleTopMargin: 25,
dividerMargin: 10,
sizeUnit: 5,
padding: 8,
@@ -932,6 +963,17 @@ const config: Partial = {
/** The object containing configurations specific for entity relationship diagrams */
er: {
+ /**
+ * ### titleTopMargin
+ *
+ * | Parameter | Description | Type | Required | Values |
+ * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+ * | titleTopMargin | Margin top for the text over the diagram | Integer | Required | Any Positive Value |
+ *
+ * **Notes:** Default value: 25
+ */
+ titleTopMargin: 25,
+
/**
* | Parameter | Description | Type | Required | Values |
* | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
@@ -1085,6 +1127,16 @@ const config: Partial = {
line_height: 20,
},
gitGraph: {
+ /**
+ * ### titleTopMargin
+ *
+ * | Parameter | Description | Type | Required | Values |
+ * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+ * | titleTopMargin | Margin top for the text over the Git diagram | Integer | Required | Any Positive Value |
+ *
+ * **Notes:** Default value: 25
+ */
+ titleTopMargin: 25,
diagramPadding: 8,
nodeLabel: {
width: 75,
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 1c1abc51c..6f9857221 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -1,6 +1,7 @@
import { MermaidConfig } from '../config.type';
import { log } from '../logger';
import { DetectorRecord, DiagramDetector, DiagramLoader } from './types';
+import { frontMatterRegex } from './frontmatter';
const directive =
/[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
@@ -31,7 +32,7 @@ const detectors: Record = {};
* @returns A graph definition key
*/
export const detectType = function (text: string, config?: MermaidConfig): string {
- text = text.replace(directive, '').replace(anyComment, '\n');
+ text = text.replace(frontMatterRegex, '').replace(directive, '').replace(anyComment, '\n');
for (const [key, { detector }] of Object.entries(detectors)) {
const diagram = detector(text, config);
if (diagram) {
diff --git a/packages/mermaid/src/diagram-api/frontmatter.spec.ts b/packages/mermaid/src/diagram-api/frontmatter.spec.ts
new file mode 100644
index 000000000..92aa70573
--- /dev/null
+++ b/packages/mermaid/src/diagram-api/frontmatter.spec.ts
@@ -0,0 +1,71 @@
+import { vi } from 'vitest';
+import { extractFrontMatter } from './frontmatter';
+
+const dbMock = () => ({ setDiagramTitle: vi.fn() });
+
+describe('extractFrontmatter', () => {
+ it('returns text unchanged if no frontmatter', () => {
+ expect(extractFrontMatter('diagram', null)).toEqual('diagram');
+ });
+
+ it('returns text unchanged if frontmatter lacks closing delimiter', () => {
+ const text = `---\ntitle: foo\ndiagram`;
+ expect(extractFrontMatter(text, null)).toEqual(text);
+ });
+
+ it('handles empty frontmatter', () => {
+ const db = dbMock();
+ const text = `---\n\n---\ndiagram`;
+ expect(extractFrontMatter(text, db)).toEqual('diagram');
+ expect(db.setDiagramTitle).not.toHaveBeenCalled();
+ });
+
+ it('handles frontmatter without mappings', () => {
+ const db = dbMock();
+ const text = `---\n1\n---\ndiagram`;
+ expect(extractFrontMatter(text, db)).toEqual('diagram');
+ expect(db.setDiagramTitle).not.toHaveBeenCalled();
+ });
+
+ it('does not try to parse frontmatter at the end', () => {
+ const db = dbMock();
+ const text = `diagram\n---\ntitle: foo\n---\n`;
+ expect(extractFrontMatter(text, db)).toEqual(text);
+ expect(db.setDiagramTitle).not.toHaveBeenCalled();
+ });
+
+ it('handles frontmatter with multiple delimiters', () => {
+ const db = dbMock();
+ const text = `---\ntitle: foo---bar\n---\ndiagram\n---\ntest`;
+ expect(extractFrontMatter(text, db)).toEqual('diagram\n---\ntest');
+ expect(db.setDiagramTitle).toHaveBeenCalledWith('foo---bar');
+ });
+
+ it('handles frontmatter with title', () => {
+ const db = dbMock();
+ const text = `---\ntitle: foo\n---\ndiagram`;
+ expect(extractFrontMatter(text, db)).toEqual('diagram');
+ expect(db.setDiagramTitle).toHaveBeenCalledWith('foo');
+ });
+
+ it('handles booleans in frontmatter properly', () => {
+ const db = dbMock();
+ const text = `---\ntitle: true\n---\ndiagram`;
+ expect(extractFrontMatter(text, db)).toEqual('diagram');
+ expect(db.setDiagramTitle).toHaveBeenCalledWith('true');
+ });
+
+ it('ignores unspecified frontmatter keys', () => {
+ const db = dbMock();
+ const text = `---\ninvalid: true\ntitle: foo\ntest: bar\n---\ndiagram`;
+ expect(extractFrontMatter(text, db)).toEqual('diagram');
+ expect(db.setDiagramTitle).toHaveBeenCalledWith('foo');
+ });
+
+ it('throws exception for invalid YAML syntax', () => {
+ const text = `---\n!!!\n---\ndiagram`;
+ expect(() => extractFrontMatter(text, null)).toThrow(
+ 'tag suffix cannot contain exclamation marks'
+ );
+ });
+});
diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts
new file mode 100644
index 000000000..46b161582
--- /dev/null
+++ b/packages/mermaid/src/diagram-api/frontmatter.ts
@@ -0,0 +1,39 @@
+// The "* as yaml" part is necessary for tree-shaking
+import * as yaml from 'js-yaml';
+
+// Match Jekyll-style front matter blocks (https://jekyllrb.com/docs/front-matter/).
+// Based on regex used by Jekyll: https://github.com/jekyll/jekyll/blob/6dd3cc21c40b98054851846425af06c64f9fb466/lib/jekyll/document.rb#L10
+// Note that JS doesn't support the "\A" anchor, which means we can't use
+// multiline mode.
+// Relevant YAML spec: https://yaml.org/spec/1.2.2/#914-explicit-documents
+export const frontMatterRegex = /^(?:\s*---\s*[\r\n])(.*?)(?:[\r\n]\s*---\s*[\r\n]+)/s;
+
+type FrontMatterMetadata = {
+ title?: string;
+};
+
+/**
+ * Extract and parse frontmatter from text, if present, and sets appropriate
+ * properties in the provided db.
+ * @param text -
+ * @param db -
+ * @returns text with frontmatter stripped out
+ */
+export function extractFrontMatter(text: string, db: any): string {
+ const matches = text.match(frontMatterRegex);
+ if (matches) {
+ const parsed: FrontMatterMetadata = yaml.load(matches[1], {
+ // To keep things simple, only allow strings, arrays, and plain objects.
+ // https://www.yaml.org/spec/1.2/spec.html#id2802346
+ schema: yaml.FAILSAFE_SCHEMA,
+ }) as FrontMatterMetadata;
+
+ if (parsed && parsed.title) {
+ db?.setDiagramTitle(parsed.title);
+ }
+
+ return text.slice(matches[0].length);
+ } else {
+ return text;
+ }
+}
diff --git a/packages/mermaid/src/diagrams/class/classDb.js b/packages/mermaid/src/diagrams/class/classDb.js
index 83ef6072b..9830c059e 100644
--- a/packages/mermaid/src/diagrams/class/classDb.js
+++ b/packages/mermaid/src/diagrams/class/classDb.js
@@ -10,6 +10,8 @@ import {
getAccDescription,
setAccDescription,
clear as commonClear,
+ setDiagramTitle,
+ getDiagramTitle,
} from '../../commonDb';
const MERMAID_DOM_ID_PREFIX = 'classid-';
@@ -408,4 +410,6 @@ export default {
getTooltip,
setTooltip,
lookUpDomId,
+ setDiagramTitle,
+ getDiagramTitle,
};
diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.js b/packages/mermaid/src/diagrams/class/classRenderer-v2.js
index fbc2e4833..bca3c01c8 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.js
@@ -3,6 +3,7 @@ import graphlib from 'graphlib';
import { log } from '../../logger';
import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js';
+import utils from '../../utils';
import { curveLinear } from 'd3';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { setupGraphViewbox } from '../../setupGraphViewbox';
@@ -429,6 +430,8 @@ export const draw = function (text, id, _version, diagObj) {
id
);
+ utils.insertTitle(svg, 'classTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
+
setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth);
// Add label rects for non html labels
diff --git a/packages/mermaid/src/diagrams/class/styles.js b/packages/mermaid/src/diagrams/class/styles.js
index bc391114e..981cd7b73 100644
--- a/packages/mermaid/src/diagrams/class/styles.js
+++ b/packages/mermaid/src/diagrams/class/styles.js
@@ -148,6 +148,11 @@ g.classGroup line {
font-size: 11px;
}
+.classTitleText {
+ text-anchor: middle;
+ font-size: 18px;
+ fill: ${options.textColor};
+}
`;
export default getStyles;
diff --git a/packages/mermaid/src/diagrams/er/erDb.js b/packages/mermaid/src/diagrams/er/erDb.js
index ad3454f84..96b60836b 100644
--- a/packages/mermaid/src/diagrams/er/erDb.js
+++ b/packages/mermaid/src/diagrams/er/erDb.js
@@ -8,6 +8,8 @@ import {
getAccDescription,
setAccDescription,
clear as commonClear,
+ setDiagramTitle,
+ getDiagramTitle,
} from '../../commonDb';
let entities = {};
@@ -94,4 +96,6 @@ export default {
getAccTitle,
setAccDescription,
getAccDescription,
+ setDiagramTitle,
+ getDiagramTitle,
};
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js
index 323bb4607..c6d00d4a7 100644
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -3,6 +3,7 @@ import { line, curveBasis, select } from 'd3';
import dagre from 'dagre';
import { getConfig } from '../../config';
import { log } from '../../logger';
+import utils from '../../utils';
import erMarkers from './erMarkers';
import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility';
@@ -649,6 +650,8 @@ export const draw = function (text, id, _version, diagObj) {
const padding = conf.diagramPadding;
+ utils.insertTitle(svg, 'entityTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
+
const svgBounds = svg.node().getBBox();
const width = svgBounds.width + padding * 2;
const height = svgBounds.height + padding * 2;
diff --git a/packages/mermaid/src/diagrams/er/styles.js b/packages/mermaid/src/diagrams/er/styles.js
index 907d813b6..42dbcebde 100644
--- a/packages/mermaid/src/diagrams/er/styles.js
+++ b/packages/mermaid/src/diagrams/er/styles.js
@@ -27,6 +27,12 @@ const getStyles = (options) =>
.relationshipLine {
stroke: ${options.lineColor};
}
+
+ .entityTitleText {
+ text-anchor: middle;
+ font-size: 18px;
+ fill: ${options.textColor};
+ }
`;
export default getStyles;
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 6abc22659..38754c667 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -10,6 +10,8 @@ import {
getAccDescription,
setAccDescription,
clear as commonClear,
+ setDiagramTitle,
+ getDiagramTitle,
} from '../../commonDb';
const MERMAID_DOM_ID_PREFIX = 'flowchart-';
@@ -785,4 +787,6 @@ export default {
},
exists,
makeUniq,
+ setDiagramTitle,
+ getDiagramTitle,
};
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 6b7c4c1bf..5f0288b03 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -3,6 +3,7 @@ import { select, curveLinear, selectAll } from 'd3';
import flowDb from './flowDb';
import { getConfig } from '../../config';
+import utils from '../../utils';
import { render } from '../../dagre-wrapper/index.js';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
@@ -437,6 +438,8 @@ export const draw = function (text, id, _version, diagObj) {
const element = root.select('#' + id + ' g');
render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
+ utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
+
setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth);
// Index nodes
diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts
index 82fb1f875..a89d33d3d 100644
--- a/packages/mermaid/src/diagrams/flowchart/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/styles.ts
@@ -103,6 +103,12 @@ const getStyles = (options: FlowChartStyleOptions) =>
pointer-events: none;
z-index: 100;
}
+
+ .flowchartTitleText {
+ text-anchor: middle;
+ font-size: 18px;
+ fill: ${options.textColor};
+ }
`;
export default getStyles;
diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js
index 496e578b7..65980933d 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphAst.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js
@@ -10,6 +10,8 @@ import {
getAccDescription,
setAccDescription,
clear as commonClear,
+ setDiagramTitle,
+ getDiagramTitle,
} from '../../commonDb';
let mainBranchName = getConfig().gitGraph.mainBranchName;
@@ -529,5 +531,7 @@ export default {
getAccTitle,
getAccDescription,
setAccDescription,
+ setDiagramTitle,
+ getDiagramTitle,
commitType,
};
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 71698a500..75e8d445d 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -1,6 +1,7 @@
import { select } from 'd3';
import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI';
import { log } from '../../logger';
+import utils from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
let allCommitsDict = {};
@@ -521,6 +522,12 @@ export const draw = function (txt, id, ver, diagObj) {
}
drawArrows(diagram, allCommitsDict);
drawCommits(diagram, allCommitsDict, true);
+ utils.insertTitle(
+ diagram,
+ 'gitTitleText',
+ gitGraphConfig.titleTopMargin,
+ diagObj.db.getDiagramTitle()
+ );
// Setup the view box and size of the svg element
setupGraphViewbox(
diff --git a/packages/mermaid/src/diagrams/git/styles.js b/packages/mermaid/src/diagrams/git/styles.js
index 7e09ff7e0..741760235 100644
--- a/packages/mermaid/src/diagrams/git/styles.js
+++ b/packages/mermaid/src/diagrams/git/styles.js
@@ -51,6 +51,11 @@ const getStyles = (options) =>
}
.arrow { stroke-width: 8; stroke-linecap: round; fill: none}
+ .gitTitleText {
+ text-anchor: middle;
+ font-size: 18px;
+ fill: ${options.textColor};
+ }
}
`;
diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js
index 5e82eaf78..19ecbe65f 100644
--- a/packages/mermaid/src/diagrams/state/stateDb.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -9,6 +9,8 @@ import {
getAccDescription,
setAccDescription,
clear as commonClear,
+ setDiagramTitle,
+ getDiagramTitle,
} from '../../commonDb';
import {
@@ -571,4 +573,6 @@ export default {
addStyleClass,
setCssClass,
addDescription,
+ setDiagramTitle,
+ getDiagramTitle,
};
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 752b70e44..03c678789 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -5,6 +5,7 @@ import { render } from '../../dagre-wrapper/index.js';
import { log } from '../../logger';
import { configureSvgSize } from '../../setupGraphViewbox';
import common from '../common/common';
+import utils from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
import {
DEFAULT_DIAGRAM_DIRECTION,
@@ -437,8 +438,9 @@ export const draw = function (text, id, _version, diag) {
const padding = 8;
- const bounds = svg.node().getBBox();
+ utils.insertTitle(svg, 'statediagramTitleText', conf.titleTopMargin, diag.db.getDiagramTitle());
+ const bounds = svg.node().getBBox();
const width = bounds.width + padding * 2;
const height = bounds.height + padding * 2;
diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index 4a1c46512..f4783b477 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -194,6 +194,12 @@ g.stateGroup line {
stroke: ${options.lineColor};
stroke-width: 1;
}
+
+.statediagramTitleText {
+ text-anchor: middle;
+ font-size: 18px;
+ fill: ${options.textColor};
+}
`;
export default getStyles;
diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
index 20bdd657f..6ef0b82c9 100644
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -8,6 +8,9 @@ The class diagram is the main building block of object-oriented modeling. It is
Mermaid can render class diagrams.
```mermaid-example
+---
+title: Animal example
+---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
@@ -45,6 +48,9 @@ A single instance of a class in the diagram contains three compartments:
- The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.
```mermaid-example
+---
+title: Bank example
+---
classDiagram
class BankAccount
BankAccount : +String owner
diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
index e52b0df4c..c666877c5 100644
--- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
+++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
@@ -7,6 +7,9 @@ Note that practitioners of ER modelling almost always refer to _entity types_ si
Mermaid can render ER diagrams
```mermaid-example
+---
+title: Order example
+---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 25252e54d..5888db105 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -9,6 +9,9 @@ It can also accommodate different arrow types, multi directional arrows, and lin
### A node (default)
```mermaid-example
+---
+title: Node
+---
flowchart LR
id
```
@@ -22,6 +25,9 @@ found for the node that will be used. Also if you define edges for the node late
one previously defined will be used when rendering the box.
```mermaid-example
+---
+title: Node with text
+---
flowchart LR
id1[This is the text in the box]
```
diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md
index b19c1e2cd..c3210af31 100644
--- a/packages/mermaid/src/docs/syntax/gitgraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -7,6 +7,9 @@ These kind of diagram are particularly helpful to developers and devops teams to
Mermaid can render Git diagrams
```mermaid-example
+ ---
+ title: Example Git diagram
+ ---
gitGraph
commit
commit
diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
index e28819e7a..9293e1083 100644
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -5,6 +5,9 @@
Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
```mermaid-example
+---
+title: Simple sample
+---
stateDiagram-v2
[*] --> Still
Still --> [*]
diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js
index 4a511b3c0..04cf9b769 100644
--- a/packages/mermaid/src/utils.spec.js
+++ b/packages/mermaid/src/utils.spec.js
@@ -4,6 +4,7 @@ import assignWithDepth from './assignWithDepth';
import { detectType } from './diagram-api/detectType';
import { addDiagrams } from './diagram-api/diagram-orchestration';
import memoize from 'lodash/memoize';
+import { MockD3 } from 'd3';
addDiagrams();
describe('when assignWithDepth: should merge objects within objects', function () {
@@ -232,6 +233,16 @@ Alice->Bob: hi`;
const type = detectType(str);
expect(type).toBe('gitGraph');
});
+ it('should handle frontmatter', function () {
+ const str = '---\ntitle: foo\n---\n gitGraph TB:\nbfs1:queue';
+ const type = detectType(str);
+ expect(type).toBe('gitGraph');
+ });
+ it('should handle frontmatter with leading spaces', function () {
+ const str = ' ---\ntitle: foo\n---\n gitGraph TB:\nbfs1:queue';
+ const type = detectType(str);
+ expect(type).toBe('gitGraph');
+ });
});
describe('when finding substring in array ', function () {
it('should return the array index that contains the substring', function () {
@@ -340,3 +351,23 @@ describe('when initializing the id generator', function () {
expect(idGenerator.next()).toEqual(lastId + 1);
});
});
+
+describe('when inserting titles', function () {
+ it('should do nothing when title is empty', function () {
+ const svg = MockD3('svg');
+ utils.insertTitle(svg, 'testClass', 0, '');
+ expect(svg.__children.length).toBe(0);
+ });
+
+ it('should insert title centered', function () {
+ const svg = MockD3('svg');
+ utils.insertTitle(svg, 'testClass', 5, 'test title');
+ expect(svg.__children.length).toBe(1);
+ const text = svg.__children[0];
+ expect(text.__name).toBe('text');
+ expect(text.text).toHaveBeenCalledWith('test title');
+ expect(text.attr).toHaveBeenCalledWith('x', 15);
+ expect(text.attr).toHaveBeenCalledWith('y', -5);
+ expect(text.attr).toHaveBeenCalledWith('class', 'testClass');
+ });
+});
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 3eecd5f4f..82f89d61a 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -885,6 +885,32 @@ export function getErrorMessage(error: unknown): string {
return String(error);
}
+/**
+ * Appends element with the given title, centered.
+ *
+ * @param parent - d3 svg object to append title to
+ * @param cssClass - CSS class for the element containing the title
+ * @param titleTopMargin - Margin in pixels between title and rest of the graph
+ * @param title - The title. If empty, returns immediately.
+ */
+export const insertTitle = (
+ parent,
+ cssClass: string,
+ titleTopMargin: number,
+ title?: string
+): void => {
+ if (!title) {
+ return;
+ }
+ const bounds = parent.node().getBBox();
+ parent
+ .append('text')
+ .text(title)
+ .attr('x', bounds.x + bounds.width / 2)
+ .attr('y', -titleTopMargin)
+ .attr('class', cssClass);
+};
+
export default {
assignWithDepth,
wrapLabel,
@@ -907,4 +933,5 @@ export default {
initIdGenerator: initIdGenerator,
directiveSanitizer,
sanitizeCss,
+ insertTitle,
};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 85afcb31d..3fa800f71 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,9 @@ importers:
'@types/express':
specifier: ^4.17.14
version: 4.17.14
+ '@types/js-yaml':
+ specifier: ^4.0.5
+ version: 4.0.5
'@types/jsdom':
specifier: ^20.0.1
version: 20.0.1
@@ -115,6 +118,9 @@ importers:
jison:
specifier: ^0.4.18
version: 0.4.18
+ js-yaml:
+ specifier: ^4.1.0
+ version: 4.1.0
jsdom:
specifier: ^20.0.2
version: 20.0.2
@@ -2466,6 +2472,10 @@ packages:
'@types/istanbul-lib-report': 3.0.0
dev: true
+ /@types/js-yaml/4.0.5:
+ resolution: {integrity: sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==}
+ dev: true
+
/@types/jsdom/20.0.1:
resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==}
dependencies:
From a11ab3d5ea1477c02101eb7c4279b1dc0d2ef126 Mon Sep 17 00:00:00 2001
From: Mason Malone <651224+MasonM@users.noreply.github.com>
Date: Sat, 19 Nov 2022 12:48:17 -0800
Subject: [PATCH 2/9] Disallow leading whitespace before delimiter
---
.../integration/rendering/classDiagram-v2.spec.js | 10 +++++-----
cypress/integration/rendering/erDiagram.spec.js | 12 ++++++------
cypress/integration/rendering/flowchart-v2.spec.js | 10 +++++-----
cypress/integration/rendering/gitGraph.spec.js | 10 +++++-----
.../integration/rendering/stateDiagram-v2.spec.js | 12 ++++++------
demos/classchart.html | 6 +++---
demos/flowchart.html | 12 ++++++------
demos/git.html | 6 +++---
demos/journey.html | 6 +++---
demos/state.html | 12 ++++++------
packages/mermaid/src/diagram-api/frontmatter.spec.ts | 7 +++++++
packages/mermaid/src/diagram-api/frontmatter.ts | 2 +-
packages/mermaid/src/utils.spec.js | 5 ++---
13 files changed, 58 insertions(+), 52 deletions(-)
diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index f9ed7c64b..f97458857 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -500,11 +500,11 @@ describe('Class diagram V2', () => {
it('1433: should render a simple class with a title', () => {
imgSnapshotTest(
`---
- title: simple class diagram
- ---
- classDiagram-v2
- class Class10
- `,
+title: simple class diagram
+---
+classDiagram-v2
+class Class10
+`,
{}
);
});
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index dea3c7620..8e8946170 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -277,12 +277,12 @@ describe('Entity Relationship Diagram', () => {
it('1433: should render a simple ER diagram with a title', () => {
imgSnapshotTest(
`---
- title: simple ER diagram
- ---
- erDiagram
- CUSTOMER ||--o{ ORDER : places
- ORDER ||--|{ LINE-ITEM : contains
- `,
+title: simple ER diagram
+---
+erDiagram
+CUSTOMER ||--o{ ORDER : places
+ORDER ||--|{ LINE-ITEM : contains
+`,
{}
);
});
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index cdf0d07ca..30ae4f0d2 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -666,11 +666,11 @@ flowchart RL
it('1433: should render a titled flowchart with titleTopMargin set to 0', () => {
imgSnapshotTest(
`---
- title: Simple flowchart
- ---
- flowchart TD
- A --> B
- `,
+title: Simple flowchart
+---
+flowchart TD
+A --> B
+`,
{ titleTopMargin: 0 }
);
});
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index cb70f7272..0b5048b44 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -325,11 +325,11 @@ describe('Git Graph diagram', () => {
it('1433: should render a simple gitgraph with a title', () => {
imgSnapshotTest(
`---
- title: simple gitGraph
- ---
- gitGraph
- commit
- `,
+title: simple gitGraph
+---
+gitGraph
+ commit
+`,
{}
);
});
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 7c322c1b3..0eca01873 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -562,12 +562,12 @@ stateDiagram-v2
it('1433: should render a simple state diagram with a title', () => {
imgSnapshotTest(
`---
- title: simple state diagram
- ---
- stateDiagram-v2
- [*] --> State1
- State1 --> [*]
- `,
+title: simple state diagram
+---
+stateDiagram-v2
+[*] --> State1
+State1 --> [*]
+`,
{}
);
});
diff --git a/demos/classchart.html b/demos/classchart.html
index 3481bbad5..031f3b608 100644
--- a/demos/classchart.html
+++ b/demos/classchart.html
@@ -17,9 +17,9 @@
Class diagram demos
- ---
- title: Demo Class Diagram
- ---
+---
+title: Demo Class Diagram
+---
classDiagram
accTitle: Demo Class Diagram
accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.
diff --git a/demos/flowchart.html b/demos/flowchart.html
index 60e6160c3..7251e586e 100644
--- a/demos/flowchart.html
+++ b/demos/flowchart.html
@@ -17,9 +17,9 @@
Sample 1
graph
- ---
- title: This is a complicated flow
- ---
+---
+title: This is a complicated flow
+---
graph LR
accTitle: This is a complicated flow
accDescr: This is the descriptoin for the complicated flow.
@@ -224,9 +224,9 @@
Sample 2
graph
- ---
- title: What to buy
- ---
+---
+title: What to buy
+---
graph TD
accTitle: What to buy
accDescr: Options of what to buy with Christmas money
diff --git a/demos/git.html b/demos/git.html
index 5e683152a..99c53d7d0 100644
--- a/demos/git.html
+++ b/demos/git.html
@@ -16,9 +16,9 @@
Git diagram demo
- ---
- title: Simple Git diagram
- ---
+---
+title: Simple Git diagram
+---
gitGraph:
options
{
diff --git a/demos/journey.html b/demos/journey.html
index 71eecb584..dadcfb13c 100644
--- a/demos/journey.html
+++ b/demos/journey.html
@@ -16,9 +16,9 @@
Journey diagram demo
- ---
- title: My working day
- ---
+---
+title: My working day
+---
journey
accTitle: Very simple journey demo
accDescr: 2 main sections: work and home, each with just a few tasks
diff --git a/demos/state.html b/demos/state.html
index 9f126cbc2..c13da84d8 100644
--- a/demos/state.html
+++ b/demos/state.html
@@ -17,9 +17,9 @@
State diagram demos
Very simple showing change from State1 to State2
- ---
- title: Very simple diagram
- ---
+---
+title: Very simple diagram
+---
stateDiagram
accTitle: This is the accessible title
accDescr:This is an accessible description
@@ -46,9 +46,9 @@
- ---
- title: Very simple diagram
- ---
+---
+title: Very simple diagram
+---
stateDiagram-v2
accTitle: This is the accessible title
accDescr: This is an accessible description
diff --git a/packages/mermaid/src/diagram-api/frontmatter.spec.ts b/packages/mermaid/src/diagram-api/frontmatter.spec.ts
index 92aa70573..4f8848f25 100644
--- a/packages/mermaid/src/diagram-api/frontmatter.spec.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.spec.ts
@@ -41,6 +41,13 @@ describe('extractFrontmatter', () => {
expect(db.setDiagramTitle).toHaveBeenCalledWith('foo---bar');
});
+ it('handles frontmatter with multi-line string and multiple delimiters', () => {
+ const db = dbMock();
+ const text = `---\ntitle: |\n multi-line string\n ---\n---\ndiagram`;
+ expect(extractFrontMatter(text, db)).toEqual('diagram');
+ expect(db.setDiagramTitle).toHaveBeenCalledWith('multi-line string\n---\n');
+ });
+
it('handles frontmatter with title', () => {
const db = dbMock();
const text = `---\ntitle: foo\n---\ndiagram`;
diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts
index 46b161582..b73440a7d 100644
--- a/packages/mermaid/src/diagram-api/frontmatter.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.ts
@@ -6,7 +6,7 @@ import * as yaml from 'js-yaml';
// Note that JS doesn't support the "\A" anchor, which means we can't use
// multiline mode.
// Relevant YAML spec: https://yaml.org/spec/1.2.2/#914-explicit-documents
-export const frontMatterRegex = /^(?:\s*---\s*[\r\n])(.*?)(?:[\r\n]\s*---\s*[\r\n]+)/s;
+export const frontMatterRegex = /^(?:---\s*[\r\n])(.*?)(?:[\r\n]---\s*[\r\n]+)/s;
type FrontMatterMetadata = {
title?: string;
diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js
index 04cf9b769..4d3e07e6b 100644
--- a/packages/mermaid/src/utils.spec.js
+++ b/packages/mermaid/src/utils.spec.js
@@ -238,10 +238,9 @@ Alice->Bob: hi`;
const type = detectType(str);
expect(type).toBe('gitGraph');
});
- it('should handle frontmatter with leading spaces', function () {
+ it('should not allow frontmatter with leading spaces', function () {
const str = ' ---\ntitle: foo\n---\n gitGraph TB:\nbfs1:queue';
- const type = detectType(str);
- expect(type).toBe('gitGraph');
+ expect(() => detectType(str)).toThrow('No diagram type detected for text');
});
});
describe('when finding substring in array ', function () {
From 3316aa5f4f8c93f3410ca74c2fa5390087f26ef9 Mon Sep 17 00:00:00 2001
From: Mason Malone <651224+MasonM@users.noreply.github.com>
Date: Sat, 19 Nov 2022 12:48:40 -0800
Subject: [PATCH 3/9] Add interface for DiagramDb and other minor changes
---
packages/mermaid/src/diagram-api/frontmatter.ts | 11 ++++++-----
packages/mermaid/src/diagram-api/types.ts | 10 +++++++++-
2 files changed, 15 insertions(+), 6 deletions(-)
diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts
index b73440a7d..800e7399b 100644
--- a/packages/mermaid/src/diagram-api/frontmatter.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.ts
@@ -1,3 +1,4 @@
+import { DiagramDb } from './types';
// The "* as yaml" part is necessary for tree-shaking
import * as yaml from 'js-yaml';
@@ -15,11 +16,11 @@ type FrontMatterMetadata = {
/**
* Extract and parse frontmatter from text, if present, and sets appropriate
* properties in the provided db.
- * @param text -
- * @param db -
+ * @param text - The text that may have a YAML frontmatter.
+ * @param db - Diagram database, could be of any diagram.
* @returns text with frontmatter stripped out
*/
-export function extractFrontMatter(text: string, db: any): string {
+export function extractFrontMatter(text: string, db: DiagramDb): string {
const matches = text.match(frontMatterRegex);
if (matches) {
const parsed: FrontMatterMetadata = yaml.load(matches[1], {
@@ -28,8 +29,8 @@ export function extractFrontMatter(text: string, db: any): string {
schema: yaml.FAILSAFE_SCHEMA,
}) as FrontMatterMetadata;
- if (parsed && parsed.title) {
- db?.setDiagramTitle(parsed.title);
+ if (parsed?.title) {
+ db.setDiagramTitle?.(parsed.title);
}
return text.slice(matches[0].length);
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index d45eac6aa..23810d133 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -8,8 +8,16 @@ export interface InjectUtils {
_setupGraphViewbox: any;
}
+/**
+ * Generic Diagram DB that may apply to any diagram type.
+ */
+export interface DiagramDb {
+ clear?: () => void;
+ setDiagramTitle?: (title: string) => void;
+}
+
export interface DiagramDefinition {
- db: any;
+ db: DiagramDb;
renderer: any;
parser: any;
styles: any;
From 1b201bf462aff405e38001e886e96d0adfb3986c Mon Sep 17 00:00:00 2001
From: Mason Malone <651224+MasonM@users.noreply.github.com>
Date: Sat, 19 Nov 2022 13:01:21 -0800
Subject: [PATCH 4/9] Fix TS errors
---
packages/mermaid/src/Diagram.ts | 2 +-
packages/mermaid/src/diagram-api/frontmatter.spec.ts | 6 +++---
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 574dd0fac..a2349c255 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -56,7 +56,7 @@ export class Diagram {
}
try {
text = text + '\n';
- this.db.clear();
+ this.db.clear?.();
this.parser.parse(text);
return true;
} catch (error) {
diff --git a/packages/mermaid/src/diagram-api/frontmatter.spec.ts b/packages/mermaid/src/diagram-api/frontmatter.spec.ts
index 4f8848f25..4eb9789e2 100644
--- a/packages/mermaid/src/diagram-api/frontmatter.spec.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.spec.ts
@@ -5,12 +5,12 @@ const dbMock = () => ({ setDiagramTitle: vi.fn() });
describe('extractFrontmatter', () => {
it('returns text unchanged if no frontmatter', () => {
- expect(extractFrontMatter('diagram', null)).toEqual('diagram');
+ expect(extractFrontMatter('diagram', dbMock())).toEqual('diagram');
});
it('returns text unchanged if frontmatter lacks closing delimiter', () => {
const text = `---\ntitle: foo\ndiagram`;
- expect(extractFrontMatter(text, null)).toEqual(text);
+ expect(extractFrontMatter(text, dbMock())).toEqual(text);
});
it('handles empty frontmatter', () => {
@@ -71,7 +71,7 @@ describe('extractFrontmatter', () => {
it('throws exception for invalid YAML syntax', () => {
const text = `---\n!!!\n---\ndiagram`;
- expect(() => extractFrontMatter(text, null)).toThrow(
+ expect(() => extractFrontMatter(text, dbMock())).toThrow(
'tag suffix cannot contain exclamation marks'
);
});
From bdf8b01185aee526e1059bc3ca63fa696e734de8 Mon Sep 17 00:00:00 2001
From: Mason Malone <651224+MasonM@users.noreply.github.com>
Date: Sat, 19 Nov 2022 13:20:12 -0800
Subject: [PATCH 5/9] Fix example for Git diagrams
---
docs/syntax/gitgraph.md | 56 ++++++++++----------
packages/mermaid/src/docs/syntax/gitgraph.md | 28 +++++-----
2 files changed, 42 insertions(+), 42 deletions(-)
diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index 051e7ce39..964fe3886 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -13,37 +13,37 @@ These kind of diagram are particularly helpful to developers and devops teams to
Mermaid can render Git diagrams
```mermaid-example
- ---
- title: Example Git diagram
- ---
- gitGraph
- commit
- commit
- branch develop
- checkout develop
- commit
- commit
- checkout main
- merge develop
- commit
- commit
+---
+title: Example Git diagram
+---
+gitGraph
+ commit
+ commit
+ branch develop
+ checkout develop
+ commit
+ commit
+ checkout main
+ merge develop
+ commit
+ commit
```
```mermaid
- ---
- title: Example Git diagram
- ---
- gitGraph
- commit
- commit
- branch develop
- checkout develop
- commit
- commit
- checkout main
- merge develop
- commit
- commit
+---
+title: Example Git diagram
+---
+gitGraph
+ commit
+ commit
+ branch develop
+ checkout develop
+ commit
+ commit
+ checkout main
+ merge develop
+ commit
+ commit
```
In Mermaid, we support the basic git operations like:
diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md
index c3210af31..f1930bb27 100644
--- a/packages/mermaid/src/docs/syntax/gitgraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -7,20 +7,20 @@ These kind of diagram are particularly helpful to developers and devops teams to
Mermaid can render Git diagrams
```mermaid-example
- ---
- title: Example Git diagram
- ---
- gitGraph
- commit
- commit
- branch develop
- checkout develop
- commit
- commit
- checkout main
- merge develop
- commit
- commit
+---
+title: Example Git diagram
+---
+gitGraph
+ commit
+ commit
+ branch develop
+ checkout develop
+ commit
+ commit
+ checkout main
+ merge develop
+ commit
+ commit
```
In Mermaid, we support the basic git operations like:
From de99cdfb4cc7db05778a19102fd3cca47ae66d50 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Mon, 21 Nov 2022 08:22:10 +0530
Subject: [PATCH 6/9] chore: Add size shield in readme
Co-authored-by: Alois Klink
---
README.md | 2 +-
README.zh-CN.md | 2 +-
docs/intro/index.md | 2 +-
packages/mermaid/README.md | 2 +-
packages/mermaid/README.zh-CN.md | 2 +-
packages/mermaid/src/docs/intro/index.md | 2 +-
6 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/README.md b/README.md
index 4d66d3e6b..d4ed52485 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# mermaid
-[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
+[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://bundlephobia.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
# Whoa, what's going on here?
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 62eba5244..4bdbc4ae7 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -1,6 +1,6 @@
# mermaid
-[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
+[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://bundlephobia.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
[English](./README.md) | 简体中文
diff --git a/docs/intro/index.md b/docs/intro/index.md
index a3ed371ac..b8a27acff 100644
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -14,7 +14,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
-[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
+[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://bundlephobia.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
diff --git a/packages/mermaid/README.md b/packages/mermaid/README.md
index 90ae1ad4c..567f522cf 100644
--- a/packages/mermaid/README.md
+++ b/packages/mermaid/README.md
@@ -1,6 +1,6 @@
# mermaid
-[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
+[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://bundlephobia.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
# Whoa, what's going on here?
diff --git a/packages/mermaid/README.zh-CN.md b/packages/mermaid/README.zh-CN.md
index fcaa1f523..0ccef27e4 100644
--- a/packages/mermaid/README.zh-CN.md
+++ b/packages/mermaid/README.zh-CN.md
@@ -1,6 +1,6 @@
# mermaid
-[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
+[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://bundlephobia.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
[English](./README.md) | 简体中文
diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md
index 80d806730..b58321e75 100644
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -8,7 +8,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
-[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
+[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://bundlephobia.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
From a8c5f6d517a966735fa8c98fba71902c0e657970 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 21 Nov 2022 01:49:48 +0000
Subject: [PATCH 7/9] chore(deps): update lycheeverse/lychee-action action to
v1.5.4
---
.github/workflows/link-checker.yml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml
index 0a499f2d6..fbf03cb39 100644
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -36,7 +36,7 @@ jobs:
restore-keys: cache-lychee-
- name: Link Checker
- uses: lycheeverse/lychee-action@v1.5.2
+ uses: lycheeverse/lychee-action@v1.5.4
with:
args: --verbose --no-progress --cache --max-cache-age 1d packages/mermaid/src/docs/**/*.md README.md README.zh-CN.md
fail: true
From ed6ad77fd91a33d8c2e723e4199bb41db5edfd8d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Mon, 21 Nov 2022 11:52:57 +0530
Subject: [PATCH 8/9] docs: Remove warning in readme
---
README.md | 17 -----------------
packages/mermaid/README.md | 17 -----------------
2 files changed, 34 deletions(-)
diff --git a/README.md b/README.md
index 4d66d3e6b..9d4b44906 100644
--- a/README.md
+++ b/README.md
@@ -2,23 +2,6 @@
[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
-# Whoa, what's going on here?
-
-We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will:
-
-- Make it possible to select which diagrams to include on your site
-- Open up for lazy loading
-- Make it possible to add diagrams from outside of the Mermaid repository
-- Separate the release flow between different diagrams and the Mermaid core
-
-As such be aware of some changes..
-
-# We use pnpm now
-
-# The source code has moved
-
-It is now located in the src folder for each respective package located as subfolders in packages.
-
English | [简体中文](./README.zh-CN.md)
diff --git a/packages/mermaid/README.md b/packages/mermaid/README.md
index 90ae1ad4c..e8d92350e 100644
--- a/packages/mermaid/README.md
+++ b/packages/mermaid/README.md
@@ -2,23 +2,6 @@
[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://www.jsdelivr.com/package/npm/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://twitter.com/mermaidjs_)
-# Whoa, what's going on here?
-
-We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will:
-
-- Make it possible to select which diagrams to include on your site
-- Open up for lazy loading
-- Make it possible to add diagrams from outside of the Mermaid repository
-- Separate the release flow between different diagrams and the Mermaid core
-
-As such be aware of some changes..
-
-# We use pnpm now
-
-# The source code has moved
-
-It is now located in the src folder for each respective package located as subfolders in packages.
-
English | [简体中文](./README.zh-CN.md)
From b9f0c7c807955fe3fd26155c81f763b18e950084 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 21 Nov 2022 07:10:09 +0000
Subject: [PATCH 9/9] chore(deps): update pnpm to v7.17.0
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 7bd648877..b04c8cf32 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"version": "9.2.2",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
- "packageManager": "pnpm@7.15.0",
+ "packageManager": "pnpm@7.17.0",
"keywords": [
"diagram",
"markdown",