marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-30 12:49:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merged typescript changes

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-09-05 11:22:17 +02:00
parent 047b7023a2
commit 01106caa59
202 changed files with 8325 additions and 4777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
cypress/platform/showcase_base.html
View File

@@ -1,12 +1,15 @@
<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
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
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"
/>
<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); */
@@ -16,8 +19,10 @@
width: 100%;
margin: 0;
padding: 0;
}
h1 { color: grey;}
}
h1 {
color: grey;
}
.mermaid2 {
display: none;
}
@@ -39,7 +44,7 @@
<body>
<h1>Showcases of diagrams</h1>
<div class="flex flex-wrap">
<div class="mermaid width height">
<pre class="mermaid width height">
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
@@ -55,8 +60,8 @@
F
G
end
</div>
<div class="mermaid width height">
</pre>
<pre class="mermaid width height">
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
@@ -72,8 +77,8 @@
F
G
end
</div>
<div class="mermaid width height" >
</pre>
<pre class="mermaid width height">
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
sequenceDiagram
@@ -91,8 +96,8 @@
loop Every minute
John-->Alice: Great!
end
</div>
<div class="mermaid width height" >
</pre>
<pre class="mermaid width height">
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
classDiagram
@@ -116,8 +121,8 @@ classDiagram
+bool is_wild
+run()
}
</div>
<div class="mermaid width height">
</pre>
<pre class="mermaid width height">
gantt
dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
@@ -145,8 +150,8 @@ gantt
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
</div>
<div class="mermaid width height2">
</pre>
<pre class="mermaid width height2">
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram
[*] --> Active
@@ -173,9 +178,8 @@ gantt
note right of SomethingElse : This is the note to the right.
SomethingElse --> [*]
</div>
<div class="mermaid width height2">
</pre>
<pre class="mermaid width height2">
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram-v2
[*] --> Active
@@ -202,8 +206,8 @@ stateDiagram-v2
note right of SomethingElse2 : This is the note to the right.
SomethingElse2 --> [*]
</div>
<div class="mermaid width height2">
</pre>
<pre class="mermaid width height2">
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
@@ -213,8 +217,8 @@ stateDiagram-v2
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div>
<div class="mermaid width height">
</pre>
<pre class="mermaid width height">
journey
title My working day
section Go to work
@@ -224,8 +228,8 @@ journey
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
</div>
<div class="mermaid width height">
</pre>
<pre class="mermaid width height">
requirementDiagram
requirement test_req {
@@ -263,8 +267,8 @@ requirementDiagram
test_req - traces -> test_req2
test_req - contains -> test_req3
test_req <- copies - test_entity2
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
</pre>
<pre class="mermaid" style="width: 100%; height: 20%">
gitGraph:
commit
branch hotfix
@@ -307,8 +311,9 @@ requirementDiagram
merge main
checkout develop
merge release
</div>
<script src="./mermaid.js"></script>
</pre>
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
@@ -328,8 +333,8 @@ requirementDiagram
securityLevel: 'strict',
});
function callback() {
alert('It worked');
}
alert('It worked');
}
</script>
</body>
</html>