marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-14 17:54:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Syntax for markdown strings is a single backtick.

Browse Source
This commit is contained in:
Knut Sveidqvist
2023-04-03 10:43:15 +02:00
parent 507a518a91
commit 99f65813a1
8 changed files with 73 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
cypress/platform/knsv2.html
View File

@@ -58,10 +58,30 @@
</head> </head>
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
flowchart LR
A:::someclass --> B[`The **cat** in the hat`]:::someclass
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef someclass fill:#f96
</pre
>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
%%
flowchart LR
A:::someclass --> B[`The **cat** in the hat`]:::someclass
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
classDef someclass fill:#f96
</pre
>
<pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
%% %%
graph LR graph LR
a{"`The **cat** in the hat`"} -- 1o --> b a{`The **cat** in the hat`} -- 1o --> b
a -- 2o --> c a -- 2o --> c
a -- 3o --> d a -- 3o --> d
g --2i--> a g --2i--> a
@@ -74,30 +94,30 @@ graph LR
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart LR flowchart LR
b("`The dog in **the** hog.(1) b(`The dog in **the** hog.(1)
NL`") --"`1o **bold**`"--> c NL`) --`1o **bold**`--> c
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
flowchart-elk LR flowchart-elk LR
b("`The dog in **the** hog.(1) b(`The dog in **the** hog.(1)
NL`") --"`1o **bold**`"--> c NL`) --`1o **bold**`--> c
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
flowchart-elk LR flowchart-elk LR
b("`The dog in **the** hog.(1).. a a a a *very long text* about it b(`The dog in **the** hog.(1).. a a a a *very long text* about it
Word! Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `") --> c Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `) --> c
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"htmlLabels": true}} }%% %%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart-elk LR flowchart-elk LR
b("`The dog in **the** hog(2)... a a a a *very long text* about it b(`The dog in **the** hog(2)... a a a a *very long text* about it
Word! Word!
Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `") Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `)
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
@@ -113,34 +133,34 @@ b("The dog in the hog... a very<br/>long text about it<br/>Word!")
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
flowchart-elk LR flowchart-elk LR
subgraph "One" subgraph "One"
a("`The **cat** a(`The **cat**
in the hat`") -- "1o" --> b{{"`The **dog** in the hog`"}} in the hat`) -- "1o" --> b{{`The **dog** in the hog`}}
end end
subgraph "`**Two**`" subgraph `**Two**`
c("`The **cat** c(`The **cat**
in the hat`") -- "`1o **ipa**`" --> d("The dog in the hog") in the hat`) -- `1o **ipa**` --> d("The dog in the hog")
end end
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
mindmap mindmap
id1["`**Start2** id1[`**Start2**
second line 😎 with long text that is wrapping to the next line`"] second line 😎 with long text that is wrapping to the next line`]
id2["`Child **with bold** text`"] id2[`Child **with bold** text`]
id3["`Children of which some id3[`Children of which some
is using *italic type of* text`"] is using *italic type of* text`]
id4[Child] id4[Child]
id5["`Child id5[`Child
Row Row
and another and another
`"] `]
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
mindmap mindmap
id1["`**Start** with id1[`**Start** with
a second line 😎`"] a second line 😎`]
id2["`The dog in **the** hog... a *very long text* about it id2[`The dog in **the** hog... a *very long text* about it
Word!`"] Word!`]
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

2
docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
View File

@@ -16,4 +16,4 @@
#### Defined in #### Defined in
[mermaidAPI.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L70) [mermaidAPI.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L77)

4
docs/config/setup/interfaces/mermaidAPI.RenderResult.md
View File

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
#### Defined in #### Defined in
[mermaidAPI.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L91) [mermaidAPI.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L98)
--- ---
@@ -51,4 +51,4 @@ The svg code for the rendered graph.
#### Defined in #### Defined in
[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81) [mermaidAPI.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L88)

22
docs/config/setup/modules/mermaidAPI.md
View File

