marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-08 08:39:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' of https://github.com/knsv/mermaid into 1542_take_two

Browse Source
This commit is contained in:
Ashish Jain
2020-08-19 18:45:24 +02:00
parent 060ac3bb4a 51f0a3f42a
commit 455cd9c696
40 changed files with 1361 additions and 1125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
cypress/helpers/util.js
View File

@@ -19,7 +19,29 @@ export const mermaidUrl = (graphStr, options, api) => {
return url;
};
export const imgSnapshotTest = (graphStr, options, api) => {
export const imgSnapshotTest = (graphStr, _options, api) => {
const options = Object.assign(_options);
if (!options.fontFamily) {
options.fontFamily = 'courier';
}
if (!options.sequence) {
options.sequence = {};
}
if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
options.sequence.actorFontFamily = 'courier';
}
if (options.sequence && !options.sequence.noteFontFamily) {
options.sequence.noteFontFamily = 'courier';
}
options.sequence.actorFontFamily = 'courier';
options.sequence.noteFontFamily = 'courier';
options.sequence.messageFontFamily = 'courier';
if (options.sequence && !options.sequence.actorFontFamily) {
options.sequence.actorFontFamily = 'courier';
}
if (!options.fontSize) {
options.fontSize = '16px';
}
const url = mermaidUrl(graphStr, options, api);
cy.visit(url);

14
cypress/integration/rendering/debug.spec.js Normal file
View File

@@ -0,0 +1,14 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util';
describe('Flowchart', () => {
it('34: testing the label width in percy', () => {
imgSnapshotTest(
`graph TD
A[Christmas]
`,
{ theme: 'forest' , fontFamily: '"Noto Sans SC", sans-serif' }
);
});
});

18
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -46,4 +46,22 @@ describe('Flowchart v2', () => {
{ flowchart: { diagramPadding: 0 } }
);
});
it('Length of edges', () => {
imgSnapshotTest(
`flowchart TD
L1 --- L2
L2 --- C
M1 ---> C
R1 .-> R2
R2 <.-> C
C -->|Label 1| E1
C <-- Label 2 ---> E2
C ----> E3
C <-...-> E4
C ======> E5
`,
{ flowchart: { diagramPadding: 0 } }
);
});
});

77
cypress/integration/rendering/flowchart.spec.js
View File

