diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index c98ce70c8..6ce545082 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -38,7 +38,7 @@
-
+
flowchart LR
classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
@@ -99,7 +99,7 @@ flowchart TD
class A someclass;
class C someclass;
-
+
sequenceDiagram
title: My Sequence Diagram Title
accTitle: My Acc Sequence Diagram
@@ -109,14 +109,14 @@ flowchart TD
John-->>Alice: Great!
Alice-)John: See you later!
-
+
graph TD
A -->|000| B
B -->|111| C
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
-
+
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
@@ -130,10 +130,10 @@ graph TD
Go downstairs: 5: Me
Sit down: 5: Me
-
+
info
-
+
requirementDiagram
accTitle: My req Diagram
accDescr: My req Diagram Description
@@ -174,7 +174,7 @@ requirementDiagram
test_req - contains -> test_req3
test_req <- copies - test_entity2
-
+
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
@@ -206,7 +206,7 @@ gantt
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
-
+
stateDiagram
state Active {
Idle
@@ -234,7 +234,7 @@ stateDiagram
end
B ->> A: Return
-
+
classDiagram
accTitle: My class diagram
accDescr: My class diagram Description
@@ -259,7 +259,7 @@ class Class10 {
A->>Bob: Hola
Bob-->A: Pasten !
-
+
gitGraph
commit id: "ZERO"
branch develop
@@ -288,7 +288,7 @@ flowchart TD
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
-
+
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
@@ -311,7 +311,7 @@ flowchart TD
+run()
}
-
+
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
diff --git a/docs/Setup.md b/docs/Setup.md
index 1f948ee01..2ef56e1d8 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -1407,6 +1407,15 @@ This sets the auto-wrap padding for the diagram (sides only)
**Notes:** Default value: 0.
+## parse
+
+### Parameters
+
+- `text` **[string][5]**
+- `parseError` **[Function][6]?**
+
+Returns **[boolean][7]**
+
## setSiteConfig
## setSiteConfig
@@ -1424,7 +1433,7 @@ function _Default value: At default, will mirror Global Config_
- `conf` **MermaidConfig** The base currentConfig to use as siteConfig
-Returns **[object][5]** The siteConfig
+Returns **[object][8]** The siteConfig
## getSiteConfig
@@ -1436,7 +1445,7 @@ Returns **[object][5]** The siteConfig
**Notes**: Returns **any** values in siteConfig.
-Returns **[object][5]** The siteConfig
+Returns **[object][8]** The siteConfig
## setConfig
@@ -1475,10 +1484,10 @@ $(function () {
### Parameters
-- `id` **[string][6]** The id of the element to be rendered
-- `text` **[string][6]** The graph definition
-- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void**
-- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
+- `id` **[string][5]** The id of the element to be rendered
+- `text` **[string][5]** The graph definition
+- `cb` **function (svgCode: [string][5], bindFunctions: function (element: [Element][9]): void): void**
+- `container` **[Element][9]** Selector to element in which a div with the graph temporarily will be
inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
element will be removed when rendering is completed.
@@ -1517,7 +1526,7 @@ Pushes in a directive to the configuration
### Parameters
-- `directive` **[object][5]** The directive to push in
+- `directive` **[object][8]** The directive to push in
## reset
@@ -1615,6 +1624,8 @@ Returns **void**
[2]: Setup.md?id=render
[3]: 8.6.0_docs.md
[4]: #mermaidapi-configuration-defaults
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-[7]: https://developer.mozilla.org/docs/Web/API/Element
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[9]: https://developer.mozilla.org/docs/Web/API/Element
diff --git a/package.json b/package.json
index a791f0574..fa3b69dda 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "mermaid",
- "version": "9.1.6",
+ "version": "9.2.0-rc1",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.min.js",
"module": "dist/mermaid.esm.min.mjs",
diff --git a/src/diagram-api/detectType.ts b/src/diagram-api/detectType.ts
index 87b681767..817de5149 100644
--- a/src/diagram-api/detectType.ts
+++ b/src/diagram-api/detectType.ts
@@ -1,26 +1,12 @@
import { MermaidConfig } from '../config.type';
-export type DiagramDetector = (text: string) => boolean;
+export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
const directive =
/[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
const anyComment = /\s*%%.*\n/gm;
const detectors: Record = {};
-const diagramMatchers: Record = {
- c4: /^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/,
- sequence: /^\s*sequenceDiagram/,
- gantt: /^\s*gantt/,
- classDiagram: /^\s*classDiagram-v2/,
- stateDiagram: /^\s*stateDiagram-v2/,
- 'flowchart-v2': /^\s*flowchart/, // Might need to add |graph to fix #3391
- info: /^\s*info/,
- pie: /^\s*pie/,
- er: /^\s*erDiagram/,
- journey: /^\s*journey/,
- // gitGraph: /^\s*gitGraph/,
- requirement: /^\s*requirement(Diagram)?/,
-};
/**
* @function detectType Detects the type of the graph text. Takes into consideration the possible
@@ -47,28 +33,9 @@ const diagramMatchers: Record = {
*/
export const detectType = function (text: string, config?: MermaidConfig): string {
text = text.replace(directive, '').replace(anyComment, '\n');
- for (const [diagram, matcher] of Object.entries(diagramMatchers)) {
- if (text.match(matcher)) {
- return diagram;
- }
- }
-
- if (text.match(/^\s*classDiagram/)) {
- if (config?.class?.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
- return 'class';
- }
-
- if (text.match(/^\s*stateDiagram/)) {
- if (config?.state?.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
- return 'state';
- }
-
- if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') {
- return 'flowchart-v2';
- }
for (const [key, detector] of Object.entries(detectors)) {
- if (detector(text)) {
+ if (detector(text, config)) {
return key;
}
}
diff --git a/src/diagram-api/diagram-orchestration.ts b/src/diagram-api/diagram-orchestration.ts
index ea0c76ffa..b9b0520c9 100644
--- a/src/diagram-api/diagram-orchestration.ts
+++ b/src/diagram-api/diagram-orchestration.ts
@@ -1,20 +1,310 @@
import { registerDiagram } from './diagramAPI';
-import * as mindmapDb from '../diagrams/mindmap/mindmapDb';
-import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
+
// @ts-ignore: TODO Fix ts errors
import mindmapParser from '../diagrams/mindmap/parser/mindmap';
+import * as mindmapDb from '../diagrams/mindmap/mindmapDb';
import { mindmapDetector } from '../diagrams/mindmap/mindmapDetector';
+import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
import mindmapStyles from '../diagrams/mindmap/styles';
-import gitGraphDb from '../diagrams/git/gitGraphAst';
-import gitGraphRenderer from '../diagrams/git/gitGraphRenderer';
// @ts-ignore: TODO Fix ts errors
import gitGraphParser from '../diagrams/git/parser/gitGraph';
import { gitGraphDetector } from '../diagrams/git/gitGraphDetector';
+import gitGraphDb from '../diagrams/git/gitGraphAst';
+import gitGraphRenderer from '../diagrams/git/gitGraphRenderer';
import gitGraphStyles from '../diagrams/git/styles';
+// @ts-ignore: TODO Fix ts errors
+import c4Parser from '../diagrams/c4/parser/c4Diagram';
+import { c4Detector } from '../diagrams/c4/c4Detector';
+import c4Db from '../diagrams/c4/c4Db';
+import c4Renderer from '../diagrams/c4/c4Renderer';
+import c4Styles from '../diagrams/c4/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import classParser from '../diagrams/class/parser/classDiagram';
+import { classDetector } from '../diagrams/class/classDetector';
+import { classDetectorV2 } from '../diagrams/class/classDetector-V2';
+import classDb from '../diagrams/class/classDb';
+import classRenderer from '../diagrams/class/classRenderer';
+import classRendererV2 from '../diagrams/class/classRenderer-v2';
+import classStyles from '../diagrams/class/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import erParser from '../diagrams/er/parser/erDiagram';
+import { erDetector } from '../diagrams/er/erDetector';
+import erDb from '../diagrams/er/erDb';
+import erRenderer from '../diagrams/er/erRenderer';
+import erStyles from '../diagrams/er/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import flowParser from '../diagrams/flowchart/parser/flow';
+import { flowDetector } from '../diagrams/flowchart/flowDetector';
+import { flowDetectorV2 } from '../diagrams/flowchart/flowDetector-v2';
+import flowDb from '../diagrams/flowchart/flowDb';
+import flowRenderer from '../diagrams/flowchart/flowRenderer';
+import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';
+import flowStyles from '../diagrams/flowchart/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import ganttParser from '../diagrams/gantt/parser/gantt';
+import { ganttDetector } from '../diagrams/gantt/ganttDetector';
+import ganttDb from '../diagrams/gantt/ganttDb';
+import ganttRenderer from '../diagrams/gantt/ganttRenderer';
+import ganttStyles from '../diagrams/gantt/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import infoParser from '../diagrams/info/parser/info';
+import infoDb from '../diagrams/info/infoDb';
+import infoRenderer from '../diagrams/info/infoRenderer';
+import { infoDetector } from '../diagrams/info/infoDetector';
+import infoStyles from '../diagrams/info/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import pieParser from '../diagrams/pie/parser/pie';
+import { pieDetector } from '../diagrams/pie/pieDetector';
+import pieDb from '../diagrams/pie/pieDb';
+import pieRenderer from '../diagrams/pie/pieRenderer';
+import pieStyles from '../diagrams/pie/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import requirementParser from '../diagrams/requirement/parser/requirementDiagram';
+import { requirementDetector } from '../diagrams/requirement/requirementDetector';
+import requirementDb from '../diagrams/requirement/requirementDb';
+import requirementRenderer from '../diagrams/requirement/requirementRenderer';
+import requirementStyles from '../diagrams/requirement/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';
+import { sequenceDetector } from '../diagrams/sequence/sequenceDetector';
+import sequenceDb from '../diagrams/sequence/sequenceDb';
+import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
+import sequenceStyles from '../diagrams/sequence/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import stateParser from '../diagrams/state/parser/stateDiagram';
+import { stateDetector } from '../diagrams/state/stateDetector';
+import { stateDetectorV2 } from '../diagrams/state/stateDetector-V2';
+import stateDb from '../diagrams/state/stateDb';
+import stateRenderer from '../diagrams/state/stateRenderer';
+import stateRendererV2 from '../diagrams/state/stateRenderer-v2';
+import stateStyles from '../diagrams/state/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import journeyParser from '../diagrams/user-journey/parser/journey';
+import { journeyDetector } from '../diagrams/user-journey/journeyDetector';
+import journeyDb from '../diagrams/user-journey/journeyDb';
+import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
+import journeyStyles from '../diagrams/user-journey/styles';
+
export const addDiagrams = () => {
- // Register mindmap and other built-in diagrams
+ registerDiagram(
+ 'c4',
+ {
+ parser: c4Parser,
+ db: c4Db,
+ renderer: c4Renderer,
+ styles: c4Styles,
+ init: (cnf) => {
+ c4Renderer.setConf(cnf.c4);
+ },
+ },
+ c4Detector
+ );
+ registerDiagram(
+ 'class',
+ {
+ parser: classParser,
+ db: classDb,
+ renderer: classRenderer,
+ styles: classStyles,
+ init: (cnf) => {
+ if (!cnf.class) {
+ cnf.class = {};
+ }
+ cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+ classDb.clear();
+ },
+ },
+ classDetector
+ );
+ registerDiagram(
+ 'classDiagram',
+ {
+ parser: classParser,
+ db: classDb,
+ renderer: classRendererV2,
+ styles: classStyles,
+ init: (cnf) => {
+ if (!cnf.class) {
+ cnf.class = {};
+ }
+ cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+ classDb.clear();
+ },
+ },
+ classDetectorV2
+ );
+ registerDiagram(
+ 'er',
+ {
+ parser: erParser,
+ db: erDb,
+ renderer: erRenderer,
+ styles: erStyles,
+ },
+ erDetector
+ );
+ registerDiagram(
+ 'gantt',
+ {
+ parser: ganttParser,
+ db: ganttDb,
+ renderer: ganttRenderer,
+ styles: ganttStyles,
+ },
+ ganttDetector
+ );
+ registerDiagram(
+ 'info',
+ {
+ parser: infoParser,
+ db: infoDb,
+ renderer: infoRenderer,
+ styles: infoStyles,
+ },
+ infoDetector
+ );
+ registerDiagram(
+ 'pie',
+ {
+ parser: pieParser,
+ db: pieDb,
+ renderer: pieRenderer,
+ styles: pieStyles,
+ },
+ pieDetector
+ );
+ registerDiagram(
+ 'requirement',
+ {
+ parser: requirementParser,
+ db: requirementDb,
+ renderer: requirementRenderer,
+ styles: requirementStyles,
+ },
+ requirementDetector
+ );
+ registerDiagram(
+ 'sequence',
+ {
+ parser: sequenceParser,
+ db: sequenceDb,
+ renderer: sequenceRenderer,
+ styles: sequenceStyles,
+ init: (cnf) => {
+ if (!cnf.sequence) {
+ cnf.sequence = {};
+ }
+ cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+ if ('sequenceDiagram' in cnf) {
+ throw new Error(
+ '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
+ );
+ }
+ sequenceDb.setWrap(cnf.wrap);
+ sequenceRenderer.setConf(cnf.sequence);
+ },
+ },
+ sequenceDetector
+ );
+ registerDiagram(
+ 'state',
+ {
+ parser: stateParser,
+ db: stateDb,
+ renderer: stateRenderer,
+ styles: stateStyles,
+ init: (cnf) => {
+ if (!cnf.state) {
+ cnf.state = {};
+ }
+ cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+ stateDb.clear();
+ },
+ },
+ stateDetector
+ );
+ registerDiagram(
+ 'stateDiagram',
+ {
+ parser: stateParser,
+ db: stateDb,
+ renderer: stateRendererV2,
+ styles: stateStyles,
+ init: (cnf) => {
+ if (!cnf.state) {
+ cnf.state = {};
+ }
+ cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+ stateDb.clear();
+ },
+ },
+ stateDetectorV2
+ );
+ registerDiagram(
+ 'journey',
+ {
+ parser: journeyParser,
+ db: journeyDb,
+ renderer: journeyRenderer,
+ styles: journeyStyles,
+ init: (cnf) => {
+ journeyRenderer.setConf(cnf.journey);
+ journeyDb.clear();
+ },
+ },
+ journeyDetector
+ );
+
+ registerDiagram(
+ 'flowchart',
+ {
+ parser: flowParser,
+ db: flowDb,
+ renderer: flowRendererV2,
+ styles: flowStyles,
+ init: (cnf) => {
+ flowRenderer.setConf(cnf.flowchart);
+ if (!cnf.flowchart) {
+ cnf.flowchart = {};
+ }
+ cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+ flowDb.clear();
+ flowDb.setGen('gen-1');
+ },
+ },
+ flowDetector
+ );
+ registerDiagram(
+ 'flowchart-v2',
+ {
+ parser: flowParser,
+ db: flowDb,
+ renderer: flowRendererV2,
+ styles: flowStyles,
+ init: (cnf) => {
+ flowRendererV2.setConf(cnf.flowchart);
+ if (!cnf.flowchart) {
+ cnf.flowchart = {};
+ }
+ cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+ flowDb.clear();
+ flowDb.setGen('gen-2');
+ },
+ },
+ flowDetectorV2
+ );
registerDiagram(
'gitGraph',
{ parser: gitGraphParser, db: gitGraphDb, renderer: gitGraphRenderer, styles: gitGraphStyles },
diff --git a/src/diagram-api/diagramAPI.ts b/src/diagram-api/diagramAPI.ts
index 652e66465..eab74a022 100644
--- a/src/diagram-api/diagramAPI.ts
+++ b/src/diagram-api/diagramAPI.ts
@@ -1,62 +1,3 @@
-import c4Db from '../diagrams/c4/c4Db';
-import c4Renderer from '../diagrams/c4/c4Renderer';
-import c4Styles from '../diagrams/c4/styles';
-// @ts-ignore: TODO Fix ts errors
-import c4Parser from '../diagrams/c4/parser/c4Diagram';
-import classDb from '../diagrams/class/classDb';
-import classRenderer from '../diagrams/class/classRenderer';
-import classRendererV2 from '../diagrams/class/classRenderer-v2';
-import classStyles from '../diagrams/class/styles';
-// @ts-ignore: TODO Fix ts errors
-import classParser from '../diagrams/class/parser/classDiagram';
-import erDb from '../diagrams/er/erDb';
-import erRenderer from '../diagrams/er/erRenderer';
-// @ts-ignore: TODO Fix ts errors
-import erParser from '../diagrams/er/parser/erDiagram';
-import erStyles from '../diagrams/er/styles';
-import flowDb from '../diagrams/flowchart/flowDb';
-import flowRenderer from '../diagrams/flowchart/flowRenderer';
-import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';
-import flowStyles from '../diagrams/flowchart/styles';
-// @ts-ignore: TODO Fix ts errors
-import flowParser from '../diagrams/flowchart/parser/flow';
-import ganttDb from '../diagrams/gantt/ganttDb';
-import ganttRenderer from '../diagrams/gantt/ganttRenderer';
-// @ts-ignore: TODO Fix ts errors
-import ganttParser from '../diagrams/gantt/parser/gantt';
-import ganttStyles from '../diagrams/gantt/styles';
-
-import infoDb from '../diagrams/info/infoDb';
-import infoRenderer from '../diagrams/info/infoRenderer';
-// @ts-ignore: TODO Fix ts errors
-import infoParser from '../diagrams/info/parser/info';
-import infoStyles from '../diagrams/info/styles';
-// @ts-ignore: TODO Fix ts errors
-import pieParser from '../diagrams/pie/parser/pie';
-import pieDb from '../diagrams/pie/pieDb';
-import pieRenderer from '../diagrams/pie/pieRenderer';
-import pieStyles from '../diagrams/pie/styles';
-// @ts-ignore: TODO Fix ts errors
-import requirementParser from '../diagrams/requirement/parser/requirementDiagram';
-import requirementDb from '../diagrams/requirement/requirementDb';
-import requirementRenderer from '../diagrams/requirement/requirementRenderer';
-import requirementStyles from '../diagrams/requirement/styles';
-// @ts-ignore: TODO Fix ts errors
-import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';
-import sequenceDb from '../diagrams/sequence/sequenceDb';
-import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
-import sequenceStyles from '../diagrams/sequence/styles';
-// @ts-ignore: TODO Fix ts errors
-import stateParser from '../diagrams/state/parser/stateDiagram';
-import stateDb from '../diagrams/state/stateDb';
-import stateRenderer from '../diagrams/state/stateRenderer';
-import stateRendererV2 from '../diagrams/state/stateRenderer-v2';
-import stateStyles from '../diagrams/state/styles';
-import journeyDb from '../diagrams/user-journey/journeyDb';
-import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
-import journeyStyles from '../diagrams/user-journey/styles';
-// @ts-ignore: TODO Fix ts errors
-import journeyParser from '../diagrams/user-journey/parser/journey';
import { addDetector, DiagramDetector } from './detectType';
import { log as _log } from '../logger';
import { getConfig as _getConfig } from '../config';
@@ -73,158 +14,7 @@ export interface DiagramDefinition {
init?: (config: MermaidConfig) => void;
}
-const diagrams: Record = {
- c4: {
- db: c4Db,
- renderer: c4Renderer,
- parser: c4Parser,
- init: (cnf) => {
- c4Renderer.setConf(cnf.c4);
- },
- styles: c4Styles,
- },
- class: {
- db: classDb,
- renderer: classRenderer,
- parser: classParser,
- init: (cnf) => {
- if (!cnf.class) {
- cnf.class = {};
- }
- cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
- classDb.clear();
- },
- styles: classStyles,
- },
- classDiagram: {
- db: classDb,
- renderer: classRendererV2,
- parser: classParser,
- init: (cnf) => {
- if (!cnf.class) {
- cnf.class = {};
- }
- cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
- classDb.clear();
- },
- styles: classStyles,
- },
- er: {
- db: erDb,
- renderer: erRenderer,
- parser: erParser,
- styles: erStyles,
- },
- flowchart: {
- db: flowDb,
- renderer: flowRenderer,
- parser: flowParser,
- init: (cnf) => {
- flowRenderer.setConf(cnf.flowchart);
- if (!cnf.flowchart) {
- cnf.flowchart = {};
- }
- cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
- flowDb.clear();
- flowDb.setGen('gen-1');
- },
- styles: flowStyles,
- },
- 'flowchart-v2': {
- db: flowDb,
- renderer: flowRendererV2,
- parser: flowParser,
- init: (cnf) => {
- flowRendererV2.setConf(cnf.flowchart);
- if (!cnf.flowchart) {
- cnf.flowchart = {};
- }
- cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
- flowDb.clear();
- flowDb.setGen('gen-2');
- },
- styles: flowStyles,
- },
- gantt: {
- db: ganttDb,
- renderer: ganttRenderer,
- parser: ganttParser,
- styles: ganttStyles,
- },
- info: {
- db: infoDb,
- renderer: infoRenderer,
- parser: infoParser,
- styles: infoStyles,
- },
- pie: {
- db: pieDb,
- renderer: pieRenderer,
- parser: pieParser,
- styles: pieStyles,
- },
- requirement: {
- db: requirementDb,
- renderer: requirementRenderer,
- parser: requirementParser,
- styles: requirementStyles,
- },
- sequence: {
- db: sequenceDb,
- renderer: sequenceRenderer,
- parser: sequenceParser,
- init: (cnf) => {
- if (!cnf.sequence) {
- cnf.sequence = {};
- }
- cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
- if ('sequenceDiagram' in cnf) {
- throw new Error(
- '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
- );
- }
- sequenceDb.setWrap(cnf.wrap);
- sequenceRenderer.setConf(cnf.sequence);
- },
- styles: sequenceStyles,
- },
- state: {
- db: stateDb,
- renderer: stateRenderer,
- parser: stateParser,
- init: (cnf) => {
- if (!cnf.state) {
- cnf.state = {};
- }
- cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
- stateDb.clear();
- },
- styles: stateStyles,
- },
- stateDiagram: {
- db: stateDb,
- renderer: stateRendererV2,
- parser: stateParser,
- init: (cnf) => {
- if (!cnf.state) {
- cnf.state = {};
- }
- cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
- stateDb.clear();
- },
- styles: stateStyles,
- },
- journey: {
- db: journeyDb,
- renderer: journeyRenderer,
- parser: journeyParser,
- init: (cnf) => {
- journeyRenderer.setConf(cnf.journey);
- journeyDb.clear();
- },
- styles: journeyStyles,
- },
-};
+const diagrams: Record = {};
export const registerDiagram = (
id: string,
diff --git a/src/diagrams/c4/c4Detector.ts b/src/diagrams/c4/c4Detector.ts
new file mode 100644
index 000000000..2be62bff1
--- /dev/null
+++ b/src/diagrams/c4/c4Detector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const c4Detector: DiagramDetector = (txt) => {
+ return txt.match(/^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/) !== null;
+};
diff --git a/src/diagrams/class/classDetector-V2.ts b/src/diagrams/class/classDetector-V2.ts
new file mode 100644
index 000000000..a0e270100
--- /dev/null
+++ b/src/diagrams/class/classDetector-V2.ts
@@ -0,0 +1,9 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const classDetectorV2: DiagramDetector = (txt, config) => {
+ // If we have confgured to use dagre-wrapper then we should return true in this function for classDiagram code thus making it use the new class diagram
+ if (txt.match(/^\s*classDiagram/) !== null && config?.class?.defaultRenderer === 'dagre-wrapper')
+ return true;
+ // We have not opted to use the new renderer so we should return true if we detect a class diagram
+ return txt.match(/^\s*classDiagram-v2/) !== null;
+};
diff --git a/src/diagrams/class/classDetector.ts b/src/diagrams/class/classDetector.ts
new file mode 100644
index 000000000..19d8bd2f5
--- /dev/null
+++ b/src/diagrams/class/classDetector.ts
@@ -0,0 +1,8 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const classDetector: DiagramDetector = (txt, config) => {
+ // If we have confgured to use dagre-wrapper then we should never return true in this function
+ if (config?.class?.defaultRenderer === 'dagre-wrapper') return false;
+ // We have not opted to use the new renderer so we should return true if we detect a class diagram
+ return txt.match(/^\s*classDiagram/) !== null;
+};
diff --git a/src/diagrams/er/erDetector.ts b/src/diagrams/er/erDetector.ts
new file mode 100644
index 000000000..a17eafb81
--- /dev/null
+++ b/src/diagrams/er/erDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const erDetector: DiagramDetector = (txt) => {
+ return txt.match(/^\s*erDiagram/) !== null;
+};
diff --git a/src/diagrams/flowchart/flowDetector-v2.ts b/src/diagrams/flowchart/flowDetector-v2.ts
new file mode 100644
index 000000000..f73748c79
--- /dev/null
+++ b/src/diagrams/flowchart/flowDetector-v2.ts
@@ -0,0 +1,8 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const flowDetectorV2: DiagramDetector = (txt, config) => {
+ // If we have confgured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram
+ if (config?.flowchart?.defaultRenderer === 'dagre-wrapper' && txt.match(/^\s*graph/) !== null)
+ return true;
+ return txt.match(/^\s*flowchart/) !== null;
+};
diff --git a/src/diagrams/flowchart/flowDetector.ts b/src/diagrams/flowchart/flowDetector.ts
new file mode 100644
index 000000000..edc9096c0
--- /dev/null
+++ b/src/diagrams/flowchart/flowDetector.ts
@@ -0,0 +1,8 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const flowDetector: DiagramDetector = (txt, config) => {
+ // If we have confired to only use new flow charts this function shohuld always return false
+ // as in not signalling true for a legacy flowchart
+ if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') return false;
+ return txt.match(/^\s*graph/) !== null;
+};
diff --git a/src/diagrams/gantt/ganttDetector.ts b/src/diagrams/gantt/ganttDetector.ts
new file mode 100644
index 000000000..926792dcf
--- /dev/null
+++ b/src/diagrams/gantt/ganttDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const ganttDetector: DiagramDetector = (txt) => {
+ return txt.match(/^\s*gantt/) !== null;
+};
diff --git a/src/diagrams/info/infoDetector.ts b/src/diagrams/info/infoDetector.ts
new file mode 100644
index 000000000..68f2ac794
--- /dev/null
+++ b/src/diagrams/info/infoDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const infoDetector: DiagramDetector = (txt) => {
+ return txt.match(/^\s*info/) !== null;
+};
diff --git a/src/diagrams/pie/pieDetector.ts b/src/diagrams/pie/pieDetector.ts
new file mode 100644
index 000000000..1e122b0e0
--- /dev/null
+++ b/src/diagrams/pie/pieDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const pieDetector: DiagramDetector = (txt) => {
+ return txt.match(/^\s*pie/) !== null;
+};
diff --git a/src/diagrams/requirement/requirementDetector.ts b/src/diagrams/requirement/requirementDetector.ts
new file mode 100644
index 000000000..2e1aa93ae
--- /dev/null
+++ b/src/diagrams/requirement/requirementDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const requirementDetector: DiagramDetector = (txt) => {
+ return txt.match(/^\s*requirement(Diagram)?/) !== null;
+};
diff --git a/src/diagrams/sequence/sequenceDetector.ts b/src/diagrams/sequence/sequenceDetector.ts
new file mode 100644
index 000000000..e68433255
--- /dev/null
+++ b/src/diagrams/sequence/sequenceDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const sequenceDetector: DiagramDetector = (txt) => {
+ return txt.match(/^\s*sequenceDiagram/) !== null;
+};
diff --git a/src/diagrams/state/stateDetector-V2.ts b/src/diagrams/state/stateDetector-V2.ts
new file mode 100644
index 000000000..8082a47bd
--- /dev/null
+++ b/src/diagrams/state/stateDetector-V2.ts
@@ -0,0 +1,8 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const stateDetectorV2: DiagramDetector = (text, config) => {
+ if (text.match(/^\s*stateDiagram-v2/) !== null) return true;
+ if (text.match(/^\s*stateDiagram/) && config?.state?.defaultRenderer === 'dagre-wrapper')
+ return true;
+ return false;
+};
diff --git a/src/diagrams/state/stateDetector.ts b/src/diagrams/state/stateDetector.ts
new file mode 100644
index 000000000..79dd6586b
--- /dev/null
+++ b/src/diagrams/state/stateDetector.ts
@@ -0,0 +1,8 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const stateDetector: DiagramDetector = (txt, config) => {
+ // If we have confired to only use new state diagrams this function should always return false
+ // as in not signalling true for a legacy state diagram
+ if (config?.state?.defaultRenderer === 'dagre-wrapper') return false;
+ return txt.match(/^\s*stateDiagram/) !== null;
+};
diff --git a/src/diagrams/user-journey/journeyDetector.ts b/src/diagrams/user-journey/journeyDetector.ts
new file mode 100644
index 000000000..77c8688ae
--- /dev/null
+++ b/src/diagrams/user-journey/journeyDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const journeyDetector: DiagramDetector = (txt) => {
+ return txt.match(/^\s*journey/) !== null;
+};
diff --git a/src/docs/Setup.md b/src/docs/Setup.md
index a9d8e87e2..41e706825 100644
--- a/src/docs/Setup.md
+++ b/src/docs/Setup.md
@@ -1405,6 +1405,15 @@ This sets the auto-wrap padding for the diagram (sides only)
**Notes:** Default value: 0.
+## parse
+
+### Parameters
+
+- `text` **[string][5]**
+- `parseError` **[Function][6]?**
+
+Returns **[boolean][7]**
+
## setSiteConfig
## setSiteConfig
@@ -1422,7 +1431,7 @@ function _Default value: At default, will mirror Global Config_
- `conf` **MermaidConfig** The base currentConfig to use as siteConfig
-Returns **[object][5]** The siteConfig
+Returns **[object][8]** The siteConfig
## getSiteConfig
@@ -1434,7 +1443,7 @@ Returns **[object][5]** The siteConfig
**Notes**: Returns **any** values in siteConfig.
-Returns **[object][5]** The siteConfig
+Returns **[object][8]** The siteConfig
## setConfig
@@ -1473,10 +1482,10 @@ $(function () {
### Parameters
-- `id` **[string][6]** The id of the element to be rendered
-- `text` **[string][6]** The graph definition
-- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void**
-- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
+- `id` **[string][5]** The id of the element to be rendered
+- `text` **[string][5]** The graph definition
+- `cb` **function (svgCode: [string][5], bindFunctions: function (element: [Element][9]): void): void**
+- `container` **[Element][9]** Selector to element in which a div with the graph temporarily will be
inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
element will be removed when rendering is completed.
@@ -1515,7 +1524,7 @@ Pushes in a directive to the configuration
### Parameters
-- `directive` **[object][5]** The directive to push in
+- `directive` **[object][8]** The directive to push in
## reset
@@ -1613,6 +1622,8 @@ Returns **void**
[2]: Setup.md?id=render
[3]: 8.6.0_docs.md
[4]: #mermaidapi-configuration-defaults
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-[7]: https://developer.mozilla.org/docs/Web/API/Element
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[9]: https://developer.mozilla.org/docs/Web/API/Element