marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02: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

12
.eslintrc.json
View File

@@ -5,7 +5,7 @@
"jest/globals": true, "jest/globals": true,
"node": true "node": true
}, },
"parser": "@babel/eslint-parser", "parser": "@typescript-eslint/parser",
"parserOptions": { "parserOptions": {
"ecmaFeatures": { "ecmaFeatures": {
"experimentalObjectRestSpread": true, "experimentalObjectRestSpread": true,
@@ -18,9 +18,9 @@
"plugin:jsdoc/recommended", "plugin:jsdoc/recommended",
"plugin:json/recommended", "plugin:json/recommended",
"plugin:markdown/recommended", "plugin:markdown/recommended",
"plugin:prettier/recommended" "prettier"
], ],
"plugins": ["html", "jest", "jsdoc", "json", "prettier"], "plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"],
"rules": { "rules": {
"no-prototype-builtins": "off", "no-prototype-builtins": "off",
"no-unused-vars": "off", "no-unused-vars": "off",
@@ -41,12 +41,6 @@
"no-undef": "off", "no-undef": "off",
"jsdoc/require-jsdoc": "off" "jsdoc/require-jsdoc": "off"
} }
},
{
"files": "./**/*.md/*.html",
"rules": {
"prettier/prettier": "off"
}
} }
] ]
} }

4
.lintstagedrc.json
View File

@@ -1,5 +1,3 @@
{ {
"*.{js,json,html,md}": [ "*.{ts,js,json,html,md}": ["eslint --fix", "prettier --write"]
"yarn lint:fix"
]
} }

3
.prettierignore
View File

@@ -1 +1,2 @@
demos/*.html dist
cypress/platform/xss3.html

4
.prettierrc.json
View File

@@ -1,5 +1,7 @@
{ {
"endOfLine": "auto", "endOfLine": "auto",
"printWidth": 100, "printWidth": 100,
"singleQuote": true "singleQuote": true,
"useTabs": false,
"tabWidth": 2
} }

45
cypress/platform/class.html
View File

@@ -1,31 +1,37 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link <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" 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> <style>
body { body {
background: rgb(221, 208, 208); background: rgb(221, 208, 208);
/*background:#333;*/ /*background:#333;*/
font-family: 'Arial'; font-family: 'Arial';
} }
h1 { color: white;} h1 {
color: white;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.customCss > rect, .customCss{ .customCss > rect,
fill:#FF0000 !important; .customCss {
stroke:#FFFF00 !important; fill: #ff0000 !important;
stroke-width:4px !important; stroke: #ffff00 !important;
stroke-width: 4px !important;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;"> <pre class="mermaid" style="width: 100%; height: 20%">
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%% %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
classDiagram classDiagram
class BankAccount{ class BankAccount{
@@ -36,8 +42,8 @@
} }
cssClass "BankAccount" customCss cssClass "BankAccount" customCss
</div> </pre>
<div class="mermaid" style="width: 100%; height: 20%;"> <pre class="mermaid" style="width: 100%; height: 20%">
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%% %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
classDiagram-v2 classDiagram-v2
class BankAccount{ class BankAccount{
@@ -47,9 +53,8 @@
+withdrawl(amount) int +withdrawl(amount) int
} }
cssClass "BankAccount" customCss cssClass "BankAccount" customCss
</pre>
</div> <pre class="mermaid2" style="width: 100%; height: 20%">
<div class="mermaid2" style="width: 100%; height: 20%;">
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%% %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
classDiagram classDiagram
class BankAccount{ class BankAccount{
@@ -71,8 +76,8 @@
} }
callback Class01 "callback" "A Tooltip" callback Class01 "callback" "A Tooltip"
</div> </pre>
<div class="mermaid2" style="width: 100%; height: 20%;"> <pre class="mermaid2" style="width: 100%; height: 20%">
flowchart TB flowchart TB
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c a_a --> c --> d_d --> c_c
@@ -80,9 +85,9 @@
class a_a apa; class a_a apa;
click a_a "https://www.aftonbladet.se" "apa" click a_a "https://www.aftonbladet.se" "apa"
</div> </pre>
<div class="mermaid2" style="width: 100%; height: 20%;"> <pre class="mermaid2" style="width: 100%; height: 20%">
classDiagram-v2 classDiagram-v2
classA -- classB : Inheritance classA -- classB : Inheritance
@@ -111,7 +116,7 @@
class Shape class Shape
callback Shape "callbackFunction" "This is a tooltip for a callback" callback Shape "callbackFunction" "This is a tooltip for a callback"
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
@@ -135,7 +140,7 @@
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

62
cypress/platform/click_security_loose.html
View File

@@ -1,61 +1,60 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div style="display: flex"> <div style="display: flex">
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
1Function--->2URL 1Function--->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
1Function--->2URL 1Function--->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
callback ShapeCallback "clickByClass" "This is a tooltip for a callback" callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback2 class ShapeCallback2
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback" callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
</div> </pre>
</div>
</div> <pre class="mermaid">
<div class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@@ -94,37 +93,36 @@
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<div style="display: flex"> <div style="display: flex">
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
FunctionArg-->URL FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
FunctionArg-->URL FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
click ShapeCallback call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback2 class ShapeCallback2
click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
</div> </pre>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
@@ -166,5 +164,5 @@
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

26
cypress/platform/click_security_other.html
View File

@@ -1,26 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head> </head>
<body> <body>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
1Function-->2URL 1Function-->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@@ -57,7 +57,7 @@
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -79,5 +79,5 @@
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

62
cypress/platform/click_security_sandbox.html
View File

@@ -1,61 +1,60 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div style="display: flex"> <div style="display: flex">
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
1Function--->2URL 1Function--->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
1Function--->2URL 1Function--->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
callback ShapeCallback "clickByClass" "This is a tooltip for a callback" callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback2 class ShapeCallback2
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback" callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
</div> </pre>
</div>
</div> <pre class="mermaid">
<div class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@@ -94,37 +93,36 @@
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<div style="display: flex"> <div style="display: flex">
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
FunctionArg-->URL FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
flowchart TB flowchart TB
FunctionArg-->URL FunctionArg-->URL
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram classDiagram
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
click ShapeCallback call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback call clickByClass(123) "This is a tooltip for a callback"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink2 class ShapeLink2
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback2 class ShapeCallback2
click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback" click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
</div> </pre>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
@@ -166,5 +164,5 @@
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'sandbox', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'sandbox', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

26
cypress/platform/click_security_strict.html
View File

@@ -1,26 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head> </head>
<body> <body>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
1Function-->2URL 1Function-->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@@ -59,7 +59,7 @@
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -84,5 +84,5 @@
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

22
cypress/platform/css1.html
View File

@@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
body { body {
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="mermaid2"> <pre class="mermaid2">
%%{init: { 'themeCSS': '} * { background: lightblue }' } }%% %%{init: { 'themeCSS': '} * { background: lightblue }' } }%%
flowchart TD flowchart TD
a --> b a --> b
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%% %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
flowchart LR flowchart LR
subgraph A subgraph A
@@ -27,7 +27,7 @@
i -->f i -->f
end end
A --> B A --> B
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
function showFullFirstSquad(elemName) { function showFullFirstSquad(elemName) {
@@ -35,5 +35,5 @@
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 });
</script> </script>
</body> </body>
</html> </html>

51
cypress/platform/current2.html
View File

@@ -1,19 +1,24 @@
<html> <html>
<head> <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 <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" 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> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background:#333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@@ -22,7 +27,7 @@
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="flex"> <div class="flex">
<div class="mermaid2" style="width: 50%; height: 20%;"> <pre class="mermaid2" style="width: 50%; height: 20%">
flowchart BT flowchart BT
subgraph two subgraph two
b1 b1
@@ -32,13 +37,13 @@ flowchart BT
end end
c1 --apa apa apa--> b1 c1 --apa apa apa--> b1
two --> c2 two --> c2
</div> </pre>
<div class="mermaid2" style="width: 50%; height: 200px;"> <pre class="mermaid2" style="width: 50%; height: 200px">
sequenceDiagram sequenceDiagram
Alice->>Bob:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be Alice->>Bob:Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though Bob->>Alice: I'm short though
</div> </pre>
<div class="mermaid2" style="width: 50%; height: 200px;"> <pre class="mermaid2" style="width: 50%; height: 200px">
%%{init: {'securityLevel': 'loose'}}%% %%{init: {'securityLevel': 'loose'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -51,8 +56,8 @@ sequenceDiagram
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<div class="mermaid2" style="width: 50%; height: 200px;"> <pre class="mermaid2" style="width: 50%; height: 200px">
flowchart BT flowchart BT
subgraph a subgraph a
@@ -62,8 +67,8 @@ sequenceDiagram
c --> d c --> d
b1 --> d b1 --> d
a --asd123 --> d a --asd123 --> d
</div> </pre>
<div class="mermaid2" style="width: 50%; height: 20%;"> <pre class="mermaid2" style="width: 50%; height: 20%">
stateDiagram-v2 stateDiagram-v2
state A { state A {
B1 --> B2: ok B1 --> B2: ok
@@ -72,9 +77,9 @@ stateDiagram-v2
C --> D C --> D
B1 --> D B1 --> D
A --> D: asd123 A --> D: asd123
</pre>
</div> </div>
</div> <pre class="mermaid2" style="width: 50%; height: 20%">
<div class="mermaid2" style="width: 50%; height: 20%;">
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%% %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
flowchart LR flowchart LR
a -->b a -->b
@@ -84,9 +89,8 @@ flowchart LR
subgraph B subgraph B
b b
end end
</pre>
</div> <pre class="mermaid" style="width: 50%; height: 20%">
<div class="mermaid" style="width: 50%; height: 20%;">
flowchart TB flowchart TB
subgraph A subgraph A
b-->B b-->B
@@ -95,14 +99,13 @@ flowchart TB
subgraph B subgraph B
c c
end end
</pre>
</div> <pre class="mermaid2" style="width: 50%; height: 20%">
<div class="mermaid2" style="width: 50%; height: 20%;">
sequenceDiagram sequenceDiagram
Alice->Bob: Hello Bob, how are you? Alice->Bob: Hello Bob, how are you?
Note over Alice,Bob: Looks Note over Alice,Bob: Looks
Note over Bob,Alice: Looks back Note over Bob,Alice: Looks back
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -125,7 +128,7 @@ Note over Bob,Alice: Looks back
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

25
cypress/platform/flow.html
View File

@@ -1,34 +1,34 @@
<html> <html>
<head> <head>
<link <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" <style>
rel="stylesheet" body {
/>
<style>body {
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
}</style> }
</style>
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
subgraph One subgraph One
a1-->a2-->a3 a1-->a2-->a3
end end
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
a_a --> b_b:::apa --> c_c:::apa a_a --> b_b:::apa --> c_c:::apa
classDef apa fill:#f9f,stroke:#333,stroke-width:4px; classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa; class a_a apa;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c a_a --> c --> d_d --> c_c
classDef apa fill:#f9f,stroke:#333,stroke-width:4px; classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
class a_a apa; class a_a apa;
click a_a "http://www.aftonbladet.se" "apa" click a_a "http://www.aftonbladet.se" "apa"
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
@@ -41,6 +41,5 @@
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</script>
</body> </body>
</html> </html>

29
cypress/platform/git-graph.html
View File

@@ -1,31 +1,37 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link <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" 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> <style>
body { body {
background: rgb(221, 208, 208); background: rgb(221, 208, 208);
/*background:#333;*/ /*background:#333;*/
font-family: 'Arial'; font-family: 'Arial';
} }
h1 { color: white;} h1 {
color: white;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.customCss > rect, .customCss{ .customCss > rect,
fill:#FF0000 !important; .customCss {
stroke:#FFFF00 !important; fill: #ff0000 !important;
stroke-width:4px !important; stroke: #ffff00 !important;
stroke-width: 4px !important;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;"> <pre class="mermaid" style="width: 100%; height: 20%">
gitGraph gitGraph
class BankAccount{ class BankAccount{
@@ -35,8 +41,7 @@
+withdrawl(amount) int +withdrawl(amount) int
} }
cssClass "BankAccount" customCss cssClass "BankAccount" customCss
</pre>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -61,7 +66,7 @@
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

34
cypress/platform/gitgraph.html
View File

@@ -1,11 +1,14 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link <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" 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> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@@ -17,16 +20,17 @@
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.customCss > rect, .customCss{ .customCss > rect,
fill:#FF0000 !important; .customCss {
stroke:#FFFF00 !important; fill: #ff0000 !important;
stroke-width:4px !important; stroke: #ffff00 !important;
stroke-width: 4px !important;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;"> <pre class="mermaid" style="width: 100%; height: 20%">
%%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false"},"themeVariables": { %%{init: { "logLevel": "debug", "theme": "default" , "gitGraph" : {"showBranches":"false"},"themeVariables": {
"gitBranchLabel0": "#ff0000", "gitBranchLabel0": "#ff0000",
"gitBranchLabel1": "#00ff00", "gitBranchLabel1": "#00ff00",
@@ -50,9 +54,8 @@
commit commit
branch featureA branch featureA
commit commit
</pre>
</div> <pre class="mermaid2" style="width: 100%; height: 20%">
<div class="mermaid2" style="width: 100%; height: 20%;">
gitGraph gitGraph
commit type:HIGHLIGHT commit type:HIGHLIGHT
branch hotfix branch hotfix
@@ -94,16 +97,15 @@
merge main merge main
checkout develop checkout develop
merge release merge release
</pre>
</div> <pre class="mermaid2" style="width: 100%; height: 20%">
<div class="mermaid2" style="width: 100%; height: 20%;">
gitGraph: gitGraph:
commit commit
commit commit
branch newbranch branch newbranch
commit commit
merge main merge main
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
@@ -142,7 +144,7 @@
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

34
cypress/platform/gitgraph2.html
View File

@@ -1,11 +1,14 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link <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" 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> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@@ -17,16 +20,17 @@
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.customCss > rect, .customCss{ .customCss > rect,
fill:#FF0000 !important; .customCss {
stroke:#FFFF00 !important; fill: #ff0000 !important;
stroke-width:4px !important; stroke: #ffff00 !important;
stroke-width: 4px !important;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid2" style="width: 100%; height: 20%;"> <pre class="mermaid2" style="width: 100%; height: 20%">
gitGraph: gitGraph:
commit "Ashish" commit "Ashish"
branch newbranch branch newbranch
@@ -40,9 +44,8 @@
commit commit
branch b2 branch b2
commit commit
</pre>
</div> <pre class="mermaid" style="width: 100%; height: 20%">
<div class="mermaid" style="width: 100%; height: 20%;">
%%{init: { "gitGraph": { "showBranches": true, "mainBranchName": "APA" }}}%% %%{init: { "gitGraph": { "showBranches": true, "mainBranchName": "APA" }}}%%
gitGraph gitGraph
commit commit
@@ -86,16 +89,15 @@
merge APA merge APA
checkout develop checkout develop
merge release merge release
</pre>
</div> <pre class="mermaid2" style="width: 100%; height: 20%">
<div class="mermaid2" style="width: 100%; height: 20%;">
gitGraph: gitGraph:
commit commit
commit commit
branch newbranch branch newbranch
commit commit
merge main merge main
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
@@ -133,7 +135,7 @@
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

29
cypress/platform/huge.html
View File

File diff suppressed because one or more lines are too long

11
cypress/platform/info.html
View File

@@ -1,14 +1,12 @@
<html> <html>
<head> <head>
<link <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid">info</div> <pre class="mermaid">
info
</pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
@@ -21,6 +19,5 @@
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</script>
</body> </body>
</html> </html>

40
cypress/platform/interaction.html
View File

@@ -1,52 +1,52 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<div style="display: flex"> <div style="display: flex">
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
graph TB graph TB
Function-->URL Function-->URL
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid2"> <pre id="FirstLine" class="mermaid2">
graph TB graph TB
1Function-->2URL 1Function-->2URL
click 1Function clickByFlow "Add a div" click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div> </pre>
<div id="FirstLine" class="mermaid2"> <pre id="FirstLine" class="mermaid2">
classDiagram classDiagram
class Test class Test
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
class ShapeCallback class ShapeCallback
callback ShapeCallback "clickByClass" "This is a tooltip for a callback" callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeCallback class ShapeCallback
callback ShapeCallback "clickByClass" "This is a tooltip for a callback" callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div> </pre>
<div id="FirstLine" class="mermaid"> <pre id="FirstLine" class="mermaid">
classDiagram-v2 classDiagram-v2
class ShapeLink class ShapeLink
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
</div> </pre>
</div> </div>
<div class="mermaid2"> <pre class="mermaid2">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@@ -85,7 +85,7 @@
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -118,5 +118,5 @@
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

117
cypress/platform/knsv.html
View File

@@ -1,12 +1,15 @@
<html> <html>
<head> <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 <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" 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> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@@ -18,26 +21,24 @@
flex-direction: column; flex-direction: column;
margin-left: 20px; margin-left: 20px;
} }
h1 { color: grey;} h1 {
.mermaid2,.mermaid3 { color: grey;
}
.mermaid2,
.mermaid3 {
display: none; display: none;
} }
.mermaid { .mermaid {
} }
.mermaid svg { .mermaid svg {
border: 1px solid purple; border: 1px solid purple;
/* font-size: 18px !important; */ /* font-size: 18px !important; */
fontFamily: 'courier' fontfamily: 'courier';
} }
</style> </style>
</head> </head>
<body> <body>
<pre class="mermaid2" style="width: 50%">
<div class="mermaid2" style="width: 50%;">
flowchart LR flowchart LR
classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px; classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px; classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
@@ -55,8 +56,8 @@ flowchart LR
click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line." click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line."
O0 -- has type -->O2["Bug"] O0 -- has type -->O2["Bug"]
click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred"; click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
</div> </pre>
<div class="mermaid2" style="width: 50%;"> <pre class="mermaid2" style="width: 50%">
flowchart TD flowchart TD
subgraph test subgraph test
direction TB direction TB
@@ -69,23 +70,22 @@ flowchart TD
G --> H G --> H
end end
end end
</pre>
</div> <pre class="mermaid" style="width: 50%">
<div class="mermaid" style="width: 50%;">
flowchart TD flowchart TD
id id
</div> </pre>
<div class="mermaid2" style="width: 50%;"> <pre class="mermaid2" style="width: 50%">
flowchart LR flowchart LR
a["<strong>Haiya</strong>"]===>b a["<strong>Haiya</strong>"]===>b
</div> </pre>
<div class="mermaid2" style="width: 50%;"> <pre class="mermaid2" style="width: 50%">
flowchart TD flowchart TD
A --> B A --> B
A --> C A --> C
B --> C B --> C
</div> </pre>
<div class="mermaid2" style="width: 50%;"> <pre class="mermaid2" style="width: 50%">
flowchart TD flowchart TD
A([stadium shape test]) A([stadium shape test])
A -->|Get money| B([Go shopping]) A -->|Get money| B([Go shopping])
@@ -98,8 +98,8 @@ flowchart TD
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<div class="mermaid2" style="width: 50%;"> <pre class="mermaid2" style="width: 50%">
sequenceDiagram sequenceDiagram
title: My Sequence Diagram Title title: My Sequence Diagram Title
accTitle: My Acc Sequence Diagram accTitle: My Acc Sequence Diagram
@@ -108,15 +108,15 @@ flowchart TD
Alice->>John: Hello John, how are you? Alice->>John: Hello John, how are you?
John-->>Alice: Great! John-->>Alice: Great!
Alice-)John: See you later! Alice-)John: See you later!
</div> </pre>
<div class="mermaid2" style="width: 50%;"> <pre class="mermaid2" style="width: 50%">
graph TD graph TD
A -->|000| B A -->|000| B
B -->|111| C B -->|111| C
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red; linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
journey journey
accTitle: My User Journey Diagram accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description accDescr: My User Journey Diagram Description
@@ -129,11 +129,11 @@ graph TD
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
info info
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
requirementDiagram requirementDiagram
accTitle: My req Diagram accTitle: My req Diagram
accDescr: My req Diagram Description accDescr: My req Diagram Description
@@ -173,9 +173,8 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</pre>
</div> <pre class="mermaid2" style="width: 100%">
<div class="mermaid2" style="width: 100%;">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@@ -206,24 +205,24 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
stateDiagram stateDiagram
state Active { state Active {
Idle Idle
} }
Inactive --> Idle: ACT Inactive --> Idle: ACT
Active --> Active: LOG Active --> Active: LOG
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
flowchart TB flowchart TB
accTitle: My flowchart accTitle: My flowchart
accDescr: My flowchart Description accDescr: My flowchart Description
subgraph One subgraph One
a1-->a2-->a3 a1-->a2-->a3
end end
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
sequenceDiagram sequenceDiagram
A ->> B: 1 A ->> B: 1
rect rgb(204, 0, 102) rect rgb(204, 0, 102)
@@ -233,8 +232,9 @@ stateDiagram
end end
end end
end end
B ->> A: Return</div> B ->> A: Return
<div class="mermaid2" style="width: 100%;"> </pre>
<pre class="mermaid2" style="width: 100%">
classDiagram classDiagram
accTitle: My class diagram accTitle: My class diagram
accDescr: My class diagram Description accDescr: My class diagram Description
@@ -251,15 +251,15 @@ class Class10 {
int id int id
size() size()
} }
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
%%{init: {'config': {'wrap': true }}}%% %%{init: {'config': {'wrap': true }}}%%
sequenceDiagram sequenceDiagram
participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
A->>Bob: Hola A->>Bob: Hola
Bob-->A: Pasten ! Bob-->A: Pasten !
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
gitGraph gitGraph
commit id: "ZERO" commit id: "ZERO"
branch develop branch develop
@@ -279,15 +279,16 @@ class Class10 {
checkout develop checkout develop
commit id:"C" commit id:"C"
merge featureA merge featureA
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
C -->|One| D[Laptop] C -->|One| D[Laptop]
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car] C -->|Three| F[fa:fa-car Car]
</div> <div class="mermaid2" style="width: 100%;"> </pre>
<pre class="mermaid2" style="width: 100%">
classDiagram classDiagram
Animal "1" <|-- Duck Animal "1" <|-- Duck
Animal <|-- Fish Animal <|-- Fish
@@ -309,8 +310,8 @@ flowchart TD
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<div class="mermaid2" style="width: 100%;"> <pre class="mermaid2" style="width: 100%">
erDiagram erDiagram
CAR ||--o{ NAMED-DRIVER : allows CAR ||--o{ NAMED-DRIVER : allows
CAR { CAR {
@@ -324,7 +325,7 @@ flowchart TD
string lastName string lastName
int age int age
} }
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -346,16 +347,16 @@ flowchart TD
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function clickByFlow(elemName) { function clickByFlow(elemName) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-click'; div.className = 'created-by-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow'; div.innerText = 'Clicked By Flow';
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
</script> </script>
</body> </body>
</html> </html>

37
cypress/platform/knsv2.html
View File

@@ -1,12 +1,15 @@
<html> <html>
<head> <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 <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" 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> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@@ -14,7 +17,9 @@
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@@ -23,9 +28,9 @@
} }
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@@ -41,11 +46,12 @@
<body> <body>
<div>Security check</div> <div>Security check</div>
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
sequenceDiagram sequenceDiagram
Nothing:Valid; Nothing:Valid;
</div> </pre>
<div id="res" class=""></div> <div id="res" class=""></div>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
@@ -57,15 +63,14 @@ sequenceDiagram
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
try { try {
mermaid.initThrowsErrors(undefined, '#diagram'); mermaid.initThrowsErrors(undefined, '#diagram');
} catch (err) { } catch (err) {
console.log('Caught error:', err); console.log('Caught error:', err);
} }
</script> </script>
</body> </body>
</html> </html>

84
cypress/platform/knsv3.html
View File

@@ -1,12 +1,15 @@
<html> <html>
<head> <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 <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" 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> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@@ -14,7 +17,9 @@
font-family: 'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@@ -28,27 +33,27 @@
<body> <body>
<div>info below</div> <div>info below</div>
<div class=""> <div class="">
<div class="mermaid2" style="width: 100%; height: 400px;"> <pre class="mermaid2" style="width: 100%; height: 400px">
flowchart TB;subgraph "number as labels";1;end; flowchart TB;subgraph "number as labels";1;end;
</div> </pre>
<div class="mermaid2" style="width: 100%; height: 400px;"> <pre class="mermaid2" style="width: 100%; height: 400px">
flowchart TB;a[APA]; flowchart TB;a[APA];
</div> </pre>
<div class="mermaid2" style="margin-left:100px;"> <pre class="mermaid2" style="margin-left: 100px">
graph TD graph TD
work --> sleep work --> sleep
sleep --> work sleep --> work
eat --> sleep eat --> sleep
work --> eat work --> eat
</div> </pre>
<div class="mermaid2" style="margin-left:100px;"> <pre class="mermaid2" style="margin-left: 100px">
flowchart TD flowchart TD
work --> sleep work --> sleep
sleep --> work sleep --> work
eat --> sleep eat --> sleep
work --> eat work --> eat
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
graph TB graph TB
A A
B B
@@ -76,8 +81,8 @@ flowchart TD
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
graph TB graph TB
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A A
@@ -106,56 +111,56 @@ flowchart TD
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
graph TD graph TD
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C A[Christmas] ==> C
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
graph TD graph TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C A[Christmas] ==> C
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
flowchart TD flowchart TD
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C A[Christmas] ==> C
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
flowchart TD flowchart TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C A[Christmas] ==> C
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
flowchart LR flowchart LR
a["<strong>Haiya</strong>"]---->b a["<strong>Haiya</strong>"]---->b
</div> </pre>
<div class="mermaid" style=""> <pre class="mermaid" style="">
flowchart LR flowchart LR
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
a["<strong>Haiya</strong>"]---->b a["<strong>Haiya</strong>"]---->b
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
flowchart TD flowchart TD
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C A[Christmas] ==> C
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
flowchart TD flowchart TD
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C A[Christmas] ==> C
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
classDiagram-v2 classDiagram-v2
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
@@ -182,8 +187,8 @@ classDiagram-v2
int id int id
test() test()
} }
</div> </pre>
<div class="mermaid2" style=""> <pre class="mermaid2" style="">
classDiagram-v2 classDiagram-v2
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01 &lt;&lt;interface&gt;&gt; Class01
@@ -209,8 +214,8 @@ classDiagram-v2
int id int id
test() test()
} }
</div> </pre>
<div class="mermaid" style=""> <pre class="mermaid" style="">
flowchart BT flowchart BT
subgraph S1 subgraph S1
sub1 -->sub2 sub1 -->sub2
@@ -220,6 +225,7 @@ flowchart BT
end end
S1 --> S2 S1 --> S2
sub1 --> sub4 sub1 --> sub4
</pre>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -245,7 +251,7 @@ flowchart BT
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

11
cypress/platform/regression/issue-1874.html
View File

@@ -8,23 +8,22 @@
startOnLoad: true, startOnLoad: true,
}); });
</script> </script>
</head> </head>
<body> <body>
<h1>Example</h1> <h1>Example</h1>
<div class="mermaid"> <pre class="mermaid">
%%{init:{"theme":"base", "sequence": {"mirrorActors":false},"themeVariables": {"actorBkg":"red"}}}%% %%{init:{"theme":"base", "sequence": {"mirrorActors":false},"themeVariables": {"actorBkg":"red"}}}%%
sequenceDiagram sequenceDiagram
Bert->>+Ernie: Start looking for the cookie! Bert->>+Ernie: Start looking for the cookie!
Ernie-->>-Bert: Found it! Ernie-->>-Bert: Found it!
Note left of Ernie: Cookies are good Note left of Ernie: Cookies are good
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {}}}%% %%{init:{"theme":"base", "themeVariables": {}}}%%
sequenceDiagram sequenceDiagram
Bert->>+Ernie: Start looking for the cookie! Bert->>+Ernie: Start looking for the cookie!
Ernie-->>-Bert: Found it! Ernie-->>-Bert: Found it!
Note left of Ernie: Cookies are good Note left of Ernie: Cookies are good
</div> </pre>
</body> </body>
</html> </html>

