GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

#3336 Merged typescript changes

Browse Source
This commit is contained in:
Knut Sveidqvist 2022-09-05 14:04:39 +02:00
parent 01106caa59
commit 8b4a08eef4
12 changed files with 96 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
cypress/downloads/downloads.html Normal file
View File

Binary file not shown.

30
cypress/platform/knsv.html
View File

@ -43,24 +43,10 @@
</style> </style>
</head> </head>
<body> <body>
<pre class="mermaid2" style="width: 50%"> <pre class="mermaid" style="width: 50%">
flowchart LR mindmap
classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px; apa
classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px; bapa
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<br/> So all of this appears on the <br/> same line."
O0 -- has type -->O2["Bug"]
click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
</pre> </pre>
<pre class="mermaid2" style="width: 50%"> <pre class="mermaid2" style="width: 50%">
flowchart TD flowchart TD
@ -77,14 +63,14 @@ flowchart TD
end end
</div> </div>
<div class="mermaid" style="width: 50%;"> <div class="mermaid2" style="width: 50%;">
flowchart TD flowchart TD
id id
</div> </div>
<div class="mermaid2" style="width: 50%;"> <pre class="mermaid2" style="width: 50%;">
flowchart LR flowchart LR
a["<strong>Haiya</strong>"]===>b a["<strong>Haiya</strong>"]===>b
</div> </pre>
<div class="mermaid2" style="width: 50%;"> <div class="mermaid2" style="width: 50%;">
flowchart TD flowchart TD
A --> B A --> B
@ -122,7 +108,7 @@ graph TD
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red; linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
</pre> </pre>
<pre class="mermaid2" style="width: 100%"> <pre class="mermaid" style="width: 100%">
journey journey
accTitle: My User Journey Diagram accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description accDescr: My User Journey Diagram Description

62
docs/Setup.md
View File

