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>
</head>
<body>
<pre class="mermaid2" style="width: 50%">
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<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 class="mermaid" style="width: 50%">
mindmap
apa
bapa
</pre>
<pre class="mermaid2" style="width: 50%">
flowchart TD
@ -77,14 +63,14 @@ flowchart TD
end
</div>
<div class="mermaid" style="width: 50%;">
<div class="mermaid2" style="width: 50%;">
flowchart TD
id
</div>
<div class="mermaid2" style="width: 50%;">
<pre class="mermaid2" style="width: 50%;">
flowchart LR
a["<strong>Haiya</strong>"]===>b
</div>
</pre>
<div class="mermaid2" style="width: 50%;">
flowchart TD
A --> B
@ -122,7 +108,7 @@ graph TD
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
</pre>
<pre class="mermaid2" style="width: 100%">
<pre class="mermaid" style="width: 100%">
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description

6
docs/Setup.md
View File

@ -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

8
src/config.type.ts
View File

@ -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 {

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';
// @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
);
};

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

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

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

@ -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<string, DiagramDefinition> = {
init: (cnf) => {
c4Renderer.setConf(cnf.c4);
},
styles: c4Styles,
},
class: {
db: classDb,
@ -78,6 +94,7 @@ const diagrams: Record<string, DiagramDefinition> = {
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
classDb.clear();
},
styles: classStyles,
},
classDiagram: {
db: classDb,
@ -90,11 +107,13 @@ const diagrams: Record<string, DiagramDefinition> = {
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<string, DiagramDefinition> = {
flowDb.clear();
flowDb.setGen('gen-1');
},
styles: flowStyles,
},
'flowchart-v2': {
db: flowDb,
@ -123,26 +143,31 @@ const diagrams: Record<string, DiagramDefinition> = {
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<string, DiagramDefinition> = {
sequenceDb.setWrap(cnf.wrap);
sequenceRenderer.setConf(cnf.sequence);
},
styles: sequenceStyles,
},
state: {
db: stateDb,
@ -173,6 +199,7 @@ const diagrams: Record<string, DiagramDefinition> = {
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateDb.clear();
},
styles: stateStyles,
},
stateDiagram: {
db: stateDb,
@ -185,6 +212,7 @@ const diagrams: Record<string, DiagramDefinition> = {
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateDb.clear();
},
styles: stateStyles,
},
journey: {
db: journeyDb,
@ -194,6 +222,7 @@ const diagrams: Record<string, DiagramDefinition> = {
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;

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

@ -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++,

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) => {
return txt.match(/^\s*mindmap/) !== null;

5
src/mermaid.ts
View File

@ -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.

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;
};