diff --git a/cypress/downloads/downloads.html b/cypress/downloads/downloads.html
new file mode 100644
index 0000000000..af2a395ab3
Binary files /dev/null and b/cypress/downloads/downloads.html differ
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index 727cb67012..2d49d2fee8 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -43,24 +43,10 @@
-
-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;
- classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;;
-
- O0("Joe")
- class O0 aPID;
-
- O1("Person")
- class O1 crm;
- O0 -- has type -->O1["Person"]
-
- O2("aat:300411314")
- class O2 type;
- click O2 function "Sorry the newline html tags are not being processed correctly
So all of this appears on the
same line."
- O0 -- has type -->O2["Bug"]
- click O0 function "Lots of great info about Joe
Lots of great info about Joe
burt
fred";
+
+mindmap
+apa
+ bapa
flowchart TD
@@ -77,14 +63,14 @@
end
-
+
flowchart TD
id
-
+
flowchart LR
a["Haiya"]===>b
-
+
flowchart TD
A --> B
@@ -122,7 +108,7 @@
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
-
+
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
diff --git a/docs/Setup.md b/docs/Setup.md
index a9d8e87e20..bc02f194e4 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -64,12 +64,12 @@ Theme , the CSS style sheet
**Notes:**
-- Trace: 0
-- Debug: 1
-- Info: 2
-- Warn: 3
-- Error: 4
-- Fatal: 5 (default)
+- Trace: 0
+- Debug: 1
+- Info: 2
+- Warn: 3
+- Error: 4
+- Fatal: 5 (default)
## securityLevel
@@ -79,13 +79,13 @@ Theme , the CSS style sheet
**Notes**:
-- **strict**: (**default**) tags in text are encoded, click functionality is disabled
-- **loose**: tags in text are allowed, click functionality is enabled
-- **antiscript**: html tags in text are allowed, (only script element is removed), click
- functionality is enabled
-- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
- prevent any JavaScript from running in the context. This may hinder interactive functionality
- of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
+- **strict**: (**default**) tags in text are encoded, click functionality is disabled
+- **loose**: tags in text are allowed, click functionality is enabled
+- **antiscript**: html tags in text are allowed, (only script element is removed), click
+ functionality is enabled
+- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This
+ prevent any JavaScript from running in the context. This may hinder interactive functionality
+ of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
## startOnLoad
@@ -1420,7 +1420,7 @@ function _Default value: At default, will mirror Global Config_
### Parameters
-- `conf` **MermaidConfig** The base currentConfig to use as siteConfig
+- `conf` **MermaidConfig** The base currentConfig to use as siteConfig
Returns **[object][5]** The siteConfig
@@ -1450,7 +1450,7 @@ corresponding siteConfig value.
### Parameters
-- `conf` **any** The potential currentConfig
+- `conf` **any** The potential currentConfig
Returns **any** The currentConfig merged with the sanitized conf
@@ -1473,14 +1473,14 @@ $(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
- 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.
+- `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
+ 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.
-Returns **void**
+Returns **void**
## getConfig
@@ -1507,7 +1507,7 @@ options in-place
### Parameters
-- `options` **any** The potential setConfig parameter
+- `options` **any** The potential setConfig parameter
## addDirective
@@ -1515,7 +1515,7 @@ Pushes in a directive to the configuration
### Parameters
-- `directive` **[object][5]** The directive to push in
+- `directive` **[object][5]** The directive to push in
## reset
@@ -1535,17 +1535,17 @@ Pushes in a directive to the configuration
### Parameters
-- `config` (optional, default `siteConfig`)
+- `config` (optional, default `siteConfig`)
-Returns **void**
+Returns **void**
## initialize
### Parameters
-- `options` **MermaidConfig**
+- `options` **MermaidConfig**
-##
+##
## mermaidAPI configuration defaults
@@ -1610,9 +1610,15 @@ Returns **void**
```
[1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js
+
[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
diff --git a/src/config.type.ts b/src/config.type.ts
index 40b2b0b5a5..d35f7288d4 100644
--- a/src/config.type.ts
+++ b/src/config.type.ts
@@ -27,10 +27,12 @@ export interface MermaidConfig {
er?: ErDiagramConfig;
pie?: PieDiagramConfig;
requirement?: RequirementDiagramConfig;
+ mindmap?: MindmapDiagramConfig;
gitGraph?: GitGraphDiagramConfig;
c4?: C4DiagramConfig;
dompurifyConfig?: DOMPurify.Config;
wrap?: boolean;
+ fontSize?: number;
}
// TODO: More configs needs to be moved in here
@@ -211,7 +213,11 @@ export interface RequirementDiagramConfig extends BaseDiagramConfig {
rect_padding?: number;
line_height?: number;
}
-
+export interface MindmapDiagramConfig extends BaseDiagramConfig {
+ useMaxWidth: boolean;
+ padding: number;
+ maxNodeWidth: number;
+}
export interface PieDiagramConfig extends BaseDiagramConfig {}
export interface ErDiagramConfig extends BaseDiagramConfig {
diff --git a/src/diagram-api/diagram-orchestration.ts b/src/diagram-api/diagram-orchestration.ts
index 6a57001873..b0df42cd77 100644
--- a/src/diagram-api/diagram-orchestration.ts
+++ b/src/diagram-api/diagram-orchestration.ts
@@ -3,7 +3,7 @@ import mindmapDb from '../diagrams/mindmap/mindmapDb';
import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
// @ts-ignore
import mindmapParser from '../diagrams/mindmap/parser/mindmap';
-import mindmapDetector from '../diagrams/mindmap/mindmapDetector';
+import { mindmapDetector } from '../diagrams/mindmap/mindmapDetector';
import mindmapStyles from '../diagrams/mindmap/styles';
import gitGraphDb from '../diagrams/git/gitGraphAst';
@@ -23,6 +23,6 @@ export const addDiagrams = () => {
registerDiagram(
'mindmap',
{ parser: mindmapParser, db: mindmapDb, renderer: mindmapRenderer, styles: mindmapStyles },
- gitGraphDetector
+ mindmapDetector
);
};
diff --git a/src/diagram-api/diagramAPI.spec.ts b/src/diagram-api/diagramAPI.spec.ts
index 42c09099a2..f72384c114 100644
--- a/src/diagram-api/diagramAPI.spec.ts
+++ b/src/diagram-api/diagramAPI.spec.ts
@@ -19,6 +19,7 @@ describe('DiagramAPI', () => {
db: {},
parser: {},
renderer: {},
+ styles: {},
},
(text: string) => text.includes('loki')
);
diff --git a/src/diagram-api/diagramAPI.ts b/src/diagram-api/diagramAPI.ts
index 19d9ef689b..ee8618671a 100644
--- a/src/diagram-api/diagramAPI.ts
+++ b/src/diagram-api/diagramAPI.ts
@@ -1,55 +1,70 @@
import c4Db from '../diagrams/c4/c4Db';
import c4Renderer from '../diagrams/c4/c4Renderer';
+import c4Styles from '../diagrams/c4/styles';
// @ts-ignore
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
import classParser from '../diagrams/class/parser/classDiagram';
import erDb from '../diagrams/er/erDb';
import erRenderer from '../diagrams/er/erRenderer';
// @ts-ignore
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
import flowParser from '../diagrams/flowchart/parser/flow';
import ganttDb from '../diagrams/gantt/ganttDb';
import ganttRenderer from '../diagrams/gantt/ganttRenderer';
// @ts-ignore
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
import infoParser from '../diagrams/info/parser/info';
+import infoStyles from '../diagrams/info/styles';
// @ts-ignore
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
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
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
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
import journeyParser from '../diagrams/user-journey/parser/journey';
import { addDetector, DiagramDetector } from './detectType';
-import { log } from '../logger';
+import { log as _log } from '../logger';
+import { getConfig as _getConfig } from '../config';
+import { sanitizeText as _sanitizeText } from '../diagrams/common/common';
import { MermaidConfig } from '../config.type';
import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
import { addStylesForDiagram } from '../styles';
+
export interface DiagramDefinition {
db: any;
renderer: any;
@@ -66,6 +81,7 @@ const diagrams: Record = {
init: (cnf) => {
c4Renderer.setConf(cnf.c4);
},
+ styles: c4Styles,
},
class: {
db: classDb,
@@ -78,6 +94,7 @@ const diagrams: Record = {
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
classDb.clear();
},
+ styles: classStyles,
},
classDiagram: {
db: classDb,
@@ -90,11 +107,13 @@ const diagrams: Record = {
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
classDb.clear();
},
+ styles: classStyles,
},
er: {
db: erDb,
renderer: erRenderer,
parser: erParser,
+ styles: erStyles,
},
flowchart: {
db: flowDb,
@@ -109,6 +128,7 @@ const diagrams: Record = {
flowDb.clear();
flowDb.setGen('gen-1');
},
+ styles: flowStyles,
},
'flowchart-v2': {
db: flowDb,
@@ -123,26 +143,31 @@ const diagrams: Record = {
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,
@@ -161,6 +186,7 @@ const diagrams: Record = {
sequenceDb.setWrap(cnf.wrap);
sequenceRenderer.setConf(cnf.sequence);
},
+ styles: sequenceStyles,
},
state: {
db: stateDb,
@@ -173,6 +199,7 @@ const diagrams: Record = {
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateDb.clear();
},
+ styles: stateStyles,
},
stateDiagram: {
db: stateDb,
@@ -185,6 +212,7 @@ const diagrams: Record = {
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateDb.clear();
},
+ styles: stateStyles,
},
journey: {
db: journeyDb,
@@ -194,6 +222,7 @@ const diagrams: Record = {
journeyRenderer.setConf(cnf.journey);
journeyDb.clear();
},
+ styles: journeyStyles,
},
};
@@ -217,4 +246,7 @@ export const getDiagram = (name: string): DiagramDefinition => {
throw new Error(`Diagram ${name} not found.`);
};
+export const log = _log;
+export const getConfig = _getConfig;
+export const sanitizeText = (text:string) => _sanitizeText(text, getConfig());
export const setupGraphViewbox = _setupGraphViewbox;
diff --git a/src/diagrams/mindmap/mindmapDb.js b/src/diagrams/mindmap/mindmapDb.js
index 4137360b61..1d52e0aaf6 100644
--- a/src/diagrams/mindmap/mindmapDb.js
+++ b/src/diagrams/mindmap/mindmapDb.js
@@ -1,5 +1,6 @@
/** Created by knut on 15-01-14. */
-import { log, sanitizeText, getConfig } from '../../diagram-api/diagramAPI';
+import { sanitizeText, getConfig } from '../../diagram-api/diagramAPI';
+import { log } from '../../logger';
var message = '';
var info = false;
@@ -27,6 +28,7 @@ export const getMindmap = () => {
return nodes.length > 0 ? nodes[0] : null;
};
export const addNode = (level, id, descr, type) => {
+ console.info('addNode', level, id, descr, type);
const conf = getConfig();
const node = {
id: cnt++,
diff --git a/src/diagrams/mindmap/mindmapDetector.js b/src/diagrams/mindmap/mindmapDetector.old
similarity index 100%
rename from src/diagrams/mindmap/mindmapDetector.js
rename to src/diagrams/mindmap/mindmapDetector.old
diff --git a/src/diagrams/mindmap/mindamapDetector.ts b/src/diagrams/mindmap/mindmapDetector.ts
similarity index 60%
rename from src/diagrams/mindmap/mindamapDetector.ts
rename to src/diagrams/mindmap/mindmapDetector.ts
index 42d6309eed..8b45f36817 100644
--- a/src/diagrams/mindmap/mindamapDetector.ts
+++ b/src/diagrams/mindmap/mindmapDetector.ts
@@ -1,4 +1,4 @@
-import { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/detectType';
export const mindmapDetector: DiagramDetector = (txt) => {
return txt.match(/^\s*mindmap/) !== null;
diff --git a/src/mermaid.ts b/src/mermaid.ts
index e825971521..96b8b9c1a9 100644
--- a/src/mermaid.ts
+++ b/src/mermaid.ts
@@ -30,6 +30,9 @@ import { isDetailedError } from './utils';
* ```
*
* Renders the mermaid diagrams
+ * @param config
+ * @param nodes
+ * @param callback
*/
const init = function (
config?: MermaidConfig,
@@ -39,6 +42,7 @@ const init = function (
try {
initThrowsErrors(config, nodes, callback);
} catch (e) {
+ console.error('Syntax Error rendering');
log.warn('Syntax Error rendering');
if (isDetailedError(e)) {
log.warn(e.str);
@@ -124,6 +128,7 @@ const initThrowsErrors = function (
element
);
} catch (error) {
+ console.error('Catching Error (bootstrap)', error);
log.warn('Catching Error (bootstrap)');
// @ts-ignore
// TODO: We should be throwing an error object.
diff --git a/src/styles.ts b/src/styles.ts
index e322d1c792..c1b534cf24 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -103,7 +103,8 @@ const getStyles = (
`;
};
-export const addStylesForDiagram = (type, diagramTheme) => {
+export const addStylesForDiagram = (type: any, diagramTheme: any) => {
+ // @ts-ignore
themes[type] = diagramTheme;
};