61
cypress/platform/showcase_base.html
View File

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

62
cypress/platform/showcase_base_dark.html
View File

@@ -1,12 +1,15 @@
<html> <html>
<head> <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 <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" 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> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@@ -18,7 +21,9 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@@ -40,7 +45,7 @@
<body> <body>
<h1>Showcases of diagrams</h1> <h1>Showcases of diagrams</h1>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="mermaid width height"> <pre class="mermaid width height">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@@ -55,8 +60,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -72,8 +77,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
sequenceDiagram sequenceDiagram
autonumber autonumber
par Action 1 par Action 1
@@ -89,8 +94,8 @@
loop Every minute loop Every minute
John-->Alice: Great! John-->Alice: Great!
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
classDiagram classDiagram
Animal "1" <|-- Duck Animal "1" <|-- Duck
Animal <|-- Fish Animal <|-- Fish
@@ -112,8 +117,8 @@ classDiagram
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
gantt gantt
dateFormat :YYYY-MM-DD dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@@ -141,8 +146,8 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@@ -168,9 +173,8 @@ gantt
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
SomethingElse --> [*] SomethingElse --> [*]
</pre>
</div> <pre class="mermaid width height2">
<div class="mermaid width height2">
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@@ -196,8 +200,8 @@ stateDiagram-v2
note right of SomethingElse2 : This is the note to the right. note right of SomethingElse2 : This is the note to the right.
SomethingElse2 --> [*] SomethingElse2 --> [*]
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@@ -207,8 +211,8 @@ stateDiagram-v2
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
journey journey
title My working day title My working day
section Go to work section Go to work
@@ -218,8 +222,8 @@ journey
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
@@ -257,8 +261,8 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre>
<div class="mermaid" class="width height"> <pre class="mermaid" class="width height">
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -301,6 +305,8 @@ gitGraph
merge main merge main
checkout develop checkout develop
merge release merge release
</pre>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -332,7 +338,7 @@ gitGraph
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

64
cypress/platform/showcase_dark.html
View File