@@ -11,7 +11,7 @@ describe('Flowchart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false }, fontFamily: 'courier' }
);
});
@@ -24,7 +24,7 @@ describe('Flowchart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ flowchart: { htmlLabels: true } }
{ flowchart: { htmlLabels: true }, fontFamily: 'courier' }
);
});
@@ -38,7 +38,7 @@ describe('Flowchart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[Car]
`,
{}
{fontFamily: 'courier'}
);
});
@@ -53,7 +53,7 @@ describe('Flowchart', () => {
C -->|Two| E[\\iPhone\\]
C -->|Three| F[Car]
`,
{}
{ fontFamily: 'courier'}
);
});
@@ -69,7 +69,7 @@ describe('Flowchart', () => {
classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
class 1A,1B,D,E processHead
`,
{}
{fontFamily: 'courier'}
);
});
@@ -98,7 +98,7 @@ describe('Flowchart', () => {
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
`,
{}
{ fontFamily: 'courier' }
);
});
@@ -169,7 +169,7 @@ describe('Flowchart', () => {
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
`,
{}
{ fontFamily: 'courier' }
);
});
@@ -178,7 +178,7 @@ describe('Flowchart', () => {
`
graph TB;subgraph "number as labels";1;end;
`,
{}
{ fontFamily: 'courier' }
);
});
@@ -190,7 +190,7 @@ describe('Flowchart', () => {
a1-->a2
end
`,
{}
{ fontFamily: 'courier' }
);
});
@@ -202,7 +202,7 @@ describe('Flowchart', () => {
a1-->a2
end
`,
{}
{ fontFamily: 'courier' }
);
});
@@ -237,7 +237,7 @@ describe('Flowchart', () => {
style foo fill:#F99,stroke-width:2px,stroke:#F0F
style bar fill:#999,stroke-width:10px,stroke:#0F0
`,
{}
{ fontFamily: 'courier' }
);
});
@@ -339,7 +339,7 @@ describe('Flowchart', () => {
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
`,
{}
{ fontFamily: 'courier' }
);
});
@@ -356,6 +356,7 @@ describe('Flowchart', () => {
{
listUrl: false,
listId: 'color styling',
fontFamily: 'courier',
logLevel: 0
}
);
@@ -378,7 +379,7 @@ describe('Flowchart', () => {
`,
{
listUrl: false,
listId: 'color styling',
listId: 'color styling', fontFamily: 'courier',
logLevel: 0
}
);
@@ -394,7 +395,7 @@ describe('Flowchart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -413,7 +414,7 @@ describe('Flowchart', () => {
class A someclass;
class C someclass;
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -430,7 +431,7 @@ describe('Flowchart', () => {
linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -439,7 +440,7 @@ describe('Flowchart', () => {
`graph LR
a --> b --> c
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -448,7 +449,7 @@ describe('Flowchart', () => {
`graph LR
a --> b & c--> d
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -458,7 +459,7 @@ describe('Flowchart', () => {
A[ h ] -- hello --> B[" test "]:::exClass & C --> D;
classDef exClass background:#bbb,border:1px solid red;
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -480,7 +481,7 @@ describe('Flowchart', () => {
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -494,7 +495,7 @@ describe('Flowchart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ flowchart: { nodeSpacing: 50 } }
{ flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
);
});
@@ -508,7 +509,7 @@ describe('Flowchart', () => {
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ flowchart: { rankSpacing: '100' } }
{ flowchart: { rankSpacing: '100' }, fontFamily: 'courier' }
);
});
@@ -521,7 +522,7 @@ describe('Flowchart', () => {
linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -543,7 +544,7 @@ describe('Flowchart', () => {
click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test"
`,
{ securityLevel: 'loose' }
{ securityLevel: 'loose', fontFamily: 'courier' }
);
});
@@ -583,7 +584,7 @@ describe('Flowchart', () => {
click B "index.html#link-clicked" "link test"
click D testClick "click test"
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -615,7 +616,7 @@ describe('Flowchart', () => {
class A myClass1
class D myClass2
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -639,7 +640,7 @@ describe('Flowchart', () => {
classDef redBg fill:#622;
classDef whiteTxt color: white;
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -651,7 +652,7 @@ describe('Flowchart', () => {
eat --> sleep
work --> eat
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -670,7 +671,7 @@ describe('Flowchart', () => {
class A someclass;
class C someclass;
`,
{ flowchart: { htmlLabels: false } }
{ flowchart: { htmlLabels: false } , fontFamily: 'courier'}
);
});
@@ -696,4 +697,22 @@ describe('Flowchart', () => {
{ }
);
});
it('35: should honor minimum edge length as specified by the user', () => {
imgSnapshotTest(
`graph TD
L1 --- L2
L2 --- C
M1 ---> C
R1 .-> R2
R2 <.-> C
C -->|Label 1| E1
C -- Label 2 ---> E2
C ----> E3
C -----> E4
C ======> E5
`,
{ }
);
});
});

4
cypress/integration/rendering/sequencediagram.spec.js
View File

@@ -29,7 +29,7 @@ context('Sequence diagram', () => {
Alice -->> John: Parallel message 2
end
`,
{}
{sequence:{actorFontFamily:'courier'}}
);
});
it('should handle different line breaks', () => {
@@ -92,7 +92,7 @@ context('Sequence diagram', () => {
Alice->>Bob: I'm short
Bob->>Alice: Short as well
`,
{ sequence: { actorFontSize: 18, actorFontFamily: 'Arial' } }
{ sequence: { actorFontSize: 18, actorFontFamily: 'times' } }
);
});
it('should render notes aligned to the left when configured', () => {

44
cypress/integration/rendering/stateDiagram-v2.spec.js
View File

@@ -7,7 +7,7 @@ describe('State diagram', () => {
`
info
`,
{ logLevel: 1 }
{ logLevel: 1, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -19,7 +19,7 @@ describe('State diagram', () => {
[*] --> State1
State1 --> [*]
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -31,7 +31,7 @@ describe('State diagram', () => {
[*] --> S1
state "Some long name" as S1
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -43,7 +43,7 @@ describe('State diagram', () => {
[*] --> S1
state "Some long name" as S1: The description
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -54,7 +54,7 @@ describe('State diagram', () => {
state "A long long name" as long1
state "A" as longlonglongid
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -68,7 +68,7 @@ describe('State diagram', () => {
S1 --> S3: long line using <br>should work
S1 --> S4: long line using \\nshould work
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -82,7 +82,7 @@ describe('State diagram', () => {
notes.
end note
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -96,7 +96,7 @@ describe('State diagram', () => {
notes with . and in them.
end note
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -112,7 +112,7 @@ describe('State diagram', () => {
State1 --> State2 : With +,-
note left of State2 : This is the note +,-<br/>
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -128,7 +128,7 @@ describe('State diagram', () => {
And another line...
end note
`,
{}
{ logLevel: 0, fontFamily: 'courier' }
);
});
it('v2 should handle multiline notes with different line breaks', () => {
@@ -140,7 +140,7 @@ describe('State diagram', () => {
Line1<br>Line2<br/>Line3<br />Line4<br />Line5
end note
`,
{}
{ logLevel: 0, fontFamily: 'courier' }
);
});
@@ -155,7 +155,7 @@ describe('State diagram', () => {
State1 --> State2
State2 --> [*]
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -168,7 +168,7 @@ describe('State diagram', () => {
State1 --> State3
State1 --> [*]
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -184,7 +184,7 @@ describe('State diagram', () => {
State2 --> State3 : Transition 5
State1 --> [*]
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -197,7 +197,7 @@ describe('State diagram', () => {
XState2 : New line
XState1 --> XState2
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -216,7 +216,7 @@ describe('State diagram', () => {
Configuring --> Idle : EvConfig EvConfig EvConfig EvConfig EvConfig
}
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -246,7 +246,7 @@ describe('State diagram', () => {
}
}
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
});
it('v2 should render forks in composit states', () => {
@@ -268,7 +268,7 @@ describe('State diagram', () => {
State4 --> [*]
}
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
});
it('v2 should render forks and joins', () => {
@@ -286,7 +286,7 @@ describe('State diagram', () => {
join_state --> State4
State4 --> [*]
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -310,7 +310,7 @@ describe('State diagram', () => {
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -338,7 +338,7 @@ describe('State diagram', () => {
}
`,
{
logLevel: 0,
logLevel: 0, fontFamily: 'courier'
}
);
});
@@ -350,7 +350,7 @@ describe('State diagram', () => {
a --> b: Stop
`,
{
logLevel: 0,
logLevel: 0, fontFamily: 'courier',
}
);
});

44
cypress/integration/rendering/stateDiagram.spec.js
View File

@@ -9,7 +9,7 @@ describe('State diagram', () => {
[*] --> State1
State1 --> [*]
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -21,7 +21,7 @@ describe('State diagram', () => {
[*] --> S1
state "Some long name" as S1
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -33,7 +33,7 @@ describe('State diagram', () => {
[*] --> S1
state "Some long name" as S1: The description
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -44,7 +44,7 @@ describe('State diagram', () => {
state "A long long name" as long1
state "A" as longlonglongid
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -58,7 +58,7 @@ describe('State diagram', () => {
S1 --> S3: long line using <br>should work
S1 --> S4: long line using \\nshould work
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -72,7 +72,7 @@ describe('State diagram', () => {
notes.
end note
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -86,7 +86,7 @@ describe('State diagram', () => {
notes with . and in them.
end note
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -102,7 +102,7 @@ describe('State diagram', () => {
State1 --> State2 : With +,-
note left of State2 : This is the note +,-<br/>
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -118,7 +118,7 @@ describe('State diagram', () => {
And another line...
end note
`,
{}
{ logLevel: 0, fontFamily: 'courier' }
);
});
it('should handle multiline notes with different line breaks', () => {
@@ -130,7 +130,7 @@ describe('State diagram', () => {
Line1<br>Line2<br/>Line3<br />Line4<br />Line5
end note
`,
{}
{ logLevel: 0, fontFamily: 'courier' }
);
});
@@ -145,7 +145,7 @@ describe('State diagram', () => {
State1 --> State2
State2 --> [*]
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -158,7 +158,7 @@ describe('State diagram', () => {
State1 --> State3
State1 --> [*]
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -174,7 +174,7 @@ describe('State diagram', () => {
State2 --> State3 : Transition 5
State1 --> [*]
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -187,7 +187,7 @@ describe('State diagram', () => {
XState2 : New line
XState1 --> XState2
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -206,7 +206,7 @@ describe('State diagram', () => {
Configuring --> Idle : EvConfig EvConfig EvConfig EvConfig EvConfig
}
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -236,7 +236,7 @@ describe('State diagram', () => {
}
}
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
});
it('should render forks in composit states', () => {
@@ -258,7 +258,7 @@ describe('State diagram', () => {
State4 --> [*]
}
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
});
it('should render forks and joins', () => {
@@ -276,7 +276,7 @@ describe('State diagram', () => {
join_state --> State4
State4 --> [*]
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -300,7 +300,7 @@ describe('State diagram', () => {
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
`,
{ logLevel: 0 }
{ logLevel: 0, fontFamily: 'courier' }
);
cy.get('svg');
});
@@ -315,7 +315,7 @@ describe('State diagram', () => {
}
`,
{
logLevel: 0,
logLevel: 0, fontFamily: 'courier'
}
);
});
@@ -328,7 +328,7 @@ describe('State diagram', () => {
}
`,
{
logLevel: 0,
logLevel: 0, fontFamily: 'courier'
}
);
});
@@ -340,7 +340,7 @@ describe('State diagram', () => {
a --> b: Stop
`,
{
logLevel: 0,
logLevel: 0, fontFamily: 'courier'
}
);
});

2
cypress/integration/rendering/theme.spec.js
View File

@@ -23,7 +23,7 @@ describe('Pie Chart', () => {
it('should render a flowchart diagram', () => {
imgSnapshotTest(
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
%%{init: { 'logLevel': 0} }%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}

34
cypress/platform/class.html
View File

@@ -20,16 +20,8 @@
</head>
<body>
<h1>info below</h1>
<div class="mermaid2" style="width: 100%; height: 20%;">
<div class="mermaid" style="width: 100%; height: 20%;">
%%{init: {'theme': 'base', 'fontFamily': 'arial', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
classDiagram-v2
classApa -- classB : Inheritance
classA -- classC : link
classC -- classD : link
classB -- classD
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
classDiagram-v2
class BankAccount{
+String owner
@@ -59,30 +51,6 @@
classA -- classC : link
classC -- classD : link
classB -- classD
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
&lt;&lt;interface&gt;&gt; Customer
&lt;&lt;Service&gt;&gt; Galaxy
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawl(amount) int
}
class Square~Shape~{
int id
List~int~ position
setPoints(List~int~ points)
getPoints() List~int~
}
Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
</div>
<script src="./mermaid.js"></script>
<script>

27
cypress/platform/e2e.html
View File

@@ -4,14 +4,17 @@
<!-- <meta charset="iso-8859-15"/> -->
<script src="/e2e.js"></script>
<!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
<!-- <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* font-family: 'Mansalva', cursive;*/
/* font-family: 'Mansalva', cursive; */
/* font-family: '"Noto Sans SC", sans-serif'; */
/* font-family: 'arial'; */
/* font-family: "trebuchet ms", verdana, arial; */
}
/* div {
font-family: 'arial';
} */
/* .mermaid-main-font {
font-family: "trebuchet ms", verdana, arial;
font-family: var(--mermaid-font-family);
@@ -31,16 +34,16 @@
<script>
// Notice startOnLoad=false
// This prevents default handling in mermaid from render before the e2e logic is applied
mermaid.initialize({
startOnLoad: false,
useMaxWidth: true,
// "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
// fontFamily: '\"trebuchet ms\", verdana, arial;'
// fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
// fontFamily: '"Mansalva", cursive',
// fontFamily: '"Noto Sans SC", sans-serif'
fontFamily: '"Noto Sans SC", sans-serif'
});
// mermaid.initialize({
// startOnLoad: false,
// useMaxWidth: true,
// // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
// // fontFamily: '\"trebuchet ms\", verdana, arial;'
// // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
// // fontFamily: '"Mansalva", cursive',
// // fontFamily: '"Noto Sans SC", sans-serif'
// fontFamily: '"Noto Sans SC", sans-serif'
// });
</script>
</body>
</html>

98
cypress/platform/knsv.html Normal file
View File

@@ -0,0 +1,98 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* background: rgb(221, 208, 208); */
/* background:#333; */
font-family: 'Arial';
}
h1 { color: grey;}
.mermaid2 {
display: none;
}
</style>
</head>
<body>
<h1>info below</h1>
<div class="flex">
<div class="mermaid" style="width: 50%; height: 400px;">
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
%%{init: {"fontFamily": "arial2"}}%%
graph TD
A[Christmas]
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
flowchart TD
L1 --- L2
L2 --- C
M1 ---> C
R1 .-> R2
R2 <.-> C
C -->|Label 1| E1
C <-- Label 2 ---> E2
C ----> E3
C <-...-> E4
C ======> E5
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
graph TD
L1 --- L2
L2 --- C
M1 ---> C
R1 .-> R2
R2 <.-> C
C -->|Label 1| E1
C -- Label 2 ---> E2
C ----> E3
C -----> E4
C ======> E5
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'forest',
// themeVariables:{primaryColor: '#ff0000'},
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": true },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"arial", sans-serif',
fontFamily: 'courier',
curve: 'cardinal',
securityLevel: 'strict'
});
function callback(){alert('It worked');}
</script>
</body>
</html>

27
cypress/platform/viewer.js
View File

@@ -37,6 +37,27 @@ const contentLoaded = function() {
global.mermaid.init();
}
};
function merge(current, update) {
Object.keys(update).forEach(function(key) {
// if update[key] exist, and it's not a string or array,
// we go in one level deeper
if (
current.hasOwnProperty(key) && // eslint-disable-line
typeof current[key] === 'object' &&
!(current[key] instanceof Array)
) {
merge(current[key], update[key]);
// if update[key] doesn't exist in current, or it's a string
// or array, then assign/overwrite current[key] to update[key]
} else {
current[key] = update[key];
}
});
return current;
}
const contentLoadedApi = function() {
let pos = document.location.href.indexOf('?graph=');
if (pos > 0) {
@@ -57,7 +78,11 @@ const contentLoadedApi = function() {
divs[i] = div;
}
mermaid2.initialize(graphObj.mermaid);
const defaultE2eCnf = { theme: 'forest' };
const cnf = merge(defaultE2eCnf, graphObj.mermaid);
mermaid2.initialize(cnf);
for (let i = 0; i < numCodes; i++) {
mermaid2.render(