mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-02 11:54:15 +01:00
Merge branch 'develop' into update-er-diagram
This commit is contained in:
Yari DeWalt
@@ -83,7 +83,8 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid">
|
||||
<div class="flex">
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
title: hello2
|
||||
config:
|
||||
@@ -242,8 +243,190 @@ stateDiagram-v2
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
look: neo
|
||||
---
|
||||
flowchart RL
|
||||
subgraph " "
|
||||
A5@{ shape: manual-file, label: "a label"}
|
||||
B5@{ shape: manual-input, label: "a label" }
|
||||
C5@{ shape: mul-doc, label: "a label" }
|
||||
D5@{ shape: mul-proc, label: "a label" }
|
||||
E5@{ shape: paper-tape, label: "a label" }
|
||||
B3@{ shape: das, label: "a label" }
|
||||
C3@{ shape: disk, label: "a label" }
|
||||
D4@{ shape: lin-doc, label: "a label" }
|
||||
E4@{ shape: loop-limit, label: "a label" }
|
||||
end
|
||||
subgraph " "
|
||||
B6@{ shape: summary, label: "a label" }
|
||||
C6@{ shape: tag-we-rect, label: "a label" }
|
||||
D6@{ shape: tag-rect, label: "a label" }
|
||||
A2@{ shape: fork}
|
||||
B2@{ shape: hourglass }
|
||||
C2@{ shape: comment, label: "I am a comment" }
|
||||
D2@{ shape: bolt }
|
||||
D3@{ shape: disp, label: "a label" }
|
||||
C4@{ shape: junction, label: "a label" }
|
||||
A4@{ shape: extract, label: "a label"}
|
||||
B52[a fr]@{ shape: fr }
|
||||
end
|
||||
subgraph " "
|
||||
A1@{ shape: text, label: This is a textblock}
|
||||
B1@{ shape: card, label: "a label" }
|
||||
C1@{ shape: lined-proc, label: "a label" }
|
||||
D1@{ shape: start, label: "a label" }
|
||||
E1@{ shape: stop, label: "a label" }
|
||||
E2@{ shape: doc, label: "a label" }
|
||||
A6@{ shape: stored-data, label: "a label"}
|
||||
A3@{ shape: delay, label: "a label" }
|
||||
E3@{ shape: div-proc, label: "a label" }
|
||||
B4[a label]@{ shape: win-pane }
|
||||
end
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
title: hello2
|
||||
config:
|
||||
look: handDrawn
|
||||
elk:
|
||||
<!-- nodePlacementStrategy: SIMPLE -->
|
||||
---
|
||||
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
|
||||
flowchart TD
|
||||
|
||||
A([Start]) -->|go to booking page| B("select
|
||||
ISBS booking no")
|
||||
A --> QQ{cancel booking}
|
||||
A --> RR{no show}
|
||||
A --> SS{change booking}
|
||||
B -->C(wmpay_request_payment.request_type= 'partial',
|
||||
wmpay_request_payment.status= 'paid',
|
||||
pos_booking.booking_status= ‘partial’ and 'full_deposit')
|
||||
style C text-align:left
|
||||
C -->D{manage booking}
|
||||
|
||||
D -->|cancel|E[ระบบแสดงช่องให้กรอกเหตุผล]
|
||||
E -->F{กดปุ่ม 'cancel' หรือไม่}
|
||||
F -->|Yes|G[ระบบบันทึกค่าใหม่
|
||||
และไม่สามารถแก้ไขข้อมูลได้]
|
||||
F -->|No|H[กดปุ่ม 'close']
|
||||
H -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
|
||||
G -->|ระบบส่งข้อมูล|I[(POS_database)]
|
||||
I -->|pos_booking.booking_status='cancel'|Z([End])
|
||||
|
||||
|
||||
D -->|no show|J[ระบบแสดงช่องให้กรอกเหตุผล]
|
||||
J -->K{กดปุ่ม 'noshow' หรือไม่}
|
||||
K -->|Yes|L[ระบบสร้างใบเสร็จอัตโนมัติ
|
||||
Product_id: 439,
|
||||
ItemName: no show]
|
||||
style L text-align:left
|
||||
|
||||
K -->|No|O[กดปุ่ม 'close']
|
||||
O -->|ระบบไม่เปลี่ยนแปลงข้อมูล|Z
|
||||
L -->M[ระบบบันทึกค่าใหม่]
|
||||
M -->|ระบบส่งข้อมูล|N[(POS_database)]
|
||||
N -->|pos_booking.booking_status=‘noshow’|Z
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
title: hello2
|
||||
config:
|
||||
look: handDrawn
|
||||
layout: dagre
|
||||
elk:
|
||||
nodePlacementStrategy: BRANDES_KOEPF
|
||||
---
|
||||
flowchart
|
||||
A --> A
|
||||
subgraph A
|
||||
B --> B
|
||||
subgraph B
|
||||
C
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
look: handdrawn
|
||||
flowchart:
|
||||
htmlLabels: true
|
||||
---
|
||||
flowchart
|
||||
A[I am a long text, where do I go??? handdrawn - true]
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: false
|
||||
---
|
||||
flowchart
|
||||
A[I am a long text, where do I go??? classic - false]
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
flowchart:
|
||||
htmlLabels: true
|
||||
---
|
||||
flowchart
|
||||
A[I am a long text, where do I go??? classic - true]
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
<pre id="diagram2" class="mermaid2">
|
||||
flowchart LR
|
||||
id1(Start)-->id2(Stop)
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
|
||||
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram3" class="mermaid2">
|
||||
flowchart LR
|
||||
A:::foo & B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef ash color:red
|
||||
class C ash
|
||||
style C stroke:#00f, fill:black
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
stateDiagram
|
||||
A:::foo
|
||||
B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
style C stroke:#00f, fill:black, color:white
|
||||
|
||||
</pre>
|
||||
|
||||
<pre id="diagram4" class="mermaid">
|
||||
flowchart TB
|
||||
A@{
|
||||
label: "aksljhf kasjdh"
|
||||
}
|
||||
</pre>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
|
||||
174
cypress/platform/saurabh.html
Normal file
174
cypress/platform/saurabh.html
Normal file
@@ -0,0 +1,174 @@
|
||||
<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://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';
|
||||
/* 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; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="display: flex; gap: 2rem; flex-direction: row">
|
||||
<pre id="diagram4" class="mermaid">
|
||||
flowchart LR
|
||||
A@{ icon: "fa:window-minimize", form: circle }
|
||||
E@{ icon: "fa:window-minimize", form: circle }
|
||||
B@{ icon: "fa:bell", form: circle }
|
||||
B2@{ icon: "fa:bell", form: circle }
|
||||
C@{ icon: "fa:address-book", form: square }
|
||||
D@{ icon: "fa:star-half", form: square }
|
||||
A --> E
|
||||
B --> B2
|
||||
|
||||
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart TB
|
||||
A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
|
||||
B2 --test--> C
|
||||
D --> B2 --> E
|
||||
style B2 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram43" class="mermaid2">
|
||||
flowchart BT
|
||||
A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
|
||||
B2 --test--> C
|
||||
D --> B2 --> E
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart BT
|
||||
A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
|
||||
B2 --test--> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram43" class="mermaid2">
|
||||
flowchart BT
|
||||
A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
|
||||
B2 --test--> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram6" class="mermaid2">
|
||||
flowchart TB
|
||||
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram6" class="mermaid2">
|
||||
flowchart TB
|
||||
A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
|
||||
D --> B2 --> E
|
||||
</pre
|
||||
>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.registerIconPacks([
|
||||
{
|
||||
name: 'logos',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
|
||||
},
|
||||
{
|
||||
name: 'fa',
|
||||
loader: () =>
|
||||
fetch('https://unpkg.com/@iconify-json/fa6-solid/icons.json').then((res) => res.json()),
|
||||
},
|
||||
]);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
window.callback = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
mermaid.initialize({
|
||||
// theme: 'base',
|
||||
// handdrawnSeed: 12,
|
||||
look: 'classic',
|
||||
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
|
||||
// 'elk.nodePlacement.strategy': 'SIMPLE',
|
||||
// 'elk.nodePlacement.strategy': 'LAYERED',
|
||||
// 'elk.mergeEdges': true,
|
||||
// layout: 'dagre',
|
||||
// layout: 'elk',
|
||||
// layout: 'fixed',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 10, padding: 0, htmlLabels: true },
|
||||
// fontFamily: 'Caveat',
|
||||
// fontFamily: 'Kalam',
|
||||
fontFamily: 'courier',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
messageFontFamily: 'courier',
|
||||
},
|
||||
themeVariables: {
|
||||
fontSize: 50,
|
||||
fontFamily: 'courier',
|
||||
},
|
||||
logLevel: 0,
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('In parse error:');
|
||||
console.error(err);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user