@@ -1,23 +1,28 @@
<html> <html>
<head> <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 <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" 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> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
background:#333; background: #333;
font-family: 'Arial'; font-family: 'Arial';
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@@ -39,7 +44,7 @@
<body> <body>
<h1>Showcases of diagrams</h1> <h1>Showcases of diagrams</h1>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="mermaid width height"> <pre class="mermaid width height">
%%{init: {'theme': 'base', 'themeVariables':{'primaryColor': '#ff0000'}}%% %%{init: {'theme': 'base', 'themeVariables':{'primaryColor': '#ff0000'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -55,8 +60,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@@ -71,8 +76,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
sequenceDiagram sequenceDiagram
autonumber autonumber
par Action 1 par Action 1
@@ -88,8 +93,9 @@
loop Every minute loop Every minute
John-->Alice: Great! John-->Alice: Great!
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
%%{init: {'theme':'dark'}}%% %%{init: {'theme':'dark'}}%%
classDiagram classDiagram
@@ -113,8 +119,9 @@ classDiagram
+bool is_wild +bool is_wild
+run() +run()
} }
</div>
<div class="mermaid width height"> </pre>
<pre class="mermaid width height">
gantt gantt
dateFormat :YYYY-MM-DD dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@@ -142,8 +149,8 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@@ -168,8 +175,8 @@ gantt
Active --> SomethingElse Active --> SomethingElse
SomethingElse --> [*] SomethingElse --> [*]
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@@ -194,8 +201,8 @@ gantt
Active --> SomethingElse2 Active --> SomethingElse2
SomethingElse2 --> [*] SomethingElse2 --> [*]
note right of SomethingElse2 : This is the note to the right. note right of SomethingElse2 : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@@ -205,8 +212,8 @@ gantt
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
journey journey
title My working day title My working day
section Go to work section Go to work
@@ -216,8 +223,8 @@ gantt
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
@@ -255,8 +262,8 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre>
<div class="mermaid" class="width height"> <pre class="mermaid" class="width height">
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -299,6 +306,7 @@ gitGraph
merge main merge main
checkout develop checkout develop
merge release merge release
</pre>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -320,7 +328,7 @@ gitGraph
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

60
cypress/platform/showcase_default.html
View File

@@ -1,12 +1,15 @@
<html> <html>
<head> <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 <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" 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> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@@ -17,7 +20,9 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@@ -39,7 +44,7 @@
<body> <body>
<h1>Showcases of diagrams</h1> <h1>Showcases of diagrams</h1>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="mermaid width height"> <pre class="mermaid width height">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@@ -54,8 +59,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@@ -70,8 +75,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
sequenceDiagram sequenceDiagram
autonumber autonumber
par Action 1 par Action 1
@@ -87,8 +92,8 @@
loop Every minute loop Every minute
John-->Alice: Great! John-->Alice: Great!
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
classDiagram classDiagram
Animal "1" <|-- Duck Animal "1" <|-- Duck
Animal <|-- Fish Animal <|-- Fish
@@ -110,8 +115,8 @@ classDiagram
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
gantt gantt
dateFormat :YYYY-MM-DD dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@@ -139,8 +144,8 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@@ -164,8 +169,8 @@ gantt
Active --> SomethingElse Active --> SomethingElse
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@@ -189,8 +194,8 @@ gantt
Active --> SomethingElse2 Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right. note right of SomethingElse2 : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@@ -200,8 +205,8 @@ gantt
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
journey journey
title My working day title My working day
section Go to work section Go to work
@@ -211,8 +216,8 @@ gantt
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
@@ -250,8 +255,8 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre>
<div class="mermaid" style="width: 100%; height: 20%;"> <pre class="mermaid" style="width: 100%; height: 20%">
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -294,6 +299,7 @@ requirementDiagram
merge main merge main
checkout develop checkout develop
merge release merge release
</pre>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -315,7 +321,7 @@ requirementDiagram
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

60
cypress/platform/showcase_forest.html
View File

@@ -1,12 +1,15 @@
<html> <html>
<head> <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 <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" 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> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@@ -17,7 +20,9 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@@ -39,7 +44,7 @@
<body> <body>
<h1>Showcases of diagrams</h1> <h1>Showcases of diagrams</h1>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="mermaid width height"> <pre class="mermaid width height">
%%{init: {'theme': 'forest'}}%% %%{init: {'theme': 'forest'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -55,8 +60,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@@ -71,8 +76,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
sequenceDiagram sequenceDiagram
autonumber autonumber
par Action 1 par Action 1
@@ -88,8 +93,8 @@
loop Every minute loop Every minute
John-->Alice: Great! John-->Alice: Great!
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
%%{init: {'theme':'forest'}}%% %%{init: {'theme':'forest'}}%%
classDiagram classDiagram
@@ -113,8 +118,8 @@ classDiagram
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
gantt gantt
dateFormat :YYYY-MM-DD dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@@ -142,8 +147,8 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@@ -168,8 +173,8 @@ gantt
Active --> SomethingElse Active --> SomethingElse
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
SomethingElse --> [*] SomethingElse --> [*]
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@@ -193,8 +198,8 @@ gantt
Active --> SomethingElse2 Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right. note right of SomethingElse2 : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@@ -204,8 +209,8 @@ gantt
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
journey journey
title My working day title My working day
section Go to work section Go to work
@@ -215,8 +220,8 @@ gantt
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
@@ -254,8 +259,8 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre>
<div class="mermaid" class="width height"> <pre class="mermaid" class="width height">
gitGraph: gitGraph:
commit commit
branch hotfix branch hotfix
@@ -298,6 +303,7 @@ requirementDiagram
merge main merge main
checkout develop checkout develop
merge release merge release
</pre>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -319,7 +325,7 @@ requirementDiagram
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

61
cypress/platform/showcase_neutral.html
View File

@@ -1,12 +1,15 @@
<html> <html>
<head> <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 <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" 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> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@@ -17,7 +20,9 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1 { color: grey;} h1 {
color: grey;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@@ -39,7 +44,7 @@
<body> <body>
<h1>Showcases of diagrams</h1> <h1>Showcases of diagrams</h1>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="mermaid width height"> <pre class="mermaid width height">
%%{init: {'theme': 'neutral'}}%% %%{init: {'theme': 'neutral'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -55,8 +60,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@@ -71,8 +76,8 @@
F F
G G
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
sequenceDiagram sequenceDiagram
autonumber autonumber
par Action 1 par Action 1
@@ -88,8 +93,8 @@
loop Every minute loop Every minute
John-->Alice: Great! John-->Alice: Great!
end end
</div> </pre>
<div class="mermaid width height" > <pre class="mermaid width height">
%%{init: {'theme':'neutral'}}%% %%{init: {'theme':'neutral'}}%%
classDiagram classDiagram
@@ -113,8 +118,8 @@ classDiagram
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
gantt gantt
dateFormat :YYYY-MM-DD dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@@ -142,8 +147,8 @@ gantt
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h Add gantt diagram to demo page :20h
Add another diagram to demo page :48h Add another diagram to demo page :48h
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@@ -167,8 +172,8 @@ gantt
Active --> SomethingElse Active --> SomethingElse
note right of SomethingElse : This is the note to the right. note right of SomethingElse : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
stateDiagram-v2 stateDiagram-v2
[*] --> Active [*] --> Active
@@ -192,8 +197,8 @@ gantt
Active --> SomethingElse2 Active --> SomethingElse2
note right of SomethingElse2 : This is the note to the right. note right of SomethingElse2 : This is the note to the right.
</div> </pre>
<div class="mermaid width height2"> <pre class="mermaid width height2">
erDiagram erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
@@ -203,8 +208,8 @@ gantt
ORDER ||--|{ ORDER-ITEM : includes ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
journey journey
title My working day title My working day
section Go to work section Go to work
@@ -214,8 +219,8 @@ gantt
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<div class="mermaid width height"> <pre class="mermaid width height">
requirementDiagram requirementDiagram
requirement test_req { requirement test_req {
@@ -253,9 +258,9 @@ requirementDiagram
test_req - traces -> test_req2 test_req - traces -> test_req2
test_req - contains -> test_req3 test_req - contains -> test_req3
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre>
<div class="mermaid" class="width height"> <pre class="mermaid" class="width height">
gitGraph: gitGraph:
commit commit
branch hotfix branch hotfix
@@ -298,8 +303,8 @@ requirementDiagram
merge main merge main
checkout develop checkout develop
merge release merge release
</pre>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
@@ -320,7 +325,7 @@ requirementDiagram
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

26
cypress/platform/subgraph.html
View File

@@ -1,26 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
body { body {
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
subgraph 1test["id starting with number"] subgraph 1test["id starting with number"]
A A
end end
style 1test fill:#F99,stroke-width:2px,stroke:#F0F style 1test fill:#F99,stroke-width:2px,stroke:#F0F
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A.a[Christmas]:::someclass -->|Get money| B(Go shopping):::someclass A.a[Christmas]:::someclass -->|Get money| B(Go shopping):::someclass
subgraph test["id starting with number"] subgraph test["id starting with number"]
@@ -28,12 +28,12 @@
end end
style test fill:#F99,stroke-width:2px,stroke:#F0F style test fill:#F99,stroke-width:2px,stroke:#F0F
classDef someclass fill:#f96; classDef someclass fill:#f96;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
9e122290-->82072290_1ec3_e711_8c5a_005056ad0002 9e122290-->82072290_1ec3_e711_8c5a_005056ad0002
style 9e122290 fill:#F99,stroke-width:2px,stroke:#F0F style 9e122290 fill:#F99,stroke-width:2px,stroke:#F0F
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
function showFullFirstSquad(elemName) { function showFullFirstSquad(elemName) {
@@ -41,5 +41,5 @@
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

37
cypress/platform/theme-directives.html
View File

@@ -1,12 +1,15 @@
<html> <html>
<head> <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 <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" 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> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@@ -37,7 +40,7 @@
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="size"> <div class="size">
<h1>Default</h1> <h1>Default</h1>
<div class="mermaid" > <pre class="mermaid">
%%{init: { 'logLevel': 0, 'theme': 'default'} }%% %%{init: { 'logLevel': 0, 'theme': 'default'} }%%
graph TD graph TD
A(Start) --> B[/Another/] A(Start) --> B[/Another/]
@@ -46,11 +49,11 @@
B B
C C
end end
</div> </pre>
</div> </div>
<div class="size"> <div class="size">
<h1>Forest</h1> <h1>Forest</h1>
<div class="mermaid" > <pre class="mermaid">
%%{init: { 'logLevel': 1, 'theme': 'forest'} }%% %%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
graph TD graph TD
A(Start) --> B[/Another/] A(Start) --> B[/Another/]
@@ -59,11 +62,11 @@
B B
C C
end end
</div> </pre>
</div> </div>
<div class="size"> <div class="size">
<h1>Neutral</h1> <h1>Neutral</h1>
<div class="mermaid" > <pre class="mermaid">
%%{init: { 'logLevel': 1, 'theme': 'neutral'} }%% %%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
graph TD graph TD
A(Start) --> B[/Another/] A(Start) --> B[/Another/]
@@ -72,11 +75,11 @@
B B
C C
end end
</div> </pre>
</div> </div>
<div class="size dark"> <div class="size dark">
<h1>Dark</h1> <h1>Dark</h1>
<div class="mermaid"> <pre class="mermaid">
%%{init: { 'logLevel': 1, 'theme': 'dark'} }%% %%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
graph TD graph TD
A(Start) --> B[/Another/] A(Start) --> B[/Another/]
@@ -85,11 +88,11 @@
B B
C C
end end
</div> </pre>
</div> </div>
<div class="size"> <div class="size">
<h1>Base with overriding themeVariable</h1> <h1>Base with overriding themeVariable</h1>
<div class="mermaid"> <pre class="mermaid">
%%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%% %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
graph TD graph TD
@@ -99,11 +102,11 @@
B B
C C
end end
</div> </pre>
</div> </div>
<div class="size"> <div class="size">
<h1>Nothing set, should be Default</h1> <h1>Nothing set, should be Default</h1>
<div class="mermaid"> <pre class="mermaid">
%%{init: { 'logLevel': 1} }%% %%{init: { 'logLevel': 1} }%%
graph TD graph TD
@@ -113,7 +116,7 @@
B B
C C
end end
</div> </pre>
</div> </div>
</div> </div>
@@ -139,7 +142,7 @@
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

10
cypress/platform/user-journey.html
View File

@@ -1,14 +1,10 @@
<html> <html>
<head> <head>
<link <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<h1>User Journey</h1> <h1>User Journey</h1>
<div class="mermaid"> <pre class="mermaid">
journey journey
title Go shopping title Go shopping
@@ -28,7 +24,7 @@
Find keys:4: Mum Find keys:4: Mum
Get into car:4: Dad, Mum, Child 1, Child 2 Get into car:4: Dad, Mum, Child 1, Child 2
Drive home:3: Dad Drive home:3: Dad
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({

26
cypress/platform/vertices.html
View File

@@ -1,30 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
body { body {
font-family: 'trebuchet ms', verdana, arial; font-family: 'trebuchet ms', verdana, arial;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
info info
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
subgraph one subgraph one
1 1
end end
</div> </pre>
<!-- <div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A --> B --> C A --> B --> C
</div> --> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -33,5 +33,5 @@
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

23
cypress/platform/xss2.html
View File

@@ -1,15 +1,12 @@
<html> <html>
<head> <head>
<link <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<style> <style>
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@@ -33,24 +30,24 @@
</script> </script>
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
%%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%% %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
graph LR graph LR
A --> B A --> B
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
%%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%% %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
%%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%% %%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
graph LR graph LR
A --> B A --> B
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
%%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%% %%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%%
%%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%% %%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%%
sequenceDiagram sequenceDiagram
Alice->>Bob: Hi Bob Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice Bob->>Alice: Hi Alice
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({

22
cypress/platform/xss22.html
View File

@@ -1,16 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A --&gt; B["&lt;a href='javascript#9;t#colon;alert(document.location)'&gt;AAA&lt;/a&gt;"] A --&gt; B["&lt;a href='javascript#9;t#colon;alert(document.location)'&gt;AAA&lt;/a&gt;"]
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script>mermaid.initialize({ startOnLoad: true }); <script>
</script> mermaid.initialize({ startOnLoad: true });
</body> </script>
</body>
</html> </html>

16
cypress/platform/xss3.html
View File

@@ -1,15 +1,12 @@
<html> <html>
<head> <head>
<link <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<style> <style>
.malware { .malware {
position: fixed; position: fixed;
bottom:0; bottom: 0;
left:0; left: 0;
right:0; right: 0;
height: 150px; height: 150px;
background: red; background: red;
color: black; color: black;
@@ -33,11 +30,12 @@
</script> </script>
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
<!-- prettier-ignore -->
%%{init: { 'fontFamily': '\"></style><img src=x onerror=xssAttack()>'} }%% %%{init: { 'fontFamily': '\"></style><img src=x onerror=xssAttack()>'} }%%
graph LR graph LR
A --> B A --> B
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({

23
demos/classchart.html
View File

@@ -1,23 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
div.mermaid { div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */ /* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
</head> </head>
<body> <body>
<pre class="mermaid">
<div class="mermaid">
classDiagram classDiagram
title Animal Diagram title Animal Diagram
accDescription The animal class diagram accDescription The animal class diagram
@@ -41,7 +38,7 @@
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -56,7 +53,5 @@
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</body>
</body>
</html> </html>

22
demos/dataflowchart.html
View File

@@ -1,26 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
div.mermaid { div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */ /* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
</head> </head>
<body> <body>
<h2>Data Flow Diagram Example</h2> <h2>Data Flow Diagram Example</h2>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer]; DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
</div> </pre>
<h2>Borders Example</h2> <h2>Borders Example</h2>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
allSides[ stroke all sides ]; allSides[ stroke all sides ];
allSides2[|borders:ltrb| stroke all sides ]; allSides2[|borders:ltrb| stroke all sides ];
@@ -28,7 +28,7 @@
ltSides[|borders:lt| stroke left and top sides ]; ltSides[|borders:lt| stroke left and top sides ];
lrSides[|borders:lr| stroke left and right sides ]; lrSides[|borders:lr| stroke left and right sides ];
noSide[|borders:no| stroke no side ]; noSide[|borders:no| stroke no side ];
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -49,5 +49,5 @@
}, 100); }, 100);
} }
</script> </script>
</body> </body>
</html> </html>

35
demos/er.html
View File

@@ -1,33 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Mermaid Quick Test Page</title>
<title>Mermaid Quick Test Page</title> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <style>
<style>
div.mermaid { div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */ /* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
</head> </head>
<body> <body>
<pre class="mermaid">
<div class="mermaid">
erDiagram erDiagram
title This is a title title This is a title
accDescription Test a description accDescription Test a description
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
// themeCSS: '.node rect { fill: red; }', // themeCSS: '.node rect { fill: red; }',
@@ -38,8 +35,6 @@ CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
sequence: { actorMargin: 50 }, sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</body>
</body>
</html> </html>

204
demos/flowchart.html
View File

@@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Flowchart Test Page</title> <title>Mermaid Quick Flowchart Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
div.mermaid { div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */ /* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Comparison "graph vs. flowchart"</h1> <h1>Comparison "graph vs. flowchart"</h1>
<h2>Sample 1</h2> <h2>Sample 1</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1[" sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@@ -113,10 +113,10 @@
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4; sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1[" sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@@ -212,13 +212,13 @@
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4; sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</div> </pre>
<hr/> <hr />
<h2>Sample 2</h2> <h2>Sample 2</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
title What to buy title What to buy
accDescription Options of what to buy with Christmas money accDescription Options of what to buy with Christmas money
@@ -227,10 +227,10 @@
C -->|One| D[Laptop] C -->|One| D[Laptop]
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[Car] C -->|Three| F[Car]
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
title What to buy title What to buy
accDescription Options of what to buy with Christmas money accDescription Options of what to buy with Christmas money
@@ -239,13 +239,13 @@
C -->|One| D[Laptop] C -->|One| D[Laptop]
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[Car] C -->|Three| F[Car]
</div> </pre>
<hr/> <hr />
<h2>Sample 3</h2> <h2>Sample 3</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[/Christmas\] A[/Christmas\]
A -->|Get money| B[\Go shopping/] A -->|Get money| B[\Go shopping/]
@@ -253,10 +253,10 @@
C -->|One| D[/Laptop/] C -->|One| D[/Laptop/]
C -->|Two| E[\iPhone\] C -->|Two| E[\iPhone\]
C -->|Three| F[Car] C -->|Three| F[Car]
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
A[/Christmas\] A[/Christmas\]
A -->|Get money| B[\Go shopping/] A -->|Get money| B[\Go shopping/]
@@ -264,13 +264,13 @@
C -->|One| D[/Laptop/] C -->|One| D[/Laptop/]
C -->|Two| E[\iPhone\] C -->|Two| E[\iPhone\]
C -->|Three| F[Car] C -->|Three| F[Car]
</div> </pre>
<hr/> <hr />
<h2>Sample 4</h2> <h2>Sample 4</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget) 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget) 37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -292,10 +292,10 @@
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits) 39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails) 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails) 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget) 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget) 37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -317,13 +317,13 @@
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits) 39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails) 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails) 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</div> </pre>
<hr/> <hr />
<h2>Sample 5</h2> <h2>Sample 5</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment") 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1") 82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@@ -387,10 +387,10 @@
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment") 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1") 82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@@ -454,32 +454,32 @@
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</div> </pre>
<hr/> <hr />
<h2>Sample 6</h2> <h2>Sample 6</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
subgraph One subgraph One
a1-->a2 a1-->a2
end end
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
subgraph One subgraph One
a1-->a2 a1-->a2
end end
</div> </pre>
<hr/> <hr />
<h2>Sample 7</h2> <h2>Sample 7</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
A A
B B
@@ -507,10 +507,10 @@
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
A A
B B
@@ -538,13 +538,13 @@
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div> </pre>
<hr/> <hr />
<h2>Sample 8</h2> <h2>Sample 8</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check] 456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check] f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@@ -558,10 +558,10 @@
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
3000" 3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check] 456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check] f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@@ -575,13 +575,13 @@
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
3000" 3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</div> </pre>
<hr/> <hr />
<h2>Sample 9</h2> <h2>Sample 9</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}} B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
@@ -593,10 +593,10 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}} B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
@@ -608,13 +608,13 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<hr/> <hr />
<h2>Sample 10</h2> <h2>Sample 10</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A([stadium shape test]) A([stadium shape test])
A -->|Get money| B([Go shopping]) A -->|Get money| B([Go shopping])
@@ -627,10 +627,10 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
A([stadium shape test]) A([stadium shape test])
A -->|Get money| B([Go shopping]) A -->|Get money| B([Go shopping])
@@ -643,13 +643,13 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<hr/> <hr />
<h2>Sample 11</h2> <h2>Sample 11</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[[subroutine shape test]] A[[subroutine shape test]]
A -->|Get money| B[[Go shopping]] A -->|Get money| B[[Go shopping]]
@@ -662,10 +662,10 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A[[subroutine shape test]] A[[subroutine shape test]]
A -->|Get money| B[[Go shopping]] A -->|Get money| B[[Go shopping]]
@@ -678,13 +678,13 @@
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<hr/> <hr />
<h2>Sample 12</h2> <h2>Sample 12</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[(cylindrical<br />shape<br />test)] A[(cylindrical<br />shape<br />test)]
A -->|Get money| B1[(Go shopping 1)] A -->|Get money| B1[(Go shopping 1)]
@@ -701,10 +701,10 @@
click B testClick "click test" click B testClick "click test"
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A[(cylindrical<br />shape<br />test)] A[(cylindrical<br />shape<br />test)]
A -->|Get money| B1[(Go shopping 1)] A -->|Get money| B1[(Go shopping 1)]
@@ -721,13 +721,13 @@
click B testClick "click test" click B testClick "click test"
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
</div> </pre>
<hr/> <hr />
<h2>Sample 13</h2> <h2>Sample 13</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line) A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line) C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
@@ -738,10 +738,10 @@
linkStyle 0 stroke:DarkGray,stroke-width:2px linkStyle 0 stroke:DarkGray,stroke-width:2px
linkStyle 1 stroke:DarkGray,stroke-width:2px linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px linkStyle 2 stroke:DarkGray,stroke-width:2px
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line) A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line) C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
@@ -752,36 +752,36 @@
linkStyle 0 stroke:DarkGray,stroke-width:2px linkStyle 0 stroke:DarkGray,stroke-width:2px
linkStyle 1 stroke:DarkGray,stroke-width:2px linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px linkStyle 2 stroke:DarkGray,stroke-width:2px
</div> </pre>
<hr/> <hr />
<h2>Sample 14</h2> <h2>Sample 14</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A(( )) -->|step 1| B(( )) A(( )) -->|step 1| B(( ))
B(( )) -->|step 2| C(( )) B(( )) -->|step 2| C(( ))
C(( )) -->|step 3| D(( )) C(( )) -->|step 3| D(( ))
linkStyle 1 stroke:greenyellow,stroke-width:2px linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px style C fill:greenyellow,stroke:green,stroke-width:4px
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A(( )) -->|step 1| B(( )) A(( )) -->|step 1| B(( ))
B(( )) -->|step 2| C(( )) B(( )) -->|step 2| C(( ))
C(( )) -->|step 3| D(( )) C(( )) -->|step 3| D(( ))
linkStyle 1 stroke:greenyellow,stroke-width:2px linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px style C fill:greenyellow,stroke:green,stroke-width:4px
</div> </pre>
<hr/> <hr />
<h2>Sample 15</h2> <h2>Sample 15</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
TITLE["Link Click Events<br>(click the nodes below)"] TITLE["Link Click Events<br>(click the nodes below)"]
A["link test (open in same tab)"] A["link test (open in same tab)"]
@@ -797,10 +797,10 @@
click D "mailto:user@user.user" "mailto test" click D "mailto:user@user.user" "mailto test"
click E "notes://do-your-thing/id" "other protocol test" click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test" click F "javascript:alert('test')" "script test"
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
TITLE["Link Click Events<br>(click the nodes below)"] TITLE["Link Click Events<br>(click the nodes below)"]
A["link test (open in same tab)"] A["link test (open in same tab)"]
@@ -816,13 +816,13 @@
click D "mailto:user@user.user" "mailto test" click D "mailto:user@user.user" "mailto test"
click E "notes://do-your-thing/id" "other protocol test" click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test" click F "javascript:alert('test')" "script test"
</div> </pre>
<hr/> <hr />
<h2>Sample 16</h2> <h2>Sample 16</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[red<br>text] -->|red<br>text| B(blue<br>text) A[red<br>text] -->|red<br>text| B(blue<br>text)
C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text} C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
@@ -836,10 +836,10 @@
style D stroke:#0000ff,fill:#ccccff,color:#0000ff style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "flowchart.html#link-clicked" "link test" click B "flowchart.html#link-clicked" "link test"
click D testClick "click test" click D testClick "click test"
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A[red<br>text] -->|red<br>text| B(blue<br>text) A[red<br>text] -->|red<br>text| B(blue<br>text)
C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text} C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
@@ -853,13 +853,13 @@
style D stroke:#0000ff,fill:#ccccff,color:#0000ff style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "flowchart.html#link-clicked" "link test" click B "flowchart.html#link-clicked" "link test"
click D testClick "click test" click D testClick "click test"
</div> </pre>
<hr/> <hr />
<h2>Sample 17</h2> <h2>Sample 17</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[myClass1] --> B[default] & C[default] A[myClass1] --> B[default] & C[default]
B[default] & C[default] --> D[myClass2] B[default] & C[default] --> D[myClass2]
@@ -869,10 +869,10 @@
classDef myClass2 stroke:#0000ff,fill:#ccccff classDef myClass2 stroke:#0000ff,fill:#ccccff
class A myClass1 class A myClass1
class D myClass2 class D myClass2
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TD flowchart TD
A[myClass1] --> B[default] & C[default] A[myClass1] --> B[default] & C[default]
B[default] & C[default] --> D[myClass2] B[default] & C[default] --> D[myClass2]
@@ -882,13 +882,13 @@
classDef myClass2 stroke:#0000ff,fill:#ccccff classDef myClass2 stroke:#0000ff,fill:#ccccff
class A myClass1 class A myClass1
class D myClass2 class D myClass2
</div> </pre>
<hr/> <hr />
<h2>Sample 18</h2> <h2>Sample 18</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A1[red text] -->|default style| A2[blue text] A1[red text] -->|default style| A2[blue text]
B1(red text) -->|default style| B2(blue text) B1(red text) -->|default style| B2(blue text)
@@ -933,10 +933,10 @@
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A1[red text] <-->|default style| A2[blue text] A1[red text] <-->|default style| A2[blue text]
B1(red text) <-->|default style| B2(blue text) B1(red text) <-->|default style| B2(blue text)
@@ -981,13 +981,13 @@
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</div> </pre>
<hr/> <hr />
<h2>Sample 19</h2> <h2>Sample 19</h2>
<h3>graph</h3> <h3>graph</h3>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
A1[red text] -->|default style| A2[blue text] A1[red text] -->|default style| A2[blue text]
B1(red text) -->|default style| B2(blue text) B1(red text) -->|default style| B2(blue text)
@@ -1032,10 +1032,10 @@
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</div> </pre>
<h3>flowchart</h3> <h3>flowchart</h3>
<div class="mermaid"> <pre class="mermaid">
flowchart TB flowchart TB
A1[red text] <-->|default style| A2[blue text] A1[red text] <-->|default style| A2[blue text]
B1(red text) <-->|default style| B2(blue text) B1(red text) <-->|default style| B2(blue text)
@@ -1083,9 +1083,9 @@
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</div> </pre>
<hr/> <hr />
<h1 id="link-clicked">Anchor for "link-clicked" test</h1> <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
@@ -1108,5 +1108,5 @@
}, 100); }, 100);
} }
</script> </script>
</body> </body>
</html> </html>

39
demos/gantt.html
View File

@@ -1,22 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Mermaid Quick Test Page</title>
<title>Mermaid Quick Test Page</title> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <style>
<style>
div.mermaid { div.mermaid {
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- accDescription Tasks for Q4 -->
<!-- accDescription Tasks for Q4 --> <pre class="mermaid">
<div class="mermaid">
gantt gantt
title A Gantt Diagram title A Gantt Diagram
accDescription Remaining Q4 Tasks accDescription Remaining Q4 Tasks
@@ -27,17 +25,18 @@ gantt
section Another section Another
Task in sec :2014-01-12 , 12d Task in sec :2014-01-12 , 12d
another task : 24d another task : 24d
</div>
<script src="./mermaid.js"></script>
<script> </pre
>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({ mermaid.initialize({
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
gantt: { axisFormat: '%m/%d/%Y' }, gantt: { axisFormat: '%m/%d/%Y' },
}); });
</script> </script>
</body>
</body>
</html> </html>

207
demos/index.html
View File

@@ -1,27 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
div.mermaid { div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */ /* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
info info
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
C4Context C4Context
title System Context diagram for Internet Banking System title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") { Enterprise_Boundary(b0, "BankBoundary0") {
@@ -64,9 +63,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
C4Container C4Container
title Container diagram for Internet Banking System title Container diagram for Internet Banking System
@@ -103,11 +102,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
UpdateRelStyle(backend_api, email_system, $offsetY="-60") UpdateRelStyle(backend_api, email_system, $offsetY="-60")
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS") Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140") UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
</pre>
<pre class="mermaid">
</div>
<div class="mermaid">
C4Component C4Component
title Component diagram for Internet Banking System - API Application title Component diagram for Internet Banking System - API Application
@@ -144,10 +141,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10") UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
UpdateRelStyle(security, db, $offsetY="-40") UpdateRelStyle(security, db, $offsetY="-40")
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40") UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
</pre>
</div> <pre class="mermaid">
<div class="mermaid">
C4Dynamic C4Dynamic
title Dynamic diagram for Internet Banking System - API Application title Dynamic diagram for Internet Banking System - API Application
@@ -164,9 +160,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40") UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60") UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10") UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
C4Deployment C4Deployment
title Deployment Diagram for Internet Banking System - Live title Deployment Diagram for Internet Banking System - Live
@@ -215,11 +211,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5") UpdateRelStyle(api, db, $offsetY="-20", $offsetX="5")
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20") UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
UpdateRelStyle(db, db2, $offsetY="-10") UpdateRelStyle(db, db2, $offsetY="-10")
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
pie pie
title Key elements in Product X title Key elements in Product X
accDescription This is a pie chart showing the key elements in Product X. accDescription This is a pie chart showing the key elements in Product X.
@@ -227,9 +223,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
"Potassium" : 50.05 "Potassium" : 50.05
"Magnesium" : 10.01 "Magnesium" : 10.01
"Iron" : 5 "Iron" : 5
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
title Airworks roadmap title Airworks roadmap
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@@ -244,8 +240,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
section Airworks 3.4.2 section Airworks 3.4.2
开发 :a, 2021-10-09, 4d 开发 :a, 2021-10-09, 4d
测试 :after a, 4d 测试 :after a, 4d
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
title Exclusive end dates (Manual date should end on 3d) title Exclusive end dates (Manual date should end on 3d)
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@@ -253,8 +249,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
section Section1 section Section1
2 Days: 1, 2019-01-01,2d 2 Days: 1, 2019-01-01,2d
Manual Date: 2, 2019-01-01,2019-01-03 Manual Date: 2, 2019-01-01,2019-01-03
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
title Inclusive end dates (Manual date should end on 4th) title Inclusive end dates (Manual date should end on 4th)
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@@ -263,8 +259,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
section Section1 section Section1
2 Days: 1, 2019-01-01,2d 2 Days: 1, 2019-01-01,2d
Manual Date: 2, 2019-01-01,2019-01-03 Manual Date: 2, 2019-01-01,2019-01-03
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
title Hide today marker (vertical line should not be visible) title Hide today marker (vertical line should not be visible)
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@@ -272,8 +268,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
todayMarker off todayMarker off
section Section1 section Section1
Today: 1, -1h Today: 1, -1h
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
title Style today marker (vertical line should be 5px wide and half-transparent blue) title Style today marker (vertical line should be 5px wide and half-transparent blue)
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@@ -281,11 +277,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5 todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
section Section1 section Section1
Today: 1, -1h Today: 1, -1h
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1[" sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@@ -381,16 +377,16 @@ Enterprise_Boundary(b0, "BankBoundary0") {
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4; sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22; sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssssx<br />sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss} B --> C{Let me thinksssssx<br />sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
C -->|One| D[Laptop] C -->|One| D[Laptop]
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[Car] C -->|Three| F[Car]
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[/Christmas\] A[/Christmas\]
A -->|Get money| B[\Go shopping/] A -->|Get money| B[\Go shopping/]
@@ -398,8 +394,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
C -->|One| D[/Laptop/] C -->|One| D[/Laptop/]
C -->|Two| E[\iPhone\] C -->|Two| E[\iPhone\]
C -->|Three| F[Car] C -->|Three| F[Car]
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget) 47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget) 37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@@ -421,8 +417,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits) 39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails) 35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails) 36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment") 9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1") 82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
@@ -486,14 +482,14 @@ Enterprise_Boundary(b0, "BankBoundary0") {
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002 9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
subgraph One subgraph One
a1-->a2 a1-->a2
end end
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
A A
B B
@@ -521,8 +517,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check] 456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check] f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
@@ -536,8 +532,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
3000" 3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}} B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
@@ -549,8 +545,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A([stadium shape test]) A([stadium shape test])
A -->|Get money| B([Go shopping]) A -->|Get money| B([Go shopping])
@@ -563,8 +559,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[[subroutine shape test]] A[[subroutine shape test]]
A -->|Get money| B[[Go shopping]] A -->|Get money| B[[Go shopping]]
@@ -577,8 +573,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
class C someclass; class C someclass;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[(cylindrical<br />shape<br />test)] A[(cylindrical<br />shape<br />test)]
A -->|Get money| B1[(Go shopping 1)] A -->|Get money| B1[(Go shopping 1)]
@@ -595,8 +591,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
click B testClick "click test" click B testClick "click test"
classDef someclass fill:#f96; classDef someclass fill:#f96;
class A someclass; class A someclass;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line) A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
C1[Multi<br />Line] -->|Multi<br />Line| D1(Multi<br />Line) C1[Multi<br />Line] -->|Multi<br />Line| D1(Multi<br />Line)
@@ -607,16 +603,16 @@ Enterprise_Boundary(b0, "BankBoundary0") {
linkStyle 0 stroke:DarkGray,stroke-width:2px linkStyle 0 stroke:DarkGray,stroke-width:2px
linkStyle 1 stroke:DarkGray,stroke-width:2px linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px linkStyle 2 stroke:DarkGray,stroke-width:2px
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A(( )) -->|step 1| B(( )) A(( )) -->|step 1| B(( ))
B(( )) -->|step 2| C(( )) B(( )) -->|step 2| C(( ))
C(( )) -->|step 3| D(( )) C(( )) -->|step 3| D(( ))
linkStyle 1 stroke:greenyellow,stroke-width:2px linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px style C fill:greenyellow,stroke:green,stroke-width:4px
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TB graph TB
TITLE["Link Click Events<br>(click the nodes below)"] TITLE["Link Click Events<br>(click the nodes below)"]
A["link test (open in same tab)"] A["link test (open in same tab)"]
@@ -632,9 +628,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
click D "mailto:user@user.user" "mailto test" click D "mailto:user@user.user" "mailto test"
click E "notes://do-your-thing/id" "other protocol test" click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test" click F "javascript:alert('test')" "script test"
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A[red<br>text] -->|red<br>text| B(blue<br>text) A[red<br>text] -->|red<br>text| B(blue<br>text)
C[/red<br />text/] -->|blue<br />text| D{blue<br />text} C[/red<br />text/] -->|blue<br />text| D{blue<br />text}
@@ -648,8 +644,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
style D stroke:#0000ff,fill:#ccccff,color:#0000ff style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "index.html#link-clicked" "link test" click B "index.html#link-clicked" "link test"
click D testClick "click test" click D testClick "click test"
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[myClass1] --> B[default] & C[default] A[myClass1] --> B[default] & C[default]
B[default] & C[default] --> D[myClass2] B[default] & C[default] --> D[myClass2]
@@ -659,11 +655,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
classDef myClass2 stroke:#0000ff,fill:#ccccff classDef myClass2 stroke:#0000ff,fill:#ccccff
class A myClass1 class A myClass1
class D myClass2 class D myClass2
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
sequenceDiagram sequenceDiagram
accDescription Hello friends accDescription Hello friends
participant Alice participant Alice
@@ -696,8 +692,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
and and
Alice -->> John: Parallel message 2 Alice -->> John: Parallel message 2
end end
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
sequenceDiagram sequenceDiagram
participant 1 as multiline<br>using #lt;br#gt; participant 1 as multiline<br>using #lt;br#gt;
participant 2 as multiline<br />using #lt;br/#gt; participant 2 as multiline<br />using #lt;br/#gt;
@@ -711,8 +707,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
note right of 4: multiline<br />using #lt;br /#gt; note right of 4: multiline<br />using #lt;br /#gt;
4->>1: multiline<br />using #lt;br /#gt; 4->>1: multiline<br />using #lt;br /#gt;
note right of 1: multiline<br />using #lt;br /#gt; note right of 1: multiline<br />using #lt;br /#gt;
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
sequenceDiagram sequenceDiagram
autonumber autonumber
Alice->>John: Hello John,<br>how are you? Alice->>John: Hello John,<br>how are you?
@@ -721,11 +717,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
John-->>Alice: Hi Alice,<br />I can hear you! John-->>Alice: Hi Alice,<br />I can hear you!
autonumber off autonumber off
John-->>Alice: I feel great! John-->>Alice: I feel great!
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@@ -762,8 +758,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
Describe gantt syntax :after doc1, 3d Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@@ -793,11 +789,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
Describe gantt syntax : after doc1, 3d Describe gantt syntax : after doc1, 3d
Add gantt diagram to demo page : 20h Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h Add another diagram to demo page : 48h
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
gitGraph: gitGraph:
options options
{ {
@@ -815,11 +811,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
commit commit
commit commit
merge newbranch merge newbranch
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
@@ -841,9 +837,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
int id int id
size() size()
} }
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
class Class01~T~ class Class01~T~
Class01 : #size() Class01 : #size()
@@ -854,9 +850,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
int id int id
size() size()
} }
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
Class01~T~ <|-- AveryLongClass : Cool Class01~T~ <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01 &lt;&lt;interface&gt;&gt; Class01
@@ -877,22 +873,22 @@ Enterprise_Boundary(b0, "BankBoundary0") {
int id int id
size() size()
} }
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
Interface1 ()-- Interface1Impl Interface1 ()-- Interface1Impl
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
direction LR direction LR
Animal ()-- Dog Animal ()-- Dog
Dog : bark() Dog : bark()
Dog : species() Dog : species()
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
direction RL direction RL
Fruit ()-- Apple Fruit ()-- Apple
@@ -902,25 +898,25 @@ Enterprise_Boundary(b0, "BankBoundary0") {
Pineapple : color() Pineapple : color()
Pineapple : -int leafCount() Pineapple : -int leafCount()
Pineapple : -int spikeCount() Pineapple : -int spikeCount()
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
stateDiagram stateDiagram
accDescription This is a state diagram showing one state accDescription This is a state diagram showing one state
State1 State1
</div> </pre>
<hr> <hr />
<div class="mermaid"> <pre class="mermaid">
stateDiagram stateDiagram
[*] --> First [*] --> First
state First { state First {
[*] --> second [*] --> second
second --> [*] second --> [*]
} }
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
stateDiagram stateDiagram
State1: The state with a note State1: The state with a note
note right of State1 note right of State1
@@ -929,18 +925,18 @@ Enterprise_Boundary(b0, "BankBoundary0") {
end note end note
State1 --> State2 State1 --> State2
note left of State2 : This is the note to the left. note left of State2 : This is the note to the left.
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
stateDiagram stateDiagram
State1 State1
note right of State1 note right of State1
Line1<br>Line2<br />Line3<br />Line4<br />Line5 Line1<br>Line2<br />Line3<br />Line4<br />Line5
end note end note
</div> </pre>
<hr /> <hr />
<div class="mermaid"> <pre class="mermaid">
requirementDiagram requirementDiagram
requirement An Example { requirement An Example {
@@ -1007,8 +1003,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
test_req4 - derives -> test_req5 test_req4 - derives -> test_req5
test_req5 - refines -> test_req6 test_req5 - refines -> test_req6
test_entity3 - verifies -> test_req5 test_entity3 - verifies -> test_req5
An Example <- copies - test_entity2 </div> An Example <- copies - test_entity2
</div> </pre>
<h1 id="link-clicked">Anchor for "link-clicked" test</h1> <h1 id="link-clicked">Anchor for "link-clicked" test</h1>
@@ -1097,6 +1093,5 @@ Enterprise_Boundary(b0, "BankBoundary0") {
testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend'); testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend'); testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
</script> </script>
</body> </body>
</html> </html>

21
demos/journey.html
View File

@@ -1,21 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
div.mermaid { div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */ /* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
journey journey
title My day title My day
accDescription A user journey diagram of a typical day in my life accDescription A user journey diagram of a typical day in my life
@@ -26,7 +25,7 @@
section Go home section Go home
Go downstairs: 5: Me Go downstairs: 5: Me
Sit down: 5: Me Sit down: 5: Me
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -39,7 +38,5 @@
sequence: { actorMargin: 50 }, sequence: { actorMargin: 50 },
}); });
</script> </script>
</body>
</body>
</html> </html>

24
demos/requirements.html
View File

@@ -1,23 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
div.mermaid { div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */ /* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
</head> </head>
<body> <body>
<pre class="mermaid">
<div class="mermaid">
requirementDiagram requirementDiagram
title This is a title title This is a title
requirement test_req { requirement test_req {
@@ -85,7 +82,8 @@
test_req5 - refines -> test_req6 test_req5 - refines -> test_req6
test_entity3 - verifies -> test_req5 test_entity3 - verifies -> test_req5
test_req <- copies - test_entity2 test_req <- copies - test_entity2
</div> </pre
>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -100,7 +98,5 @@
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</body>
</body>
</html> </html>

23
demos/sequence.html
View File

@@ -1,23 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
div.mermaid { div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */ /* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
</head> </head>
<body> <body>
<pre class="mermaid">
<div class="mermaid">
sequenceDiagram sequenceDiagram
title: FancySequenceDiagram title: FancySequenceDiagram
accDescription Test a description accDescription Test a description
@@ -56,7 +53,7 @@
and and
Alice -->> John: Parallel message 2 Alice -->> John: Parallel message 2
end end
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -71,7 +68,5 @@
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</body>
</body>
</html> </html>

27
demos/state.html
View File

@@ -1,35 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title> <title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style> <style>
div.mermaid { div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */ /* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important; font-family: 'Courier New', Courier, monospace !important;
} }
</style> </style>
</head> </head>
<body> <body>
<pre class="mermaid">
<div class="mermaid">
stateDiagram stateDiagram
title This is a title title This is a title
accDescription This is an accessible description accDescription This is an accessible description
State1 State1
</div> </pre>
<div class="mermaid"> <pre class="mermaid">
stateDiagram-v2 stateDiagram-v2
title This is a title title This is a title
accDescription This is an accessible description accDescription This is an accessible description
State1 State1
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@@ -44,7 +41,5 @@
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });
</script> </script>
</body>
</body>
</html> </html>

23
docs/classDiagram.md
View File

@@ -146,13 +146,14 @@ To describe the visibility (or encapsulation) of an attribute or method/function
- `~` Package/Internal - `~` Package/Internal
> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()`: > _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()`:
>
> - `*` Abstract e.g.: `someAbstractMethod()*` > - `*` Abstract e.g.: `someAbstractMethod()*`
> - `$` Static e.g.: `someStaticMethod()$` > - `$` Static e.g.: `someStaticMethod()$`
> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name: > _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name:
>
> - `$` Static e.g.: `String someField$` > - `$` Static e.g.: `String someField$`
## Defining Relationship ## Defining Relationship
A relationship is a general term covering the specific types of logical connections found on class and object diagrams. A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
@@ -234,7 +235,6 @@ Here is the syntax:
Where `Relation Type` can be one of: Where `Relation Type` can be one of:
| Type | Description | | Type | Description |
| ---- | ----------- | | ---- | ----------- |
| <\| | Inheritance | | <\| | Inheritance |
@@ -355,7 +355,7 @@ classDiagram
} }
Student "1" --o "1" IdCard : carries Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides Student "1" --o "1" Bike : rides
``` ```
## Interaction ## Interaction
@@ -368,6 +368,7 @@ action className "reference" "tooltip"
click className call callback() "tooltip" click className call callback() "tooltip"
click className href "url" "tooltip" click className href "url" "tooltip"
``` ```
- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called - _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
- _className_ is the id of the node that the action will be associated with - _className_ is the id of the node that the action will be associated with
- _reference_ is either the url link, or the function name for callback. - _reference_ is either the url link, or the function name for callback.
@@ -422,7 +423,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
```html ```html
<body> <body>
<div class="mermaid"> <pre class="mermaid">
classDiagram classDiagram
Animal <|-- Duck Animal <|-- Duck
Animal <|-- Fish Animal <|-- Fish
@@ -447,7 +448,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
callback Duck callback "Tooltip" callback Duck callback "Tooltip"
link Zebra "https://www.github.com" "This is a link" link Zebra "https://www.github.com" "This is a link"
</div> </pre>
<script> <script>
var callback = function () { var callback = function () {
@@ -455,7 +456,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
}; };
var config = { var config = {
startOnLoad: true, startOnLoad: true,
securityLevel: 'loose' securityLevel: 'loose',
}; };
mermaid.initialize(config); mermaid.initialize(config);
</script> </script>
@@ -470,10 +471,10 @@ It is possible to apply specific styles such as a thicker border or a different
```html ```html
<style> <style>
.cssClass > rect{ .cssClass > rect {
fill:#FF0000; fill: #ff0000;
stroke:#FFFF00; stroke: #ffff00;
stroke-width:4px; stroke-width: 4px;
} }
</style> </style>
``` ```
@@ -509,7 +510,7 @@ classDiagram
?> cssClasses cannot be added using this shorthand method at the same time as a relation statement. ?> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. ***Coming soon!*** ?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. **_Coming soon!_**
### Default Styles ### Default Styles

64
docs/diagrams-and-syntax-and-examples/flowchart.md
View File

@@ -25,12 +25,11 @@ graph LR
Possible FlowChart orientations are: Possible FlowChart orientations are:
* TB - top to bottom - TB - top to bottom
* TD - top-down (same as top to bottom) - TD - top-down (same as top to bottom)
* BT - bottom to top - BT - bottom to top
* RL - right to left - RL - right to left
* LR - left to right - LR - left to right
## Flowcharts ## Flowcharts
@@ -38,7 +37,7 @@ This renders a flowchart that allows for features such as: more arrow types, mul
Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts. Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts.
> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).** > **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
## Nodes and shapes ## Nodes and shapes
@@ -105,7 +104,8 @@ graph LR
graph LR graph LR
id1>This is the text in the box] id1>This is the text in the box]
``` ```
Currently it is only possible to render the shape above, and not its mirror. *This might change with future releases.*
Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._
### A node (rhombus) ### A node (rhombus)
@@ -127,6 +127,7 @@ graph LR
graph TD graph TD
id1[/This is the text in the box/] id1[/This is the text in the box/]
``` ```
### Parallelogram alt ### Parallelogram alt
```mermaid-example ```mermaid-example
@@ -140,6 +141,7 @@ graph TD
graph TD graph TD
A[/Christmas\] A[/Christmas\]
``` ```
### Trapezoid alt ### Trapezoid alt
```mermaid-example ```mermaid-example
@@ -224,23 +226,28 @@ graph LR
### Chaining of links ### Chaining of links
It is possible to declare many links on the same line as per below: It is possible to declare many links on the same line as per below:
```mermaid-example ```mermaid-example
graph LR graph LR
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C
``` ```
It is also possible to declare multiple nodes links in the same line as per below: It is also possible to declare multiple nodes links in the same line as per below:
```mermaid-example ```mermaid-example
graph LR graph LR
a --> b & c--> d a --> b & c--> d
``` ```
You can then describe dependencies in a very expressive way. Like the one-liner below: You can then describe dependencies in a very expressive way. Like the one-liner below:
```mermaid-example ```mermaid-example
graph TB graph TB
A & B--> C & D A & B--> C & D
``` ```
If you describe the same diagram using the the basic syntax, it will take four lines: If you describe the same diagram using the the basic syntax, it will take four lines:
```mmd ```mmd
graph TB graph TB
A --> C A --> C
@@ -248,6 +255,7 @@ graph TB
B --> C B --> C
B --> D B --> D
``` ```
A word of warning, one could go overboard with this, making the graph harder to read in A word of warning, one could go overboard with this, making the graph harder to read in
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little. markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well. This goes for expressive syntaxes as well.
@@ -313,7 +321,7 @@ For dotted or thick links, the characters to add are equals signs or dots,
as summed up in the following table: as summed up in the following table:
| Length | 1 | 2 | 3 | | Length | 1 | 2 | 3 |
|-------------------|:------:|:-------:|:--------:| | ----------------- | :----: | :-----: | :------: |
| Normal | `---` | `----` | `-----` | | Normal | `---` | `----` | `-----` |
| Normal with arrow | `-->` | `--->` | `---->` | | Normal with arrow | `-->` | `--->` | `---->` |
| Thick | `===` | `====` | `=====` | | Thick | `===` | `====` | `=====` |
@@ -361,7 +369,7 @@ graph TB
subgraph three subgraph three
c1-->c2 c1-->c2
end end
``` ```
You can also set an explicit id for the subgraph: You can also set an explicit id for the subgraph:
@@ -371,7 +379,7 @@ graph TB
subgraph ide1 [one] subgraph ide1 [one]
a1-->a2 a1-->a2
end end
``` ```
## Flowcharts ## Flowcharts
@@ -392,7 +400,7 @@ flowchart TB
one --> two one --> two
three --> two three --> two
two --> c2 two --> c2
``` ```
## Interaction ## Interaction
@@ -403,8 +411,8 @@ click nodeId callback
click nodeId call callback() click nodeId call callback()
``` ```
* nodeId is the id of the node - nodeId is the id of the node
* `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter. - `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter.
```html ```html
<script> <script>
@@ -428,11 +436,13 @@ graph LR;
click A call callback() "Tooltip for a callback" click A call callback() "Tooltip for a callback"
click B href "https://www.github.com" "This is a tooltip for a link" click B href "https://www.github.com" "This is a tooltip for a link"
``` ```
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2. > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/). ?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported): Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
```mermaid-example ```mermaid-example
graph LR; graph LR;
A-->B; A-->B;
@@ -449,7 +459,7 @@ Beginner's tip—here's a full example of using interactive links in HTML:
```html ```html
<body> <body>
<div class="mermaid"> <pre class="mermaid">
graph LR; graph LR;
A-->B; A-->B;
B-->C; B-->C;
@@ -458,7 +468,7 @@ Beginner's tip—here's a full example of using interactive links in HTML:
click B "https://www.github.com" "This is a link" click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip" click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link" click D href "https://www.github.com" "This is a link"
</div> </pre>
<script> <script>
var callback = function () { var callback = function () {
@@ -469,9 +479,9 @@ Beginner's tip—here's a full example of using interactive links in HTML:
flowchart: { flowchart: {
useMaxWidth: true, useMaxWidth: true,
htmlLabels: true, htmlLabels: true,
curve: 'cardinal' curve: 'cardinal',
}, },
securityLevel: 'loose' securityLevel: 'loose',
}; };
mermaid.initialize(config); mermaid.initialize(config);
</script> </script>
@@ -532,7 +542,6 @@ graph LR
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
``` ```
#### Classes #### Classes
More convenient than defining the style every time is to define a class of styles and attach this class reference to multiple nodes. More convenient than defining the style every time is to define a class of styles and attach this class reference to multiple nodes.
@@ -563,7 +572,6 @@ graph LR
classDef someclass fill:#f96; classDef someclass fill:#f96;
``` ```
### Css classes ### Css classes
It is also possible to predefine classes in css styles that can be applied from the graph definition: It is also possible to predefine classes in css styles that can be applied from the graph definition:
@@ -572,8 +580,8 @@ It is also possible to predefine classes in css styles that can be applied from
```css ```css
.cssClass > rect { .cssClass > rect {
fill: #FF0000; fill: #ff0000;
stroke: #FFFF00; stroke: #ffff00;
stroke-width: 4px; stroke-width: 4px;
} }
``` ```
@@ -587,7 +595,6 @@ graph LR;
class A cssClass; class A cssClass;
``` ```
### Default class ### Default class
If a class is named `default` it will be assigned to all nodes that do not have a specific class definition. If a class is named `default` it will be assigned to all nodes that do not have a specific class definition.
@@ -596,7 +603,6 @@ If a class is named `default` it will be assigned to all nodes that do not have
classDef default fill:#f9f,stroke:#333,stroke-width:4px; classDef default fill:#f9f,stroke:#333,stroke-width:4px;
``` ```
## Basic support for fontawesome ## Basic support for fontawesome
It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#. It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#.
@@ -609,12 +615,11 @@ graph TD
B-->E(A fa:fa-camera-retro perhaps?); B-->E(A fa:fa-camera-retro perhaps?);
``` ```
## Graph declarations with spaces between vertices and link and without semicolon ## Graph declarations with spaces between vertices and link and without semicolon
* After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations. - After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.
* A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability. - A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability.
Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges. Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges.
@@ -626,7 +631,6 @@ graph LR
C -->|Two| E[Result two] C -->|Two| E[Result two]
``` ```
## Configuration... ## Configuration...
Is it possible to adjust the width of the rendered flowchart. Is it possible to adjust the width of the rendered flowchart.
@@ -636,6 +640,6 @@ In Javascript config parameters can be set by using `mermaid.flowchartConfig`:
```javascript ```javascript
mermaid.flowchartConfig = { mermaid.flowchartConfig = {
width: '100%' width: '100%',
} };
``` ```

68
docs/flowchart.md
View File

@@ -6,7 +6,7 @@ All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, th
It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs. It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).** > **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
### A node (default) ### A node (default)
@@ -50,11 +50,11 @@ flowchart LR
Possible FlowChart orientations are: Possible FlowChart orientations are:
* TB - top to bottom - TB - top to bottom
* TD - top-down/ same as top to bottom - TD - top-down/ same as top to bottom
* BT - bottom to top - BT - bottom to top
* RL - right to left - RL - right to left
* LR - left to right - LR - left to right
## Node shapes ## Node shapes
@@ -99,7 +99,8 @@ flowchart LR
flowchart LR flowchart LR
id1>This is the text in the box] id1>This is the text in the box]
``` ```
Currently only the shape above is possible and not its mirror. *This might change with future releases.*
Currently only the shape above is possible and not its mirror. _This might change with future releases._
### A node (rhombus) ### A node (rhombus)
@@ -109,6 +110,7 @@ flowchart LR
``` ```
### A hexagon node ### A hexagon node
```mermaid-example ```mermaid-example
flowchart LR flowchart LR
id1{{This is the text in the box}} id1{{This is the text in the box}}
@@ -134,6 +136,7 @@ flowchart TD
flowchart TD flowchart TD
A[/Christmas\] A[/Christmas\]
``` ```
### Trapezoid alt ### Trapezoid alt
```mermaid-example ```mermaid-example
@@ -225,26 +228,31 @@ flowchart LR
### Chaining of links ### Chaining of links
It is possible declare many links in the same line as per below: It is possible declare many links in the same line as per below:
```mermaid-example ```mermaid-example
flowchart LR flowchart LR
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C
``` ```
It is also possible to declare multiple nodes links in the same line as per below: It is also possible to declare multiple nodes links in the same line as per below:
```mermaid-example ```mermaid-example
flowchart LR flowchart LR
a --> b & c--> d a --> b & c--> d
``` ```
You can then describe dependencies in a very expressive way. Like the one-liner below: You can then describe dependencies in a very expressive way. Like the one-liner below:
```mermaid-example ```mermaid-example
flowchart TB flowchart TB
A & B--> C & D A & B--> C & D
``` ```
If you describe the same diagram using the the basic syntax, it will take four lines. A If you describe the same diagram using the the basic syntax, it will take four lines. A
word of warning, one could go overboard with this making the flowchart harder to read in word of warning, one could go overboard with this making the flowchart harder to read in
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little. markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well. This goes for expressive syntaxes as well.
```mmd ```mmd
flowchart TB flowchart TB
A --> C A --> C
@@ -263,7 +271,6 @@ flowchart LR
B --x C B --x C
``` ```
### Multi directional arrows ### Multi directional arrows
There is the possibility to use multidirectional arrows. There is the possibility to use multidirectional arrows.
@@ -315,7 +322,7 @@ For dotted or thick links, the characters to add are equals signs or dots,
as summed up in the following table: as summed up in the following table:
| Length | 1 | 2 | 3 | | Length | 1 | 2 | 3 |
|-------------------|:------:|:-------:|:--------:| | ----------------- | :----: | :-----: | :------: |
| Normal | `---` | `----` | `-----` | | Normal | `---` | `----` | `-----` |
| Normal with arrow | `-->` | `--->` | `---->` | | Normal with arrow | `-->` | `--->` | `---->` |
| Thick | `===` | `====` | `=====` | | Thick | `===` | `====` | `=====` |
@@ -365,9 +372,9 @@ flowchart TB
subgraph three subgraph three
c1-->c2 c1-->c2
end end
``` ```
You can also set an explicit id for the subgraph. You can also set an explicit id for the subgraph.
```mermaid-example ```mermaid-example
flowchart TB flowchart TB
@@ -375,7 +382,7 @@ flowchart TB
subgraph ide1 [one] subgraph ide1 [one]
a1-->a2 a1-->a2
end end
``` ```
## flowcharts ## flowcharts
@@ -396,9 +403,9 @@ flowchart TB
one --> two one --> two
three --> two three --> two
two --> c2 two --> c2
``` ```
## Direction in subgraphs ## Direction in subgraphs
With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example. With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
@@ -417,7 +424,7 @@ flowchart LR
end end
A --> TOP --> B A --> TOP --> B
B1 --> B2 B1 --> B2
``` ```
## Interaction ## Interaction
@@ -428,8 +435,8 @@ click nodeId callback
click nodeId call callback() click nodeId call callback()
``` ```
* nodeId is the id of the node - nodeId is the id of the node
* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter. - callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
Examples of tooltip usage below: Examples of tooltip usage below:
@@ -459,6 +466,7 @@ flowchart LR
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/). ?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported): Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
```mermaid-example ```mermaid-example
flowchart LR flowchart LR
A-->B A-->B
@@ -472,9 +480,10 @@ flowchart LR
``` ```
Beginner's tip—a full example using interactive links in a html context: Beginner's tip—a full example using interactive links in a html context:
```html ```html
<body> <body>
<div class="mermaid"> <pre class="mermaid">
flowchart LR flowchart LR
A-->B A-->B
B-->C B-->C
@@ -483,7 +492,7 @@ Beginner's tip—a full example using interactive links in a html context:
click B "https://www.github.com" "This is a link" click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip" click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link" click D href "https://www.github.com" "This is a link"
</div> </pre>
<script> <script>
var callback = function () { var callback = function () {
@@ -492,7 +501,7 @@ Beginner's tip—a full example using interactive links in a html context:
var config = { var config = {
startOnLoad: true, startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' }, flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
securityLevel:'loose' securityLevel: 'loose',
}; };
mermaid.initialize(config); mermaid.initialize(config);
</script> </script>
@@ -550,7 +559,6 @@ flowchart LR
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
``` ```
#### Classes #### Classes
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
@@ -558,7 +566,6 @@ should have a different look.
a class definition looks like the example below: a class definition looks like the example below:
``` ```
classDef className fill:#f9f,stroke:#333,stroke-width:4px; classDef className fill:#f9f,stroke:#333,stroke-width:4px;
``` ```
@@ -583,7 +590,6 @@ flowchart LR
classDef someclass fill:#f96; classDef someclass fill:#f96;
``` ```
### Css classes ### Css classes
It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
@@ -593,10 +599,10 @@ below:
```html ```html
<style> <style>
.cssClass > rect{ .cssClass > rect {
fill:#FF0000; fill: #ff0000;
stroke:#FFFF00; stroke: #ffff00;
stroke-width:4px; stroke-width: 4px;
} }
</style> </style>
``` ```
@@ -610,7 +616,6 @@ flowchart LR;
class A cssClass class A cssClass
``` ```
### Default class ### Default class
If a class is named default it will be assigned to all classes without specific class definitions. If a class is named default it will be assigned to all classes without specific class definitions.
@@ -619,7 +624,6 @@ If a class is named default it will be assigned to all classes without specific
classDef default fill:#f9f,stroke:#333,stroke-width:4px; classDef default fill:#f9f,stroke:#333,stroke-width:4px;
``` ```
## Basic support for fontawesome ## Basic support for fontawesome
It is possible to add icons from fontawesome. It is possible to add icons from fontawesome.
@@ -636,12 +640,11 @@ flowchart TD
?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome. ?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
## Graph declarations with spaces between vertices and link and without semicolon ## Graph declarations with spaces between vertices and link and without semicolon
* In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph. - In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
* A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability. - A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.
Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges. Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
@@ -653,7 +656,6 @@ flowchart LR
C -->|Two| E[Result two] C -->|Two| E[Result two]
``` ```
## Configuration... ## Configuration...
Is it possible to adjust the width of the rendered flowchart. Is it possible to adjust the width of the rendered flowchart.

104
docs/gantt.md
View File

@@ -2,18 +2,17 @@
> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project. > A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
## A note to users ## A note to users
Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.
Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.
It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task. It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task.
As shown here ![](./img/Gantt-excluded-days-within.png) As shown here ![](./img/Gantt-excluded-days-within.png)
However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.
As shown here ![](./img/Gantt-long-weekend-look.png)
However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates. A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
As shown here ![](./img/Gantt-long-weekend-look.png)
A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs. Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.
@@ -75,18 +74,17 @@ It is possible to set multiple dependencies separated by space:
### Title ### Title
The `title` is an *optional* string to be displayed at the top of the Gantt chart to describe the chart as a whole. The `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.
### Section statements ### Section statements
You can divide the chart into various sections, for example to separate different parts of a project like development and documentation. You can divide the chart into various sections, for example to separate different parts of a project like development and documentation.
To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is *required*. To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is _required_.
### Milestones ### Milestones
You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2. You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: _initial date_+_duration_/2.
```mermaid-example ```mermaid-example
gantt gantt
@@ -98,14 +96,13 @@ taska3 : 5min
Final milestone : milestone, m2, 18:14, 2min Final milestone : milestone, m2, 18:14, 2min
``` ```
## Setting dates ## Setting dates
`dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`. `dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.
### Input date format ### Input date format
The default input date format is `YYYY-MM-DD`. You can define your custom ``dateFormat``. The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`.
``` ```
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@@ -140,7 +137,7 @@ More info in: https://momentjs.com/docs/#/parsing/string-format/
### Output date format on the axis ### Output date format on the axis
The default output date format is YYYY-MM-DD. You can define your custom ``axisFormat``, like `2020-Q1` for the first quarter of the year 2020. The default output date format is YYYY-MM-DD. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020.
``` ```
axisFormat %Y-%m-%d axisFormat %Y-%m-%d
@@ -201,19 +198,17 @@ Styling of the a gantt diagram is done by defining a number of css classes. Duri
### Classes used ### Classes used
Class | Description | Class | Description |
--- | --- | --------------------- | ---------------------------------------------------------------------- |
grid.tick | Styling for the Grid Lines | grid.tick | Styling for the Grid Lines |
grid.path | Styling for the Grid's borders | grid.path | Styling for the Grid's borders |
.taskText | Task Text Styling | .taskText | Task Text Styling |
.taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. | .taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. |
.taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left. | .taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left. |
todayMarker | Toggle and Styling for the "Today Marker" | todayMarker | Toggle and Styling for the "Today Marker" |
### Sample stylesheet ### Sample stylesheet
```css ```css
.grid .tick { .grid .tick {
stroke: lightgrey; stroke: lightgrey;
@@ -226,11 +221,11 @@ todayMarker | Toggle and Styling for the "Today Marker"
#tag { #tag {
color: white; color: white;
background: #FA283D; background: #fa283d;
width: 150px; width: 150px;
position: absolute; position: absolute;
display: none; display: none;
padding:3px 6px; padding: 3px 6px;
margin-left: -80px; margin-left: -80px;
font-size: 11px; font-size: 11px;
} }
@@ -244,20 +239,20 @@ todayMarker | Toggle and Styling for the "Today Marker"
position: absolute; position: absolute;
width: 0; width: 0;
border-width: 10px; border-width: 10px;
border-bottom-color: #FA283D; border-bottom-color: #fa283d;
top: -20px; top: -20px;
} }
.taskText { .taskText {
fill:white; fill: white;
text-anchor:middle; text-anchor: middle;
} }
.taskTextOutsideRight { .taskTextOutsideRight {
fill:black; fill: black;
text-anchor:start; text-anchor: start;
} }
.taskTextOutsideLeft { .taskTextOutsideLeft {
fill:black; fill: black;
text-anchor:end; text-anchor: end;
} }
``` ```
@@ -286,20 +281,20 @@ mermaid.ganttConfig can be set to a JSON string with config parameters or the co
```javascript ```javascript
mermaid.ganttConfig = { mermaid.ganttConfig = {
titleTopMargin:25, titleTopMargin: 25,
barHeight:20, barHeight: 20,
barGap:4, barGap: 4,
topPadding:75, topPadding: 75,
sidePadding:75 sidePadding: 75,
} };
``` ```
### Possible configuration params: ### Possible configuration params:
Param | Description | Default value | Param | Description | Default value |
--- | --- | --- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false | mirrorActor | Turns on/off the rendering of actors below the diagram as well as above it | false |
bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists.|1 | bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 |
## Interaction ## Interaction
@@ -310,13 +305,14 @@ click taskId call callback(arguments)
click taskId href URL click taskId href URL
``` ```
* taskId is the id of the task - taskId is the id of the task
* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified. - callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
Beginner's tip—a full example using interactive links in an html context: Beginner's tip—a full example using interactive links in an html context:
```html ```html
<body> <body>
<div class="mermaid"> <pre class="mermaid">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
@@ -328,18 +324,18 @@ Beginner's tip—a full example using interactive links in an html context:
click cl1 href "https://mermaidjs.github.io/" click cl1 href "https://mermaidjs.github.io/"
click cl2 call printArguments("test1", "test2", test3) click cl2 call printArguments("test1", "test2", test3)
click cl3 call printTask() click cl3 call printTask()
</div> </pre>
<script> <script>
var printArguments = function(arg1, arg2, arg3) { var printArguments = function (arg1, arg2, arg3) {
alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3); alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
} };
var printTask = function(taskId) { var printTask = function (taskId) {
alert('taskId: ' + taskId); alert('taskId: ' + taskId);
} };
var config = { var config = {
startOnLoad:true, startOnLoad: true,
securityLevel:'loose', securityLevel: 'loose',
}; };
mermaid.initialize(config); mermaid.initialize(config);
</script> </script>

11
docs/index.html
View File

@@ -17,7 +17,10 @@
/> />
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> --> <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
<link rel="stylesheet" href="theme.css" /> <link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"> <link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
/>
<script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js"></script> <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js"></script>
<!-- <script src="http://localhost:9000/mermaid.js"></script> --> <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<script> <script>
@@ -108,8 +111,7 @@
} }
if (lang === 'mermaid' || lang === 'mermaid-example') { if (lang === 'mermaid' || lang === 'mermaid-example') {
resultingHTML += '<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>';
'<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>';
} }
if (resultingHTML !== '') { if (resultingHTML !== '') {
@@ -134,7 +136,8 @@
while (!window.hasOwnProperty('monaco')) while (!window.hasOwnProperty('monaco'))
await new Promise((resolve) => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
colorizeEverything(html).then( colorizeEverything(html).then(
(newHTML) => (document.querySelector('article.markdown-section').innerHTML = newHTML) (newHTML) =>
(document.querySelector('article.markdown-section').innerHTML = newHTML)
); );
})(); })();
}); });

31
docs/n00b-gettingStarted.md
View File

@@ -89,25 +89,26 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
</body> </body>
``` ```
**b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:** **b. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
```html ```html
<body> <body>
Here is a mermaid diagram: Here is a mermaid diagram:
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Client] --> B[Load Balancer] A[Client] --> B[Load Balancer]
B --> C[Server01] B --> C[Server01]
B --> D[Server02] B --> D[Server02]
</div> </pre
>
</body> </body>
``` ```
**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<div>` tags. **Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<pre>` tags.
**c. The `mermaid.initialize()` call.** **c. The `mermaid.initialize()` call.**
`mermaid.initialize()` call takes all the definitions contained in all the `<div class="mermaid">` tags that it finds in the html body and renders them into diagrams. Example: `mermaid.initialize()` call takes all the definitions contained in all the `<pre class="mermaid">` tags that it finds in the html body and renders them into diagrams. Example:
```html ```html
<body> <body>
@@ -139,21 +140,23 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
</script> </script>
Here is one mermaid diagram: Here is one mermaid diagram:
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Client] --> B[Load Balancer] A[Client] --> B[Load Balancer]
B --> C[Server1] B --> C[Server1]
B --> D[Server2] B --> D[Server2]
</div> </pre
>
And here is another: And here is another:
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Client] -->|tcp_123| B A[Client] -->|tcp_123| B
B(Load Balancer) B(Load Balancer)
B -->|tcp_456| C[Server1] B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2] B -->|tcp_456| D[Server2]
</div> </pre
>
</body> </body>
</html> </html>
``` ```
@@ -167,18 +170,20 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
<meta charset="utf-8" /> <meta charset="utf-8" />
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A --- B A --- B
B-->C[fa:fa-ban forbidden] B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner); B-->D(fa:fa-spinner);
</div> </pre
<div class="mermaid"> >
<pre class="mermaid">
graph TD graph TD
A[Client] --> B[Load Balancer] A[Client] --> B[Load Balancer]
B --> C[Server1] B --> C[Server1]
B --> D[Server2] B --> D[Server2]
</div> </pre
>
<script src="The\Path\In\Your\Package\mermaid.js"></script> <script src="The\Path\In\Your\Package\mermaid.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: true }); mermaid.initialize({ startOnLoad: true });

13
docs/n00b-overview.md
View File

@@ -22,25 +22,24 @@ It is a relatively straightforward solution to a significant hurdle with the sof
**Mermaid text definitions can be saved for later reuse and editing.** **Mermaid text definitions can be saved for later reuse and editing.**
>These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`. > These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`.
```html ```html
<div class="mermaid"> <pre class="mermaid">
graph TD graph TD
A[Client] --> B[Load Balancer] A[Client] --> B[Load Balancer]
B --> C[Server01] B --> C[Server01]
B --> D[Server02] B --> D[Server02]
</div> </pre>
``` ```
**render** **render**
>This is the core function of the Mermaid API. It reads all the `Mermaid Definitions` inside `div` tags and returns an SVG file, based on the definition. > This is the core function of the Mermaid API. It reads all the `Mermaid Definitions` inside `div` tags and returns an SVG file, based on the definition.
**Nodes** **Nodes**
>These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference) > These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference)
## Advantages of using Mermaid ## Advantages of using Mermaid
@@ -57,13 +56,13 @@ Mermaid solves this by reducing the time and effort required to create diagrams
Because, the text base for the diagrams allows it to be updated easily. Also, it can be made part of production scripts (and other pieces of code). So less time is spent on documenting, as a separate task. Because, the text base for the diagrams allows it to be updated easily. Also, it can be made part of production scripts (and other pieces of code). So less time is spent on documenting, as a separate task.
## Catching up with Development ## Catching up with Development
Being based on markdown, Mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render diagrams, at much faster speeds. Being based on markdown, Mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render diagrams, at much faster speeds.
In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials available in the internet. In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials available in the internet.
## Mermaid is for everyone. ## Mermaid is for everyone.
Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid.live/). Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid.live/).
Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs. Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs.

124
docs/usage.md
View File

@@ -1,4 +1,4 @@
# Usage # Usage
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md) **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
@@ -39,30 +39,34 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
**Hosting mermaid on a web page.** **Hosting mermaid on a web page.**
>Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md) > Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
The easiest way to integrate mermaid on a web page requires three elements: The easiest way to integrate mermaid on a web page requires three elements:
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example: 1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
```html ```html
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
``` ```
2. The `mermaidAPI` call, in a separate `script` tag. Example: 2. The `mermaidAPI` call, in a separate `script` tag. Example:
```html ```html
<script>mermaid.initialize({startOnLoad:true}); <script>
mermaid.initialize({ startOnLoad: true });
</script> </script>
``` ```
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example: 3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
```html
<div class="mermaid"> ```html
<pre class="mermaid">
graph LR graph LR
A --- B A --- B
B-->C[fa:fa-ban forbidden] B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner); B-->D(fa:fa-spinner);
</div> </pre>
``` ```
**Following these directions, mermaid starts at page load and (when the page has loaded) it will **Following these directions, mermaid starts at page load and (when the page has loaded) it will
locate the graph definitions inside the `div` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.** locate the graph definitions inside the `div` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.**
@@ -72,41 +76,42 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
</head> </head>
<body> <body>
<div class="mermaid"> <pre class="mermaid">
graph LR graph LR
A --- B A --- B
B-->C[fa:fa-ban forbidden] B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner); B-->D(fa:fa-spinner);
</div> </pre>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true}); <script>
</script> mermaid.initialize({ startOnLoad: true });
</body> </script>
</body>
</html> </html>
``` ```
## Notes: ## Notes:
An id attribute is also added to mermaid tags without one. An id attribute is also added to mermaid tags without one.
Mermaid can load multiple diagrams, in the same page. Mermaid can load multiple diagrams, in the same page.
> Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.) > Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
## Enabling Click Event and Tags in Nodes ## Enabling Click Event and Tags in Nodes
A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use. A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
**It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.** **It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
## securityLevel ## securityLevel
| Parameter | Description | Type | Required | Values | | Parameter | Description | Type | Required | Values |
| ------------- | --------------------------------- | ------ | -------- | ------------------------- | | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
| securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' | | securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
Values: Values:
@@ -116,7 +121,6 @@ Values:
- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled - **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc. - **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
```note ```note
This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled. This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
**sandbox** security level is still in the beta version. **sandbox** security level is still in the beta version.
@@ -128,18 +132,17 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, unle
```javascript ```javascript
mermaidAPI.initialize({ mermaidAPI.initialize({
securityLevel: 'loose' securityLevel: 'loose',
}); });
``` ```
### Labels out of bounds ### Labels out of bounds
If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
whole page to load (dom + assets, particularly the fonts file). whole page to load (dom + assets, particularly the fonts file).
```javascript ```javascript
$(document).load(function() { $(document).load(function () {
mermaid.initialize(); mermaid.initialize();
}); });
``` ```
@@ -147,7 +150,7 @@ $(document).load(function() {
or or
```javascript ```javascript
$(document).ready(function() { $(document).ready(function () {
mermaid.initialize(); mermaid.initialize();
}); });
``` ```
@@ -177,13 +180,13 @@ finer-grained control of this behavior, you can call `init` yourself with:
Example: Example:
```javascript ```javascript
mermaid.init({noteMargin: 10}, ".someOtherClass"); mermaid.init({ noteMargin: 10 }, '.someOtherClass');
``` ```
Or with no config object, and a jQuery selection: Or with no config object, and a jQuery selection:
```javascript ```javascript
mermaid.init(undefined, $("#someId .yetAnotherClass")); mermaid.init(undefined, $('#someId .yetAnotherClass'));
``` ```
```warning ```warning
@@ -194,7 +197,6 @@ This type of integration is deprecated. Instead the preferred way of handling mo
mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo). mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
## API usage ## API usage
The main idea of the API is to be able to call a render function with the graph definition as a string. The render function The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
@@ -207,14 +209,19 @@ The example below show an outline of how this could be used. The example just lo
<script src="mermaid.js"></script> <script src="mermaid.js"></script>
<script> <script>
mermaid.mermaidAPI.initialize({ startOnLoad:false }); $(function(){ // Example of using the API var mermaid.mermaidAPI.initialize({ startOnLoad: false });
element = document.querySelector("#graphDiv"); var insertSvg = function(svgCode, bindFunctions){ $(function () {
element.innerHTML = svgCode; }; var graphDefinition = 'graph TB\na-->b'; var graph = // Example of using the API var
mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); }); element = document.querySelector('#graphDiv');
var insertSvg = function (svgCode, bindFunctions) {
element.innerHTML = svgCode;
};
var graphDefinition = 'graph TB\na-->b';
var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
});
</script> </script>
``` ```
### Binding events ### Binding events
Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must
@@ -224,9 +231,9 @@ The example code below is an extract of what mermaid does when using the API. Th
bind events to an SVG when using the API for rendering. bind events to an SVG when using the API for rendering.
```javascript ```javascript
var insertSvg = function(svgCode, bindFunctions) { var insertSvg = function (svgCode, bindFunctions) {
element.innerHTML = svgCode; element.innerHTML = svgCode;
if(typeof callback !== 'undefined'){ if (typeof callback !== 'undefined') {
callback(id); callback(id);
} }
bindFunctions(element); bindFunctions(element);
@@ -234,8 +241,7 @@ var insertSvg = function(svgCode, bindFunctions) {
var id = 'theGraph'; var id = 'theGraph';
mermaidAPI.render(id, txt, insertSvg, element);
mermaidAPI.render(id,txt,insertSvg, element);
``` ```
1. The graph is generated using the render call. 1. The graph is generated using the render call.
@@ -244,7 +250,6 @@ mermaidAPI.render(id,txt,insertSvg, element);
4. Insert the SVG code into the DOM for presentation. 4. Insert the SVG code into the DOM for presentation.
5. Call the binding function that binds the events. 5. Call the binding function that binds the events.
## Example of a marked renderer ## Example of a marked renderer
This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html. This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html.
@@ -252,11 +257,11 @@ This is the renderer used for transforming the documentation from Markdown to ht
```javascript ```javascript
var renderer = new marked.Renderer(); var renderer = new marked.Renderer();
renderer.code = function (code, language) { renderer.code = function (code, language) {
if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){ if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
return '<div class="mermaid">'+code+'</div>'; <pre class="mermaid">' + code + '</div>';
} } else {
else{ return '<pre><code>' + code + '</code>
return '<pre><code>'+code+'</code></pre>'; return '</pre>';
} }
}; };
``` ```
@@ -276,14 +281,14 @@ module.exports = (options) ->
if not hasMermaid if not hasMermaid
hasMermaid = true hasMermaid = true
html += '<script src="'+options.mermaidPath+'"></script>' html += '<script src="'+options.mermaidPath+'"></script>'
html + '<div class="mermaid">'+code+'</div>' html + '<div class="mermaid">'+code+'
</pre>'
else else
@defaultCode(code, language) @defaultCode(code, language)
renderer renderer
``` ```
## Advanced usage ## Advanced usage
**Syntax validation without rendering (Work in Progress)** **Syntax validation without rendering (Work in Progress)**
@@ -299,38 +304,37 @@ function in order to handle the error in an application-specific way.
The code-example below in meta code illustrates how this could work: The code-example below in meta code illustrates how this could work:
```javascript ```javascript
mermaid.parseError = function(err,hash){ mermaid.parseError = function (err, hash) {
displayErrorInGui(err); displayErrorInGui(err);
}; };
var textFieldUpdated = function(){ var textFieldUpdated = function () {
var textStr = getTextFromFormField('code'); var textStr = getTextFromFormField('code');
if(mermaid.parse(textStr)){ if (mermaid.parse(textStr)) {
reRender(textStr) reRender(textStr);
} }
}; };
bindEventHandler('change', 'code', textFieldUpdated); bindEventHandler('change', 'code', textFieldUpdated);
``` ```
**Alternative to mermaid.parse():** **Alternative to mermaid.parse():**
One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version. One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
## Configuration ## Configuration
Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of
setting the options in mermaid. setting the options in mermaid.
1. Instantiation of the configuration using the initialize call 1. Instantiation of the configuration using the initialize call
2. *Using the global mermaid object* - **Deprecated** 2. _Using the global mermaid object_ - **Deprecated**
3. *using the global mermaid_config object* - **Deprecated** 3. _using the global mermaid_config object_ - **Deprecated**
4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated** 4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated**
The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
configuration objects are described [in the mermaidAPI documentation](Setup.md). configuration objects are described [in the mermaidAPI documentation](Setup.md).
## Using the `mermaidAPI.initialize`/`mermaid.initialize` call ## Using the `mermaidAPI.initialize`/`mermaid.initialize` call
The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPI depending The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPI depending
@@ -339,7 +343,7 @@ on what kind of integration you use.
```html ```html
<script src="../dist/mermaid.js"></script> <script src="../dist/mermaid.js"></script>
<script> <script>
var config = { startOnLoad:true, flowchart:{ useMaxWidth:false, htmlLabels:true } }; var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
mermaid.initialize(config); mermaid.initialize(config);
</script> </script>
``` ```
@@ -355,8 +359,8 @@ This is the preferred way of configuring mermaid.
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are: approach are:
* mermaid.startOnLoad - mermaid.startOnLoad
* mermaid.htmlLabels - mermaid.htmlLabels
```javascript ```javascript
mermaid.startOnLoad = true; mermaid.startOnLoad = true;
@@ -371,8 +375,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i
It is possible to set some configuration via the mermaid object. The two parameters that are supported using this It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
approach are: approach are:
* mermaid_config.startOnLoad - mermaid_config.startOnLoad
* mermaid_config.htmlLabels - mermaid_config.htmlLabels
```javascript ```javascript
mermaid_config.startOnLoad = true; mermaid_config.startOnLoad = true;
@@ -386,8 +390,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i
To set some configuration via the mermaid object. The two parameters that are supported using this approach are: To set some configuration via the mermaid object. The two parameters that are supported using this approach are:
* mermaid_config.startOnLoad - mermaid_config.startOnLoad
* mermaid_config.htmlLabels - mermaid_config.htmlLabels
```javascript ```javascript
mermaid_config.startOnLoad = true; mermaid_config.startOnLoad = true;

11
package.json
View File

@@ -29,8 +29,8 @@
"postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > docs/Setup.md", "postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > docs/Setup.md",
"build:watch": "yarn build:dev --watch", "build:watch": "yarn build:dev --watch",
"release": "yarn build", "release": "yarn build",
"lint": "eslint --cache ./ --ext .js,.json,.html,.md", "lint": "eslint --cache --ignore-path .gitignore .; prettier --check .",
"lint:fix": "yarn lint --fix", "lint:fix": "eslint --fix --ignore-path .gitignore .; prettier --write .",
"e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js", "e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
"cypress": "cypress run", "cypress": "cypress run",
"cypress:open": "cypress open", "cypress:open": "cypress open",
@@ -83,6 +83,8 @@
"@types/dompurify": "^2.3.3", "@types/dompurify": "^2.3.3",
"@types/jest": "^28.1.7", "@types/jest": "^28.1.7",
"@types/stylis": "^4.0.2", "@types/stylis": "^4.0.2",
"@typescript-eslint/eslint-plugin": "^5.36.1",
"@typescript-eslint/parser": "^5.36.1",
"babel-jest": "^29.0.1", "babel-jest": "^29.0.1",
"babel-loader": "^8.2.2", "babel-loader": "^8.2.2",
"concurrently": "^7.0.0", "concurrently": "^7.0.0",
@@ -91,15 +93,14 @@
"cypress": "9.7.0", "cypress": "9.7.0",
"cypress-image-snapshot": "^4.0.1", "cypress-image-snapshot": "^4.0.1",
"documentation": "13.2.0", "documentation": "13.2.0",
"eslint": "^8.4.1", "eslint": "^8.23.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-cypress": "^2.12.1", "eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-html": "^7.1.0", "eslint-plugin-html": "^7.1.0",
"eslint-plugin-jest": "^27.0.1", "eslint-plugin-jest": "^27.0.1",
"eslint-plugin-jsdoc": "^39.1.0", "eslint-plugin-jsdoc": "^39.1.0",
"eslint-plugin-json": "^3.1.0", "eslint-plugin-json": "^3.1.0",
"eslint-plugin-markdown": "^3.0.0", "eslint-plugin-markdown": "^3.0.0",
"eslint-plugin-prettier": "^4.0.0",
"husky": "^8.0.0", "husky": "^8.0.0",
"identity-obj-proxy": "^3.0.0", "identity-obj-proxy": "^3.0.0",
"jest": "^28.0.3", "jest": "^28.0.3",

104
yarn.lock
View File

@@ -2795,6 +2795,31 @@
dependencies: dependencies:
"@types/node" "*" "@types/node" "*"
"@typescript-eslint/eslint-plugin@^5.36.1":
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.36.1.tgz#471f64dc53600025e470dad2ca4a9f2864139019"
integrity sha512-iC40UK8q1tMepSDwiLbTbMXKDxzNy+4TfPWgIL661Ym0sD42vRcQU93IsZIrmi+x292DBr60UI/gSwfdVYexCA==
dependencies:
"@typescript-eslint/scope-manager" "5.36.1"
"@typescript-eslint/type-utils" "5.36.1"
"@typescript-eslint/utils" "5.36.1"
debug "^4.3.4"
functional-red-black-tree "^1.0.1"
ignore "^5.2.0"
regexpp "^3.2.0"
semver "^7.3.7"
tsutils "^3.21.0"
"@typescript-eslint/parser@^5.36.1":
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.36.1.tgz#931c22c7bacefd17e29734628cdec8b2acdcf1ce"
integrity sha512-/IsgNGOkBi7CuDfUbwt1eOqUXF9WGVBW9dwEe1pi+L32XrTsZIgmDFIi2RxjzsvB/8i+MIf5JIoTEH8LOZ368A==
dependencies:
"@typescript-eslint/scope-manager" "5.36.1"
"@typescript-eslint/types" "5.36.1"
"@typescript-eslint/typescript-estree" "5.36.1"
debug "^4.3.4"
"@typescript-eslint/scope-manager@5.10.1": "@typescript-eslint/scope-manager@5.10.1":
version "5.10.1" version "5.10.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.10.1.tgz#f0539c73804d2423506db2475352a4dec36cd809" resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.10.1.tgz#f0539c73804d2423506db2475352a4dec36cd809"
@@ -2803,11 +2828,34 @@
"@typescript-eslint/types" "5.10.1" "@typescript-eslint/types" "5.10.1"
"@typescript-eslint/visitor-keys" "5.10.1" "@typescript-eslint/visitor-keys" "5.10.1"
"@typescript-eslint/scope-manager@5.36.1":
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.36.1.tgz#23c49b7ddbcffbe09082e6694c2524950766513f"
integrity sha512-pGC2SH3/tXdu9IH3ItoqciD3f3RRGCh7hb9zPdN2Drsr341zgd6VbhP5OHQO/reUqihNltfPpMpTNihFMarP2w==
dependencies:
"@typescript-eslint/types" "5.36.1"
"@typescript-eslint/visitor-keys" "5.36.1"
"@typescript-eslint/type-utils@5.36.1":
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.36.1.tgz#016fc2bff6679f54c0b2df848a493f0ca3d4f625"
integrity sha512-xfZhfmoQT6m3lmlqDvDzv9TiCYdw22cdj06xY0obSznBsT///GK5IEZQdGliXpAOaRL34o8phEvXzEo/VJx13Q==
dependencies:
"@typescript-eslint/typescript-estree" "5.36.1"
"@typescript-eslint/utils" "5.36.1"
debug "^4.3.4"
tsutils "^3.21.0"
"@typescript-eslint/types@5.10.1": "@typescript-eslint/types@5.10.1":
version "5.10.1" version "5.10.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.10.1.tgz#dca9bd4cb8c067fc85304a31f38ec4766ba2d1ea" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.10.1.tgz#dca9bd4cb8c067fc85304a31f38ec4766ba2d1ea"
integrity sha512-ZvxQ2QMy49bIIBpTqFiOenucqUyjTQ0WNLhBM6X1fh1NNlYAC6Kxsx8bRTY3jdYsYg44a0Z/uEgQkohbR0H87Q== integrity sha512-ZvxQ2QMy49bIIBpTqFiOenucqUyjTQ0WNLhBM6X1fh1NNlYAC6Kxsx8bRTY3jdYsYg44a0Z/uEgQkohbR0H87Q==
"@typescript-eslint/types@5.36.1":
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.36.1.tgz#1cf0e28aed1cb3ee676917966eb23c2f8334ce2c"
integrity sha512-jd93ShpsIk1KgBTx9E+hCSEuLCUFwi9V/urhjOWnOaksGZFbTOxAT47OH2d4NLJnLhkVD+wDbB48BuaycZPLBg==
"@typescript-eslint/typescript-estree@5.10.1": "@typescript-eslint/typescript-estree@5.10.1":
version "5.10.1" version "5.10.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.1.tgz#b268e67be0553f8790ba3fe87113282977adda15" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.1.tgz#b268e67be0553f8790ba3fe87113282977adda15"
@@ -2821,6 +2869,31 @@
semver "^7.3.5" semver "^7.3.5"
tsutils "^3.21.0" tsutils "^3.21.0"
"@typescript-eslint/typescript-estree@5.36.1":
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.36.1.tgz#b857f38d6200f7f3f4c65cd0a5afd5ae723f2adb"
integrity sha512-ih7V52zvHdiX6WcPjsOdmADhYMDN15SylWRZrT2OMy80wzKbc79n8wFW0xpWpU0x3VpBz/oDgTm2xwDAnFTl+g==
dependencies:
"@typescript-eslint/types" "5.36.1"
"@typescript-eslint/visitor-keys" "5.36.1"
debug "^4.3.4"
globby "^11.1.0"
is-glob "^4.0.3"
semver "^7.3.7"
tsutils "^3.21.0"
"@typescript-eslint/utils@5.36.1":
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.36.1.tgz#136d5208cc7a3314b11c646957f8f0b5c01e07ad"
integrity sha512-lNj4FtTiXm5c+u0pUehozaUWhh7UYKnwryku0nxJlYUEWetyG92uw2pr+2Iy4M/u0ONMKzfrx7AsGBTCzORmIg==
dependencies:
"@types/json-schema" "^7.0.9"
"@typescript-eslint/scope-manager" "5.36.1"
"@typescript-eslint/types" "5.36.1"
"@typescript-eslint/typescript-estree" "5.36.1"
eslint-scope "^5.1.1"
eslint-utils "^3.0.0"
"@typescript-eslint/utils@^5.10.0": "@typescript-eslint/utils@^5.10.0":
version "5.10.1" version "5.10.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.10.1.tgz#fa682a33af47080ba2c4368ee0ad2128213a1196" resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.10.1.tgz#fa682a33af47080ba2c4368ee0ad2128213a1196"
@@ -2841,6 +2914,14 @@
"@typescript-eslint/types" "5.10.1" "@typescript-eslint/types" "5.10.1"
eslint-visitor-keys "^3.0.0" eslint-visitor-keys "^3.0.0"
"@typescript-eslint/visitor-keys@5.36.1":
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.36.1.tgz#7731175312d65738e501780f923896d200ad1615"
integrity sha512-ojB9aRyRFzVMN3b5joSYni6FAS10BBSCAfKJhjJAV08t/a95aM6tAhz+O1jF+EtgxktuSO3wJysp2R+Def/IWQ==
dependencies:
"@typescript-eslint/types" "5.36.1"
eslint-visitor-keys "^3.3.0"
"@wdio/config@7.16.11": "@wdio/config@7.16.11":
version "7.16.11" version "7.16.11"
resolved "https://registry.yarnpkg.com/@wdio/config/-/config-7.16.11.tgz#c35a0efb9c7ec6c80e3324e9818f636010087e97" resolved "https://registry.yarnpkg.com/@wdio/config/-/config-7.16.11.tgz#c35a0efb9c7ec6c80e3324e9818f636010087e97"
@@ -5549,7 +5630,7 @@ escodegen@^2.0.0:
optionalDependencies: optionalDependencies:
source-map "~0.6.1" source-map "~0.6.1"
eslint-config-prettier@^8.3.0: eslint-config-prettier@^8.5.0:
version "8.5.0" version "8.5.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1" resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q== integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
@@ -5603,13 +5684,6 @@ eslint-plugin-markdown@^3.0.0:
dependencies: dependencies:
mdast-util-from-markdown "^0.8.5" mdast-util-from-markdown "^0.8.5"
eslint-plugin-prettier@^4.0.0:
version "4.2.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
dependencies:
prettier-linter-helpers "^1.0.0"
eslint-scope@5.1.1, eslint-scope@^5.1.1: eslint-scope@5.1.1, eslint-scope@^5.1.1:
version "5.1.1" version "5.1.1"
resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -5643,7 +5717,7 @@ eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0:
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826" resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA== integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
eslint@^8.4.1: eslint@^8.23.0:
version "8.23.0" version "8.23.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.23.0.tgz#a184918d288820179c6041bb3ddcc99ce6eea040" resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.23.0.tgz#a184918d288820179c6041bb3ddcc99ce6eea040"
integrity sha512-pBG/XOn0MsJcKcTRLr27S5HpzQo4kLr+HjLQIyK4EiCsijDl/TB+h5uEuJU6bQ8Edvwz1XWOjpaP2qgnXGpTcA== integrity sha512-pBG/XOn0MsJcKcTRLr27S5HpzQo4kLr+HjLQIyK4EiCsijDl/TB+h5uEuJU6bQ8Edvwz1XWOjpaP2qgnXGpTcA==
@@ -5974,11 +6048,6 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
fast-diff@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
fast-glob@^3.2.9: fast-glob@^3.2.9:
version "3.2.11" version "3.2.11"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -9760,13 +9829,6 @@ prelude-ls@~1.1.2:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ= integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
prettier-linter-helpers@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
dependencies:
fast-diff "^1.1.2"
prettier-plugin-jsdoc@^0.3.30: prettier-plugin-jsdoc@^0.3.30:
version "0.3.38" version "0.3.38"
resolved "https://registry.yarnpkg.com/prettier-plugin-jsdoc/-/prettier-plugin-jsdoc-0.3.38.tgz#b8adbe9efc1dc11f3cc5ff0b07e0233a0fdf533d" resolved "https://registry.yarnpkg.com/prettier-plugin-jsdoc/-/prettier-plugin-jsdoc-0.3.38.tgz#b8adbe9efc1dc11f3cc5ff0b07e0233a0fdf533d"