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

fix #3407 Replace div with pre and format

Browse Source
This commit is contained in:
Sidharth Vinod
2022-09-05 00:48:36 +05:30
parent a64a76db9b
commit 91478caf5b
55 changed files with 2039 additions and 1947 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
cypress/platform/showcase_dark.html
View File

@@ -1,23 +1,28 @@
<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); */
background:#333;
background: #333;
font-family: 'Arial';
height: 100%;
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">
%%{init: {'theme': 'base', 'themeVariables':{'primaryColor': '#ff0000'}}%%
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">
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
@@ -71,8 +76,8 @@
F
G
end
</div>
<div class="mermaid width height" >
</pre>
<pre class="mermaid width height">
sequenceDiagram
autonumber
par Action 1
@@ -88,8 +93,9 @@
loop Every minute
John-->Alice: Great!
end
</div>
<div class="mermaid width height" >
</pre>
<pre class="mermaid width height">
%%{init: {'theme':'dark'}}%%
classDiagram
@@ -113,8 +119,9 @@ 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
@@ -142,8 +149,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">
stateDiagram
[*] --> Active
@@ -168,8 +175,8 @@ gantt
Active --> SomethingElse
SomethingElse --> [*]
note right of SomethingElse : This is the note to the right.
</div>
<div class="mermaid width height2">
</pre>
<pre class="mermaid width height2">
stateDiagram-v2
[*] --> Active
@@ -194,8 +201,8 @@ gantt
Active --> SomethingElse2
SomethingElse2 --> [*]
note right of SomethingElse2 : This is the note to the right.
</div>
<div class="mermaid width height2">
</pre>
<pre class="mermaid width height2">
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
@@ -205,8 +212,8 @@ gantt
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
@@ -216,8 +223,8 @@ gantt
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 {
@@ -255,8 +262,8 @@ requirementDiagram
test_req - traces -> test_req2
test_req - contains -> test_req3
test_req <- copies - test_entity2
</div>
<div class="mermaid" class="width height">
</pre>
<pre class="mermaid" class="width height">
gitGraph
commit
branch hotfix
@@ -299,8 +306,9 @@ gitGraph
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);
@@ -319,8 +327,8 @@ gitGraph
securityLevel: 'strict',
});
function callback() {
alert('It worked');
}
alert('It worked');
}
</script>
</body>
</html>