@@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
#### Defined in #### Defined in
[mermaidAPI.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L75) [mermaidAPI.ts:82](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L82)
## Variables ## Variables
@@ -95,7 +95,7 @@ mermaid.initialize(config);
#### Defined in #### Defined in
[mermaidAPI.ts:662](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L662) [mermaidAPI.ts:669](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L669)
## Functions ## Functions
@@ -126,7 +126,7 @@ Return the last node appended
#### Defined in #### Defined in
[mermaidAPI.ts:305](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L305) [mermaidAPI.ts:312](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L312)
--- ---
@@ -152,7 +152,7 @@ the cleaned up svgCode
#### Defined in #### Defined in
[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256) [mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263)
--- ---
@@ -178,7 +178,7 @@ the string with all the user styles
#### Defined in #### Defined in
[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185) [mermaidAPI.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L192)
--- ---
@@ -201,7 +201,7 @@ the string with all the user styles
#### Defined in #### Defined in
[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233) [mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)
--- ---
@@ -228,7 +228,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in #### Defined in
[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169) [mermaidAPI.ts:176](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L176)
--- ---
@@ -248,7 +248,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in #### Defined in
[mermaidAPI.ts:149](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L149) [mermaidAPI.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L156)
--- ---
@@ -268,7 +268,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in #### Defined in
[mermaidAPI.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L120) [mermaidAPI.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L127)
--- ---
@@ -294,7 +294,7 @@ Put the svgCode into an iFrame. Return the iFrame code
#### Defined in #### Defined in
[mermaidAPI.ts:284](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L284) [mermaidAPI.ts:291](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L291)
--- ---
@@ -319,4 +319,4 @@ Remove any existing elements from the given document
#### Defined in #### Defined in
[mermaidAPI.ts:355](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L355) [mermaidAPI.ts:362](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L362)

1
packages/mermaid/src/dagre-wrapper/nodes.js
View File

@@ -997,7 +997,6 @@ export const insertNode = (elem, node, dir) => {
el.attr('class', 'node default ' + node.class); el.attr('class', 'node default ' + node.class);
} }
/* MC: 7e790808-9c49-4f74-93de-15c22872377f */
nodeElems[node.id] = newEl; nodeElems[node.id] = newEl;
if (node.haveCallback) { if (node.haveCallback) {

6
packages/mermaid/src/diagrams/flowchart/parser/flow.jison
View File

@@ -38,9 +38,9 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
<acc_descr_multiline>[\}] { this.popState(); } <acc_descr_multiline>[\}] { this.popState(); }
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value"; <acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
// <acc_descr_multiline>.*[^\n]* { return "acc_descr_line"} // <acc_descr_multiline>.*[^\n]* { return "acc_descr_line"}
["][`] { this.begin("md_string");} [`] { this.begin("md_string");}
<md_string>[^`"]+ { return "MD_STR";} <md_string>[^`]+ { return "MD_STR";}
<md_string>[`]["] { this.popState();} <md_string>[`] { this.popState();}
["] this.begin("string"); ["] this.begin("string");
<string>["] this.popState(); <string>["] this.popState();
<string>[^"]* return "STR"; <string>[^"]* return "STR";

6
packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
View File

@@ -42,9 +42,9 @@
// !(-\() return 'NODE_ID'; // !(-\() return 'NODE_ID';
[^\(\[\n\-\)\{\}]+ return 'NODE_ID'; [^\(\[\n\-\)\{\}]+ return 'NODE_ID';
<<EOF>> return 'EOF'; <<EOF>> return 'EOF';
<NODE>["][`] { this.begin("NSTR2");} <NODE>[`] { this.begin("NSTR2");}
<NSTR2>[^`"]+ { return "NODE_DESCR";} <NSTR2>[^`]+ { return "NODE_DESCR";}
<NSTR2>[`]["] { this.popState();} <NSTR2>[`] { this.popState();}
<NODE>["] { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");} <NODE>["] { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");}
<NSTR>[^"]+ { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";} <NSTR>[^"]+ { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";}
<NSTR>["] {this.popState();} <NSTR>["] {this.popState();}

9
packages/mermaid/src/mermaidAPI.ts
View File

@@ -32,7 +32,14 @@ import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility'
import { parseDirective } from './directiveUtils'; import { parseDirective } from './directiveUtils';
// diagram names that support classDef statements // diagram names that support classDef statements
const CLASSDEF_DIAGRAMS = ['graph', 'flowchart', 'flowchart-v2', 'stateDiagram', 'stateDiagram-v2']; const CLASSDEF_DIAGRAMS = [
'graph',
'flowchart',
'flowchart-v2',
'flowchart-elk',
'stateDiagram',
'stateDiagram-v2',
];
const MAX_TEXTLENGTH = 50_000; const MAX_TEXTLENGTH = 50_000;
const MAX_TEXTLENGTH_EXCEEDED_MSG = const MAX_TEXTLENGTH_EXCEEDED_MSG =
'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa'; 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';