@ -64,12 +64,12 @@ Theme , the CSS style sheet
**Notes:** **Notes:**
- Trace: 0 - Trace: 0
- Debug: 1 - Debug: 1
- Info: 2 - Info: 2
- Warn: 3 - Warn: 3
- Error: 4 - Error: 4
- Fatal: 5 (default) - Fatal: 5 (default)
## securityLevel ## securityLevel
@ -79,13 +79,13 @@ Theme , the CSS style sheet
**Notes**: **Notes**:
- **strict**: (**default**) tags in text are encoded, click functionality is disabled - **strict**: (**default**) tags in text are encoded, click functionality is disabled
- **loose**: tags in text are allowed, click functionality is enabled - **loose**: tags in text are allowed, click functionality is enabled
- **antiscript**: html tags in text are allowed, (only script element is removed), click - **antiscript**: html tags in text are allowed, (only script element is removed), click
functionality is enabled functionality is enabled
- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This - **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 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. of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
## startOnLoad ## startOnLoad
@ -1420,7 +1420,7 @@ function _Default value: At default, will mirror Global Config_
### Parameters ### Parameters
- `conf` **MermaidConfig** The base currentConfig to use as siteConfig - `conf` **MermaidConfig** The base currentConfig to use as siteConfig
Returns **[object][5]** The siteConfig Returns **[object][5]** The siteConfig
@ -1450,7 +1450,7 @@ corresponding siteConfig value.
### Parameters ### Parameters
- `conf` **any** The potential currentConfig - `conf` **any** The potential currentConfig
Returns **any** The currentConfig merged with the sanitized conf Returns **any** The currentConfig merged with the sanitized conf
@ -1473,14 +1473,14 @@ $(function () {
### Parameters ### Parameters
- `id` **[string][6]** The id of the element to be rendered - `id` **[string][6]** The id of the element to be rendered
- `text` **[string][6]** The graph definition - `text` **[string][6]** The graph definition
- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void** - `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 - `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 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. element will be removed when rendering is completed.
Returns **void** Returns **void**
## getConfig ## getConfig
@ -1507,7 +1507,7 @@ options in-place
### Parameters ### Parameters
- `options` **any** The potential setConfig parameter - `options` **any** The potential setConfig parameter
## addDirective ## addDirective
@ -1515,7 +1515,7 @@ Pushes in a directive to the configuration
### Parameters ### Parameters
- `directive` **[object][5]** The directive to push in - `directive` **[object][5]** The directive to push in
## reset ## reset
@ -1535,17 +1535,17 @@ Pushes in a directive to the configuration
### Parameters ### Parameters
- `config` (optional, default `siteConfig`) - `config` (optional, default `siteConfig`)
Returns **void** Returns **void**
## initialize ## initialize
### Parameters ### Parameters
- `options` **MermaidConfig** - `options` **MermaidConfig**
## ##
## mermaidAPI configuration defaults ## mermaidAPI configuration defaults
@ -1610,9 +1610,15 @@ Returns **void**
``` ```
[1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js [1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js
[2]: Setup.md?id=render [2]: Setup.md?id=render
[3]: 8.6.0_docs.md [3]: 8.6.0_docs.md
[4]: #mermaidapi-configuration-defaults [4]: #mermaidapi-configuration-defaults
[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[7]: https://developer.mozilla.org/docs/Web/API/Element [7]: https://developer.mozilla.org/docs/Web/API/Element

8
src/config.type.ts
View File

@ -27,10 +27,12 @@ export interface MermaidConfig {
er?: ErDiagramConfig; er?: ErDiagramConfig;
pie?: PieDiagramConfig; pie?: PieDiagramConfig;
requirement?: RequirementDiagramConfig; requirement?: RequirementDiagramConfig;
mindmap?: MindmapDiagramConfig;
gitGraph?: GitGraphDiagramConfig; gitGraph?: GitGraphDiagramConfig;
c4?: C4DiagramConfig; c4?: C4DiagramConfig;
dompurifyConfig?: DOMPurify.Config; dompurifyConfig?: DOMPurify.Config;
wrap?: boolean; wrap?: boolean;
fontSize?: number;
} }
// TODO: More configs needs to be moved in here // TODO: More configs needs to be moved in here
@ -211,7 +213,11 @@ export interface RequirementDiagramConfig extends BaseDiagramConfig {
rect_padding?: number; rect_padding?: number;
line_height?: number; line_height?: number;
} }
export interface MindmapDiagramConfig extends BaseDiagramConfig {
useMaxWidth: boolean;
padding: number;
maxNodeWidth: number;
}
export interface PieDiagramConfig extends BaseDiagramConfig {} export interface PieDiagramConfig extends BaseDiagramConfig {}
export interface ErDiagramConfig extends BaseDiagramConfig { export interface ErDiagramConfig extends BaseDiagramConfig {

4
src/diagram-api/diagram-orchestration.ts
View File

@ -3,7 +3,7 @@ import mindmapDb from '../diagrams/mindmap/mindmapDb';
import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer'; import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
// @ts-ignore // @ts-ignore
import mindmapParser from '../diagrams/mindmap/parser/mindmap'; 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 mindmapStyles from '../diagrams/mindmap/styles';
import gitGraphDb from '../diagrams/git/gitGraphAst'; import gitGraphDb from '../diagrams/git/gitGraphAst';
@ -23,6 +23,6 @@ export const addDiagrams = () => {
registerDiagram( registerDiagram(
'mindmap', 'mindmap',
{ parser: mindmapParser, db: mindmapDb, renderer: mindmapRenderer, styles: mindmapStyles }, { parser: mindmapParser, db: mindmapDb, renderer: mindmapRenderer, styles: mindmapStyles },
gitGraphDetector mindmapDetector
); );
}; };

1
src/diagram-api/diagramAPI.spec.ts
View File

@ -19,6 +19,7 @@ describe('DiagramAPI', () => {
db: {}, db: {},
parser: {}, parser: {},
renderer: {}, renderer: {},
styles: {},
}, },
(text: string) => text.includes('loki') (text: string) => text.includes('loki')
); );

34
src/diagram-api/diagramAPI.ts
View File

@ -1,55 +1,70 @@
import c4Db from '../diagrams/c4/c4Db'; import c4Db from '../diagrams/c4/c4Db';
import c4Renderer from '../diagrams/c4/c4Renderer'; import c4Renderer from '../diagrams/c4/c4Renderer';
import c4Styles from '../diagrams/c4/styles';
// @ts-ignore // @ts-ignore
import c4Parser from '../diagrams/c4/parser/c4Diagram'; import c4Parser from '../diagrams/c4/parser/c4Diagram';
import classDb from '../diagrams/class/classDb'; import classDb from '../diagrams/class/classDb';
import classRenderer from '../diagrams/class/classRenderer'; import classRenderer from '../diagrams/class/classRenderer';
import classRendererV2 from '../diagrams/class/classRenderer-v2'; import classRendererV2 from '../diagrams/class/classRenderer-v2';
import classStyles from '../diagrams/class/styles';
// @ts-ignore // @ts-ignore
import classParser from '../diagrams/class/parser/classDiagram'; import classParser from '../diagrams/class/parser/classDiagram';
import erDb from '../diagrams/er/erDb'; import erDb from '../diagrams/er/erDb';
import erRenderer from '../diagrams/er/erRenderer'; import erRenderer from '../diagrams/er/erRenderer';
// @ts-ignore // @ts-ignore
import erParser from '../diagrams/er/parser/erDiagram'; import erParser from '../diagrams/er/parser/erDiagram';
import erStyles from '../diagrams/er/styles';
import flowDb from '../diagrams/flowchart/flowDb'; import flowDb from '../diagrams/flowchart/flowDb';
import flowRenderer from '../diagrams/flowchart/flowRenderer'; import flowRenderer from '../diagrams/flowchart/flowRenderer';
import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2'; import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';
import flowStyles from '../diagrams/flowchart/styles';
// @ts-ignore // @ts-ignore
import flowParser from '../diagrams/flowchart/parser/flow'; import flowParser from '../diagrams/flowchart/parser/flow';
import ganttDb from '../diagrams/gantt/ganttDb'; import ganttDb from '../diagrams/gantt/ganttDb';
import ganttRenderer from '../diagrams/gantt/ganttRenderer'; import ganttRenderer from '../diagrams/gantt/ganttRenderer';
// @ts-ignore // @ts-ignore
import ganttParser from '../diagrams/gantt/parser/gantt'; import ganttParser from '../diagrams/gantt/parser/gantt';
import ganttStyles from '../diagrams/gantt/styles';
import infoDb from '../diagrams/info/infoDb'; import infoDb from '../diagrams/info/infoDb';
import infoRenderer from '../diagrams/info/infoRenderer'; import infoRenderer from '../diagrams/info/infoRenderer';
// @ts-ignore // @ts-ignore
import infoParser from '../diagrams/info/parser/info'; import infoParser from '../diagrams/info/parser/info';
import infoStyles from '../diagrams/info/styles';
// @ts-ignore // @ts-ignore
import pieParser from '../diagrams/pie/parser/pie'; import pieParser from '../diagrams/pie/parser/pie';
import pieDb from '../diagrams/pie/pieDb'; import pieDb from '../diagrams/pie/pieDb';
import pieRenderer from '../diagrams/pie/pieRenderer'; import pieRenderer from '../diagrams/pie/pieRenderer';
import pieStyles from '../diagrams/pie/styles';
// @ts-ignore // @ts-ignore
import requirementParser from '../diagrams/requirement/parser/requirementDiagram'; import requirementParser from '../diagrams/requirement/parser/requirementDiagram';
import requirementDb from '../diagrams/requirement/requirementDb'; import requirementDb from '../diagrams/requirement/requirementDb';
import requirementRenderer from '../diagrams/requirement/requirementRenderer'; import requirementRenderer from '../diagrams/requirement/requirementRenderer';
import requirementStyles from '../diagrams/requirement/styles';
// @ts-ignore // @ts-ignore
import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram'; import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';
import sequenceDb from '../diagrams/sequence/sequenceDb'; import sequenceDb from '../diagrams/sequence/sequenceDb';
import sequenceRenderer from '../diagrams/sequence/sequenceRenderer'; import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
import sequenceStyles from '../diagrams/sequence/styles';
// @ts-ignore // @ts-ignore
import stateParser from '../diagrams/state/parser/stateDiagram'; import stateParser from '../diagrams/state/parser/stateDiagram';
import stateDb from '../diagrams/state/stateDb'; import stateDb from '../diagrams/state/stateDb';
import stateRenderer from '../diagrams/state/stateRenderer'; import stateRenderer from '../diagrams/state/stateRenderer';
import stateRendererV2 from '../diagrams/state/stateRenderer-v2'; import stateRendererV2 from '../diagrams/state/stateRenderer-v2';
import stateStyles from '../diagrams/state/styles';
import journeyDb from '../diagrams/user-journey/journeyDb'; import journeyDb from '../diagrams/user-journey/journeyDb';
import journeyRenderer from '../diagrams/user-journey/journeyRenderer'; import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
import journeyStyles from '../diagrams/user-journey/styles';
// @ts-ignore // @ts-ignore
import journeyParser from '../diagrams/user-journey/parser/journey'; import journeyParser from '../diagrams/user-journey/parser/journey';
import { addDetector, DiagramDetector } from './detectType'; 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 { MermaidConfig } from '../config.type';
import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox'; import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
import { addStylesForDiagram } from '../styles'; import { addStylesForDiagram } from '../styles';
export interface DiagramDefinition { export interface DiagramDefinition {
db: any; db: any;
renderer: any; renderer: any;
@ -66,6 +81,7 @@ const diagrams: Record<string, DiagramDefinition> = {
init: (cnf) => { init: (cnf) => {
c4Renderer.setConf(cnf.c4); c4Renderer.setConf(cnf.c4);
}, },
styles: c4Styles,
}, },
class: { class: {
db: classDb, db: classDb,
@ -78,6 +94,7 @@ const diagrams: Record<string, DiagramDefinition> = {
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
classDb.clear(); classDb.clear();
}, },
styles: classStyles,
}, },
classDiagram: { classDiagram: {
db: classDb, db: classDb,
@ -90,11 +107,13 @@ const diagrams: Record<string, DiagramDefinition> = {
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
classDb.clear(); classDb.clear();
}, },
styles: classStyles,
}, },
er: { er: {
db: erDb, db: erDb,
renderer: erRenderer, renderer: erRenderer,
parser: erParser, parser: erParser,
styles: erStyles,
}, },
flowchart: { flowchart: {
db: flowDb, db: flowDb,
@ -109,6 +128,7 @@ const diagrams: Record<string, DiagramDefinition> = {
flowDb.clear(); flowDb.clear();
flowDb.setGen('gen-1'); flowDb.setGen('gen-1');
}, },
styles: flowStyles,
}, },
'flowchart-v2': { 'flowchart-v2': {
db: flowDb, db: flowDb,
@ -123,26 +143,31 @@ const diagrams: Record<string, DiagramDefinition> = {
flowDb.clear(); flowDb.clear();
flowDb.setGen('gen-2'); flowDb.setGen('gen-2');
}, },
styles: flowStyles,
}, },
gantt: { gantt: {
db: ganttDb, db: ganttDb,
renderer: ganttRenderer, renderer: ganttRenderer,
parser: ganttParser, parser: ganttParser,
styles: ganttStyles,
}, },
info: { info: {
db: infoDb, db: infoDb,
renderer: infoRenderer, renderer: infoRenderer,
parser: infoParser, parser: infoParser,
styles: infoStyles,
}, },
pie: { pie: {
db: pieDb, db: pieDb,
renderer: pieRenderer, renderer: pieRenderer,
parser: pieParser, parser: pieParser,
styles: pieStyles,
}, },
requirement: { requirement: {
db: requirementDb, db: requirementDb,
renderer: requirementRenderer, renderer: requirementRenderer,
parser: requirementParser, parser: requirementParser,
styles: requirementStyles,
}, },
sequence: { sequence: {
db: sequenceDb, db: sequenceDb,
@ -161,6 +186,7 @@ const diagrams: Record<string, DiagramDefinition> = {
sequenceDb.setWrap(cnf.wrap); sequenceDb.setWrap(cnf.wrap);
sequenceRenderer.setConf(cnf.sequence); sequenceRenderer.setConf(cnf.sequence);
}, },
styles: sequenceStyles,
}, },
state: { state: {
db: stateDb, db: stateDb,
@ -173,6 +199,7 @@ const diagrams: Record<string, DiagramDefinition> = {
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateDb.clear(); stateDb.clear();
}, },
styles: stateStyles,
}, },
stateDiagram: { stateDiagram: {
db: stateDb, db: stateDb,
@ -185,6 +212,7 @@ const diagrams: Record<string, DiagramDefinition> = {
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateDb.clear(); stateDb.clear();
}, },
styles: stateStyles,
}, },
journey: { journey: {
db: journeyDb, db: journeyDb,
@ -194,6 +222,7 @@ const diagrams: Record<string, DiagramDefinition> = {
journeyRenderer.setConf(cnf.journey); journeyRenderer.setConf(cnf.journey);
journeyDb.clear(); journeyDb.clear();
}, },
styles: journeyStyles,
}, },
}; };
@ -217,4 +246,7 @@ export const getDiagram = (name: string): DiagramDefinition => {
throw new Error(`Diagram ${name} not found.`); 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; export const setupGraphViewbox = _setupGraphViewbox;

4
src/diagrams/mindmap/mindmapDb.js
View File

@ -1,5 +1,6 @@
/** Created by knut on 15-01-14. */ /** 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 message = '';
var info = false; var info = false;
@ -27,6 +28,7 @@ export const getMindmap = () => {
return nodes.length > 0 ? nodes[0] : null; return nodes.length > 0 ? nodes[0] : null;
}; };
export const addNode = (level, id, descr, type) => { export const addNode = (level, id, descr, type) => {
console.info('addNode', level, id, descr, type);
const conf = getConfig(); const conf = getConfig();
const node = { const node = {
id: cnt++, id: cnt++,

0
src/diagrams/mindmap/mindmapDetector.js → src/diagrams/mindmap/mindmapDetector.old
View File

2
src/diagrams/mindmap/mindamapDetector.ts → src/diagrams/mindmap/mindmapDetector.ts
View File

@ -1,4 +1,4 @@
import { DiagramDetector } from '../../diagram-api/detectType'; import type { DiagramDetector } from '../../diagram-api/detectType';
export const mindmapDetector: DiagramDetector = (txt) => { export const mindmapDetector: DiagramDetector = (txt) => {
return txt.match(/^\s*mindmap/) !== null; return txt.match(/^\s*mindmap/) !== null;

5
src/mermaid.ts
View File

@ -30,6 +30,9 @@ import { isDetailedError } from './utils';
* ``` * ```
* *
* Renders the mermaid diagrams * Renders the mermaid diagrams
* @param config
* @param nodes
* @param callback
*/ */
const init = function ( const init = function (
config?: MermaidConfig, config?: MermaidConfig,
@ -39,6 +42,7 @@ const init = function (
try { try {
initThrowsErrors(config, nodes, callback); initThrowsErrors(config, nodes, callback);
} catch (e) { } catch (e) {
console.error('Syntax Error rendering');
log.warn('Syntax Error rendering'); log.warn('Syntax Error rendering');
if (isDetailedError(e)) { if (isDetailedError(e)) {
log.warn(e.str); log.warn(e.str);
@ -124,6 +128,7 @@ const initThrowsErrors = function (
element element
); );
} catch (error) { } catch (error) {
console.error('Catching Error (bootstrap)', error);
log.warn('Catching Error (bootstrap)'); log.warn('Catching Error (bootstrap)');
// @ts-ignore // @ts-ignore
// TODO: We should be throwing an error object. // TODO: We should be throwing an error object.

3
src/styles.ts
View File

@ -103,7 +103,8 @@ const getStyles = (
`; `;
}; };
export const addStylesForDiagram = (type, diagramTheme) => { export const addStylesForDiagram = (type: any, diagramTheme: any) => {
// @ts-ignore
themes[type] = diagramTheme; themes[type] = diagramTheme;
}; };