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
mermaid/cypress/platform/knsv3.html

252 lines
6.5 KiB
HTML
Raw Normal View History

Fix for first case
2021-04-29 18:50:12 +02:00
<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; */
2022-06-08 20:17:31 +02:00
font-family: 'Courier New', Courier, monospace;
Fix for first case
2021-04-29 18:50:12 +02:00
/* font-size: 18px !important; */
}
h1 { color: grey;}
.mermaid2 {
display: none;
}
2022-06-08 20:17:31 +02:00
.mermaid {
border: 1px solid red;
font-family: 'Courier New', Courier, monospace;
Fix for first case
2021-04-29 18:50:12 +02:00
/* font-size: 18px !important; */
}
</style>
</head>
<body>
<div>info below</div>
2022-06-08 20:17:31 +02:00
<div class="">
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="width: 100%; height: 400px;">
2022-06-08 20:17:31 +02:00
flowchart TB;subgraph "number as labels";1;end;
Fix for first case
2021-04-29 18:50:12 +02:00
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="width: 100%; height: 400px;">
2022-06-08 20:17:31 +02:00
flowchart TB;a[APA];
Fix for first case
2021-04-29 18:50:12 +02:00
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="margin-left:100px;">
2022-06-08 20:17:31 +02:00
graph TD
work --> sleep
sleep --> work
eat --> sleep
work --> eat
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="margin-left:100px;">
2022-06-08 20:17:31 +02:00
flowchart TD
work --> sleep
sleep --> work
eat --> sleep
work --> eat
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="">
2022-06-08 20:17:31 +02:00
graph TB
A
B
subgraph foo[Foo SubGraph]
C
D
end
subgraph bar[Bar SubGraph]
E
F
end
G
Fix for first case
2021-04-29 18:50:12 +02:00
2022-06-08 20:17:31 +02:00
A-->B
B-->C
C-->D
B-->D
D-->E
E-->A
E-->F
F-->D
F-->G
B-->G
G-->D
Fix for first case
2021-04-29 18:50:12 +02:00
2022-06-08 20:17:31 +02:00
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="">
2022-06-08 20:17:31 +02:00
graph TB
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A
B
subgraph foo[Foo SubGraph]
C
D
end
subgraph bar[Bar SubGraph]
E
F
end
G
Fix for first case
2021-04-29 18:50:12 +02:00
2022-06-08 20:17:31 +02:00
A-->B
B-->C
C-->D
B-->D
D-->E
E-->A
E-->F
F-->D
F-->G
B-->G
G-->D
Fix for first case
2021-04-29 18:50:12 +02:00
2022-06-08 20:17:31 +02:00
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="">
2022-06-08 20:17:31 +02:00
graph TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="">
2022-06-08 20:17:31 +02:00
graph TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="">
2022-06-08 20:17:31 +02:00
flowchart TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="">
2022-06-08 20:17:31 +02:00
flowchart TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="">
Fix for first case
2021-04-29 18:50:12 +02:00
flowchart LR
2022-06-08 20:17:31 +02:00
a["<strong>Haiya</strong>"]---->b
</div>
Fix for padding issue and some cleanup
2022-06-14 20:09:55 +02:00
<div class="mermaid" style="">
Fix for first case
2021-04-29 18:50:12 +02:00
flowchart LR
2022-06-08 20:17:31 +02:00
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
a["<strong>Haiya</strong>"]---->b
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="">
2022-06-08 20:17:31 +02:00
flowchart TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="">
2022-06-08 20:17:31 +02:00
flowchart TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="">
2022-06-08 20:17:31 +02:00
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
classDiagram-v2
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class12 <|.. Class08
Class11 ..>Class12
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
Class08 <--> C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid2" style="">
2022-06-08 20:17:31 +02:00
classDiagram-v2
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class12 <|.. Class08
Class11 ..>Class12
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
Class08 <--> C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
Fix for first case
2021-04-29 18:50:12 +02:00
</div>
Test file
2022-06-14 18:42:00 +02:00
<div class="mermaid" style="">
flowchart BT
subgraph S1
sub1 -->sub2
end
subgraph S2
sub4
end
S1 --> S2
sub1 --> sub4
</div>
Fix for first case
2021-04-29 18:50:12 +02:00
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
chore: apply linting to html ext too and fixes for files
2021-12-04 15:28:40 -08:00
// console.error('Mermaid error: ', err);
};
Fix for first case
2021-04-29 18:50:12 +02:00
mermaid.initialize({
2022-06-08 20:17:31 +02:00
// theme: 'neutral',
// arrowMarkerAbsolute: true,
Fix for first case
2021-04-29 18:50:12 +02:00
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
2022-06-08 20:17:31 +02:00
flowchart: { curve: 'cardinal', htmlLabels: false },
// htmlLabels: true,
Fix for first case
2021-04-29 18:50:12 +02:00
// gantt: { axisFormat: '%m/%d/%Y' },
2022-06-08 20:17:31 +02:00
// sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
Fix for first case
2021-04-29 18:50:12 +02:00
// sequenceDiagram: { actorMargin: 300 } // deprecated
// fontFamily: '"times", sans-serif',
2022-06-08 20:17:31 +02:00
fontFamily: 'courier',
// fontSize: 18,
// curve: 'cardinal',
Fix for first case
2021-04-29 18:50:12 +02:00
securityLevel: 'loose',
// themeVariables: {relationLabelColor: 'red'}
});
chore: apply linting to html ext too and fixes for files
2021-12-04 15:28:40 -08:00
function callback() {
alert('It worked');
}
Fix for first case
2021-04-29 18:50:12 +02:00
</script>
</body>
</html>
Reference in New Issue Copy Permalink