marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-15 05:19:58 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
c3b78a37a6d511b68298f55d2528e55a57c76126
mermaid/cypress/platform/knsv2.html

482 lines
12 KiB
HTML
Raw Blame History

<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://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<style>
body {
/* background: rgb(221, 208, 208); */
background: #333;
font-family: 'Arial';
/* color: white; */
/* font-size: 18px !important; */
}
h1 {
color: grey;
}
.mermaid2 {
display: none;
}
.mermaid svg {
/* font-size: 18px !important; */
/* background-color: #efefef;
background-image: radial-gradient(#fff 51%, transparent 91%),
radial-gradient(#fff 51%, transparent 91%);
background-size: 20px 20px;
background-position:
0 0,
10px 10px;
background-repeat: repeat; */
}
.malware {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 150px;
background: red;
color: black;
display: flex;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
font-size: 72px;
}
pre {
width: 100%;
}
/* tspan {
font-size: 6px !important;
} */
/* .flowchart-link {
stroke-dasharray: 4, 4 !important;
animation: flow 1s linear infinite;
animation: dashdraw 4.93282s linear infinite;
stroke-width: 2px !important;
} */
@keyframes dashdraw {
from {
stroke-dashoffset: 0;
}
}
/*stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: 4.932820s linear infinite;*/
/* stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;*/
</style>
</head>
<body>
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@-.-> B & C e2@--> D
</pre>
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@==> B
e1@{ animate: true}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
theme: forest
look: classic
---
flowchart LR
A e1@==> BB
e1@{ animate: true}
</pre>
<hr />
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@==> B
e1@{ animate: false}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
theme: neo
look: handDrawn
---
flowchart LR
A e1@==> BB
e1@{ animate: false}
</pre>
<!-- Next set of tests -->
<hr />
<pre id="diagram4" class="mermaid2">
flowchart LR
slow e2@--> B
e2@{ animation: slow}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
look: neo
theme: redux
layout: elk
---
flowchart LR
A e1@--> BB
</pre>
<hr />
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@==> B
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
theme: forest
look: classic
---
flowchart LR
A e1@==> BB
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
</pre>
<!-- Circle -->
<hr />
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@==o B
e1@{ animate: true}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
theme: forest
look: classic
---
flowchart LR
A e1@==o BB
e1@{ animate: true}
</pre>
<hr />
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@==o B
e1@{ animate: false}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
theme: neo
look: handDrawn
---
flowchart LR
A e1@==o BB
e1@{ animate: false}
</pre>
<pre id="diagram4" class="mermaid">
---
config:
theme: redux-dark
layout: dagre
---
classDiagram
direction TB
class Animal {
+int age
+String gender
+isMammal()
+mate()
}
class Duck {
+String beakColor
+swim()
+quack()
}
class Zebra {
+bool is_wild
+run()
}
class UntitledClass {
}
class Animal_copy_1["Animal"] {
+int age
+String gender
+isMammal()
+mate()
}
note for Animal "This is a sample note"
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal_copy_1 "*" --|> "1" Animal
Animal_copy_1 .. UntitledClass
</pre>
<pre id="diagram4" class="mermaid">
---
config:
theme: redux-dark
layout: dagre
---
flowchart LR
classDef redNode fill:#D50000,color:#000000;
classDef pinkNode fill:#E1BEE7,color:#000000;
classDef yellowNode fill:#FFF9C4,color:#000000;
classDef blackNode fill:#000000,stroke:#FFD600,stroke-width:4px,stroke-dasharray: 0,color:#FFFFFF;
classDef greenNode fill:#00F840,color:#000000;
classDef reminderNode stroke:#FFD600,stroke-width:4px,stroke-dasharray: 0,fill:#000000,color:#FFFFFF;
classDef blueSubgraph fill:#BBDEFB;
subgraph subgraph_zv2q8ucnp["Shape descriptions"]
customer((Customer)):::redNode
Support["Support"]:::pinkNode
Technician{{Technician}}:::yellowNode
Decision{"Decision"}:::blackNode
end
A((Reported issue)):::redNode --> B["Ticket is created"]
B --> C{"Working hours?"}:::blackNode
C -- Yes --> E{{"Tickets are sent to day team for response"}}:::yellowNode
C -- No --> F["Tickets are sent to on-call staff for response"]:::pinkNode
E --> Worked{"Ticket being worked on?"}:::reminderNode
F --> Worked
Worked -- Yes --> G["Work on the tickets based on priority"]:::pinkNode
Worked -- No --> Reminder["Reminder is sent"]
Reminder --> Worked
G --> H["Team fixes the issue"]:::pinkNode
H --> I{"Is the issue resolved?"}:::reminderNode
I -- Yes --> Done["Ticket is closed and follow-up email is sent"]:::greenNode
I -- No --> H
class subgraph_zv2q8ucnp blueSubgraph
linkStyle 2 stroke:#00C853,fill:none
linkStyle 3 stroke:#D50000,fill:none
linkStyle 6 stroke:#00C853,fill:none
linkStyle 7 stroke:#D50000,fill:none
linkStyle 11 stroke:#00C853,fill:none
linkStyle 12 stroke:#D50000,fill:none
</pre>
<!-- Next set of tests -->
<hr />
<pre id="diagram4" class="mermaid2">
flowchart LR
slow e2@--o B
e2@{ animation: slow}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
theme: forest
look: classic
---
flowchart LR
A e1@--o BB
e1@{ animation: fast}
</pre>
<hr />
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@==o B
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
theme: forest
look: classic
---
flowchart LR
A e1@==o BB
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
</pre>
<!-- Cross -->
<hr />
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@==x B
e1@{ animate: true}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
theme: forest
look: classic
---
flowchart LR
A e1@==x BB
e1@{ animate: true}
</pre>
<hr />
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@==x B
e1@{ animate: false}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
theme: neo
look: handDrawn
---
flowchart LR
A e1@==x BB
e1@{ animate: false}
</pre>
<!-- Next set of tests -->
<hr />
<pre id="diagram4" class="mermaid2">
flowchart LR
slow e2@--x B
e2@{ animation: slow}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
theme: forest
look: classic
---
flowchart LR
A e1@--x BB
e1@{ animation: fast}
</pre>
<hr />
<pre id="diagram4" class="mermaid2">
flowchart LR
A e1@==x B
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
theme: forest
look: classic
---
flowchart LR
A e1@==x BB
classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
import layouts from './mermaid-layout-elk.esm.mjs';
const staticBellIconPack = {
prefix: 'fa6-regular',
icons: {
bell: {
body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
width: 448,
},
},
width: 512,
height: 512,
};
mermaid.registerIconPacks([
{
name: 'logos',
loader: () =>
fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
},
{
name: 'fa',
loader: () => staticBellIconPack,
},
]);
mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) {
console.error('Mermaid error: ', err);
};
window.callback = function () {
alert('A callback was triggered');
};
function callback() {
alert('It worked');
}
await mermaid.initialize({
theme: 'redux-dark',
// theme: 'default',
// theme: 'forest',
// handDrawnSeed: 12,
// look: 'handDrawn',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre',
// layout: 'elk',
layout: 'sugiyama',
// htmlLabels: false,
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
// fontFamily: 'Kalam',
// fontFamily: 'courier',
fontFamily: 'arial',
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',
messageFontFamily: 'courier',
},
kanban: {
htmlLabels: false,
},
fontSize: 12,
logLevel: 0,
securityLevel: 'loose',
callback,
});
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink