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

Merge branch 'develop' into sidv/docs

Browse Source 
* develop:
  chore: update browsers list
  Fix pre
  Prettier pass
  Fix XSS htmls
  fix #3407 Replace `div` with `pre` and format
This commit is contained in:
Sidharth Vinod
2022-09-05 19:30:39 +05:30
parent a95f46f513 d52c1f09d5
commit 5e9db250bc
113 changed files with 2859 additions and 3863 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.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,
@@ -20,7 +20,7 @@
"plugin:markdown/recommended", "plugin:markdown/recommended",
"prettier" "prettier"
], ],
"plugins": ["html", "jest", "jsdoc", "json"], "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",

3
.prettierignore
View File

@@ -1,4 +1,3 @@
demos/*.html
cypress/**/*.html
dist dist
cypress/platform/xss3.html
.cache .cache

55
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
@@ -97,7 +102,7 @@
classK ..> classL : Dependency classK ..> classL : Dependency
classM ..|> classN : Realization classM ..|> classN : Realization
classO .. classP : Link(Dashed) classO .. classP : Link(Dashed)
classA : +attr1 classA : +attr1
classA : attr2 classA : attr2
classA : method1() classA : method1()
&lt;&lt;interface&gt;&gt; classB &lt;&lt;interface&gt;&gt; classB
@@ -111,8 +116,8 @@
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) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -134,8 +139,8 @@
securityLevel: 'loose', securityLevel: 'loose',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

148
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,77 +93,76 @@
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"
</pre>
</div> </div>
</div> <script src="./mermaid.js"></script>
<script>
function clickByFlow(elemName) {
const div = document.createElement('div');
div.className = 'created-by-click';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow';
<script src="./mermaid.js"></script> document.getElementsByTagName('body')[0].appendChild(div);
<script> }
function clickByFlow(elemName) { function clickByFlowArg(argument) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-click'; div.className = 'created-by-click-2';
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: ' + argument;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByFlowArg(argument) { function clickByGantt(arg1, arg2, arg3) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-click-2'; div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow: ' + argument; div.innerText = 'Clicked By Gant';
if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByGantt(arg1, arg2, arg3) { function clickByClass(arg) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-gant-click'; div.className = 'created-by-class-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: purple; color: white;';
div.innerText = 'Clicked By Gant'; div.innerText = 'Clicked By Class' + (arg ? arg : '');
if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByClass(arg) { mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
const div = document.createElement('div'); </script>
div.className = 'created-by-class-click'; </body>
div.style = 'padding: 20px; background: purple; color: white;';
div.innerText = 'Clicked By Class' + (arg ? arg : '');
document.getElementsByTagName('body')[0].appendChild(div);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script>
</body>
</html> </html>

64
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,27 +57,27 @@
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>
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);
} }
function clickByGantt(elemName) { function clickByGantt(elemName) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-gant-click'; div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Gant'; div.innerText = 'Clicked By Gant';
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

148
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,77 +93,76 @@
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"
</pre>
</div> </div>
</div> <script src="./mermaid.js"></script>
<script>
function clickByFlow(elemName) {
const div = document.createElement('div');
div.className = 'created-by-click';
div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow';
<script src="./mermaid.js"></script> document.getElementsByTagName('body')[0].appendChild(div);
<script> }
function clickByFlow(elemName) { function clickByFlowArg(argument) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-click'; div.className = 'created-by-click-2';
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: ' + argument;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByFlowArg(argument) { function clickByGantt(arg1, arg2, arg3) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-click-2'; div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Flow: ' + argument; div.innerText = 'Clicked By Gant';
if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByGantt(arg1, arg2, arg3) { function clickByClass(arg) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-gant-click'; div.className = 'created-by-class-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: purple; color: white;';
div.innerText = 'Clicked By Gant'; div.innerText = 'Clicked By Class' + (arg ? arg : '');
if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByClass(arg) { mermaid.initialize({ startOnLoad: true, securityLevel: 'sandbox', logLevel: 1 });
const div = document.createElement('div'); </script>
div.className = 'created-by-class-click'; </body>
div.style = 'padding: 20px; background: purple; color: white;';
div.innerText = 'Clicked By Class' + (arg ? arg : '');
document.getElementsByTagName('body')[0].appendChild(div);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'sandbox', logLevel: 1 });
</script>
</body>
</html> </html>

70
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,30 +59,30 @@
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>
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);
} }
function clickByGantt(arg1, arg2, arg3) { function clickByGantt(arg1, arg2, arg3) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-gant-click'; div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Gant'; div.innerText = 'Clicked By Gant';
if (arg1) div.innerText += ' ' + arg1; if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2; if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3; if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

48
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,13 +27,13 @@
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) {
console.log('show ' + elemName); console.log('show ' + elemName);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 });
</script> </script>
</body> </body>
</html> </html>

193
cypress/platform/current.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,137 +27,55 @@
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="flex"> <div class="flex">
<div class="mermaid" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 20%">
flowchart BT flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
subgraph S1
sub1 -->sub2
end
subgraph S2
sub4
end
S1 --> S2
sub1 --> sub4
</div> </div>
<div class="mermaid2" style="width: 50%; height: 200px;"> <div class="mermaid2" style="width: 50%; height: 200px">
sequenceDiagram sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
Bob->>Alice: I'm short though though
</div> </div>
<div class="mermaid2" style="width: 50%; height: 200px;"> <div class="mermaid2" style="width: 50%; height: 200px">
%%{init: {'securityLevel': 'loose'}}%% %%{init: {'securityLevel': 'loose'}}%% graph TD A[Christmas] -->|Get money| B(Go shopping) B
graph TD --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free
A[Christmas] -->|Get money| B(Go shopping) second with,<br />or something to get around?}} C -->|One| D[Laptop] C -->|Two| E[iPhone] C
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?}} -->|Three| F[Car] click A "index.html#link-clicked" "link test" click B callback "click
C -->|One| D[Laptop] test" classDef someclass fill:#f96; class A someclass; class C someclass;
C -->|Two| E[iPhone]
C -->|Three| F[Car]
click A "index.html#link-clicked" "link test"
click B callback "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
</div> </div>
<div class="mermaid2" style="width: 50%; height: 200px;"> <div class="mermaid2" style="width: 50%; height: 200px">
flowchart BT subgraph a b1 -- ok --> b2 end a -- sert --> c c --> d b1 --> d a --asd123 -->
d
</div>
<div class="mermaid2" style="width: 50%; height: 20%">
stateDiagram-v2 state A { B1 --> B2: ok } A --> C: sert C --> D B1 --> D A --> D: asd123
</div>
</div>
<div class="mermaid2" style="width: 50%; height: 40%">
%% this does not produce the desired result flowchart TB subgraph container_Beta
process_C-->Process_D end subgraph container_Alpha process_A-->process_B
process_B-->|via_AWSBatch|container_Beta process_A-->|messages|process_C end
</div>
<div class="mermaid" style="width: 50%; height: 40%">
flowchart TB a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}} -->
b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing
#quot;elit#quot;."}}
</div>
<div class="mermaid2" style="width: 50%; height: 50%">
flowchart TB internet nat routeur lb1 lb2 compute1 compute2 subgraph project routeur nat
subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> routeur
routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
</div>
<div class="mermaid2" style="width: 50%; height: 50%">
flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]
_two end sub_one --> two
</div>
<div class="mermaid2" style="width: 50%; height: 50%">
flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end subgraph sub_two[Sub
Two] _sub_two end _one end %% here, either the first or the second one sub_one --> sub_two
_one --> b
</div>
flowchart BT <script src="./mermaid.js"></script>
subgraph a
b1 -- ok --> b2
end
a -- sert --> c
c --> d
b1 --> d
a --asd123 --> d
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
stateDiagram-v2
state A {
B1 --> B2: ok
}
A --> C: sert
C --> D
B1 --> D
A --> D: asd123
</div>
</div>
<div class="mermaid2" style="width: 50%; height: 40%;">
%% this does not produce the desired result
flowchart TB
subgraph container_Beta
process_C-->Process_D
end
subgraph container_Alpha
process_A-->process_B
process_B-->|via_AWSBatch|container_Beta
process_A-->|messages|process_C
end
</div>
<div class="mermaid" style="width: 50%; height: 40%;">
flowchart TB
a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
--> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
</div>
<div class="mermaid2" style="width: 50%; height: 50%;">
flowchart TB
internet
nat
routeur
lb1
lb2
compute1
compute2
subgraph project
routeur
nat
subgraph subnet1
compute1
lb1
end
subgraph subnet2
compute2
lb2
end
end
internet --> routeur
routeur --> subnet1 & subnet2
subnet1 & subnet2 --> nat --> internet
</div>
<div class="mermaid2" style="width: 50%; height: 50%;">
flowchart TD
subgraph one[One]
subgraph sub_one[Sub One]
_sub_one
end
end
subgraph two[Two]
_two
end
sub_one --> two
</div>
<div class="mermaid2" style="width: 50%; height: 50%;">
flowchart TD
subgraph one[One]
subgraph sub_one[Sub One]
_sub_one
end
subgraph sub_two[Sub Two]
_sub_two
end
_one
end
%% here, either the first or the second one
sub_one --> sub_two
_one --> b
</div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -172,8 +95,8 @@ _one --> b
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

59
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
</div> </pre>
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <pre 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,16 +99,15 @@ 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>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -124,8 +127,8 @@ Note over Bob,Alice: Looks back
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

10
cypress/platform/e2e.html
View File

@@ -1,10 +1,13 @@
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8" />
<!-- <meta charset="iso-8859-15"/> --> <!-- <meta charset="iso-8859-15"/> -->
<script src="/e2e.js"></script> <script src="/e2e.js"></script>
<!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> --> <!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<style> <style>
body { body {
/* font-family: 'Mansalva', cursive;*/ /* font-family: 'Mansalva', cursive;*/
@@ -27,7 +30,8 @@
svg { svg {
border: 2px solid darkred; border: 2px solid darkred;
} }
.exClass2 > rect, .exClass { .exClass2 > rect,
.exClass {
fill: greenyellow !important; fill: greenyellow !important;
} }
</style> </style>

27
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 {
/> font-family: 'trebuchet ms', verdana, arial;
<style>body { }
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>

24
cypress/platform/ghsa1.html
View File

@@ -1,28 +1,26 @@
<html> <html>
<script> <script>
// %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%% // %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
</script> </script>
<body> <body>
<div id="target"> <div id="target">
<h1>This element does not belong to the SVG but we can style it</h1> <h1>This element does not belong to the SVG but we can style it</h1>
</div> </div>
<svg id="diagram"> <svg id="diagram"></svg>
</svg>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: false, logLevel: 0 }); mermaid.initialize({ startOnLoad: false, logLevel: 0 });
const graph = ` const graph = `
%%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%% %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
graph TD graph TD
A[Goose] A[Goose]
`; `;
const diagram = document.getElementById('diagram'); const diagram = document.getElementById('diagram');
const svg = mermaid.render('diagram-svg', graph); const svg = mermaid.render('diagram-svg', graph);
diagram.innerHTML = svg; diagram.innerHTML = svg;
</script> </script>
</body> </body>
</html> </html>

24
cypress/platform/ghsa2.html
View File

@@ -1,28 +1,26 @@
<html> <html>
<script> <script>
// %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%% // %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
</script> </script>
<body> <body>
<div id="target"> <div id="target">
<h1>This element does not belong to the SVG but we can style it</h1> <h1>This element does not belong to the SVG but we can style it</h1>
</div> </div>
<svg id="diagram"> <svg id="diagram"></svg>
</svg>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ startOnLoad: false, logLevel: 0 }); mermaid.initialize({ startOnLoad: false, logLevel: 0 });
const graph = ` const graph = `
%%{ init: { "fontFamily" : "&125; * { background: red }" } }%% %%{ init: { "fontFamily" : "&125; * { background: red }" } }%%
graph TD graph TD
A[Goose] A[Goose]
`; `;
const diagram = document.getElementById('diagram'); const diagram = document.getElementById('diagram');
const svg = mermaid.render('diagram-svg', graph); const svg = mermaid.render('diagram-svg', graph);
diagram.innerHTML = svg; diagram.innerHTML = svg;
</script> </script>
</body> </body>
</html> </html>

37
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,10 +41,9 @@
+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>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -60,8 +65,8 @@
securityLevel: 'loose', securityLevel: 'loose',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

62
cypress/platform/gitgraph.html
View File

@@ -1,32 +1,36 @@
<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:#111; */ /* background:#111; */
/* 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: { "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,17 +97,16 @@
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) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -112,17 +114,17 @@
mermaid.initialize({ mermaid.initialize({
//theme: 'dark', //theme: 'dark',
themeVariables: { themeVariables: {
commitLabelColor: '#9400D3', commitLabelColor: '#9400D3',
commitLabelBackground: '#FFFFFF', commitLabelBackground: '#FFFFFF',
// darkMode: true, // darkMode: true,
// background: '#222', // background: '#222',
// // textColor: 'white', // // textColor: 'white',
// // primaryTextColor: '#f4f4f4', // // primaryTextColor: '#f4f4f4',
// // // nodeBkg: '#ff0000', // // // nodeBkg: '#ff0000',
// // // mainBkg: '#0000ff', // // // mainBkg: '#0000ff',
// // // tertiaryColor: '#ffffcc', // // // tertiaryColor: '#ffffcc',
}, },
// theme: 'forest', // theme: 'forest',
// theme: 'neutral', // theme: 'neutral',
// theme: 'dark', // theme: 'dark',
@@ -141,8 +143,8 @@
securityLevel: 'loose', securityLevel: 'loose',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

42
cypress/platform/gitgraph2.html
View File

@@ -1,32 +1,36 @@
<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:#111; */ /* background:#111; */
/* 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="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,17 +89,16 @@
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) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -132,8 +134,8 @@
securityLevel: 'loose', securityLevel: 'loose',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

33
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>

110
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,38 +85,38 @@
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>
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);
} }
function clickByGantt(arg1, arg2, arg3) { function clickByGantt(arg1, arg2, arg3) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-gant-click'; div.className = 'created-by-gant-click';
div.style = 'padding: 20px; background: green; color: white;'; div.style = 'padding: 20px; background: green; color: white;';
div.innerText = 'Clicked By Gant'; div.innerText = 'Clicked By Gant';
if (arg1) div.innerText += ' ' + arg1; if (arg1) div.innerText += ' ' + arg1;
if (arg2) div.innerText += ' ' + arg2; if (arg2) div.innerText += ' ' + arg2;
if (arg3) div.innerText += ' ' + arg3; if (arg3) div.innerText += ' ' + arg3;
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
function clickByClass() { function clickByClass() {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'created-by-class-click'; div.className = 'created-by-class-click';
div.style = 'padding: 20px; background: purple; color: white;'; div.style = 'padding: 20px; background: purple; color: white;';
div.innerText = 'Clicked By Class'; div.innerText = 'Clicked By Class';
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

133
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); */
@@ -17,27 +20,25 @@
display: flex; display: flex;
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,9 +325,9 @@ flowchart TD
string lastName string lastName
int age int age
} }
</div> </pre>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -345,17 +346,17 @@ 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>

47
cypress/platform/knsv2.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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,12 +46,13 @@
<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>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -56,16 +62,15 @@ sequenceDiagram
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
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>

92
cypress/platform/knsv3.html
View File

@@ -1,20 +1,25 @@
<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: '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,8 +225,9 @@ flowchart BT
end end
S1 --> S2 S1 --> S2
sub1 --> sub4 sub1 --> sub4
</div> </pre>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -244,8 +250,8 @@ flowchart BT
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

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

@@ -1,30 +1,29 @@
<html> <html>
<head> <head>
<script src="http://localhost:9000/mermaid.js"></script> <script src="http://localhost:9000/mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
theme: 'base', theme: 'base',
themeVariables: {}, themeVariables: {},
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>

43
cypress/platform/render-after-error.html
View File

@@ -1,29 +1,28 @@
<!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="graph"> <div id="graph"></div>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script>mermaid.init({ startOnLoad: false }); <script>
mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize({ securityLevel: 'strict' }); mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
try { try {
console.log('rendering'); console.log('rendering');
mermaid.mermaidAPI.render('graphDiv', `>`); mermaid.mermaidAPI.render('graphDiv', `>`);
} catch (e) {} } catch (e) {}
mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => { mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
document.getElementById('graph').innerHTML = html; document.getElementById('graph').innerHTML = html;
}); });
</script> </script>
</body>
</body>
</html> </html>

45
cypress/platform/rerender.html
View File

@@ -1,30 +1,29 @@
<!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="graph"> <div id="graph"></div>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script>mermaid.init({ startOnLoad: false }); <script>
mermaid.mermaidAPI.initialize(); mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize();
rerender('XMas'); rerender('XMas');
function rerender(text) { function rerender(text) {
var graphText = `graph TD var graphText = `graph TD
A[${text}] -->|Get money| B(Go shopping)`; A[${text}] -->|Get money| B(Go shopping)`;
var graph = mermaid.mermaidAPI.render('id', graphText); var graph = mermaid.mermaidAPI.render('id', graphText);
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph); console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
document.getElementById('graph').innerHTML = graph; document.getElementById('graph').innerHTML = graph;
} }
</script> </script>
<button id="rerender" onclick="rerender('Saturday')">Rerender</button> <button id="rerender" onclick="rerender('Saturday')">Rerender</button>
</body>
</body>
</html> </html>

69
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); */
@@ -16,8 +19,10 @@
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">
%%{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,8 +311,9 @@ requirementDiagram
merge main merge main
checkout develop checkout develop
merge release merge release
</div> </pre>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -328,8 +333,8 @@ requirementDiagram
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

68
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); */
@@ -17,8 +20,10 @@
width: 100%; width: 100%;
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,7 +305,9 @@ gitGraph
merge main merge main
checkout develop checkout develop
merge release merge release
</div>
</pre>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
@@ -331,8 +337,8 @@ gitGraph
// securityLevel: 'strict' // securityLevel: 'strict'
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

72
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,8 +306,9 @@ gitGraph
merge main merge main
checkout develop checkout develop
merge release merge release
</div> </pre>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -319,8 +327,8 @@ gitGraph
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

68
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); */
@@ -16,8 +19,10 @@
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">
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,8 +299,9 @@ requirementDiagram
merge main merge main
checkout develop checkout develop
merge release merge release
</div> </pre>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -314,8 +320,8 @@ requirementDiagram
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

68
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); */
@@ -16,8 +19,10 @@
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': '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,8 +303,9 @@ requirementDiagram
merge main merge main
checkout develop checkout develop
merge release merge release
</div> </pre>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -318,8 +324,8 @@ requirementDiagram
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

69
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); */
@@ -16,8 +19,10 @@
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': '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,9 +303,9 @@ requirementDiagram
merge main merge main
checkout develop checkout develop
merge release merge release
</div> </pre>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -319,8 +324,8 @@ requirementDiagram
securityLevel: 'strict', securityLevel: 'strict',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
</script> </script>
</body> </body>
</html> </html>

52
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,18 +28,18 @@
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) {
console.log('show ' + elemName); console.log('show ' + elemName);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

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

@@ -1,18 +1,21 @@
<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 { h1 {
color: #333; color: #333;
font-size: 20px; font-size: 20px;
@@ -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,11 +116,11 @@
B B
C C
end end
</div> </pre>
</div> </div>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -138,8 +141,8 @@
securityLevel: 'strict', securityLevel: 'strict',
}); });
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({

52
cypress/platform/vertices.html
View File

@@ -1,37 +1,37 @@
<!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>
function showFullFirstSquad(elemName) { function showFullFirstSquad(elemName) {
console.log('show ' + elemName); console.log('show ' + elemName);
} }
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 }); mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
</script> </script>
</body> </body>
</html> </html>

2
cypress/platform/viewer.js
View File

@@ -46,7 +46,7 @@ function merge(current, update) {
// if update[key] exist, and it's not a string or array, // if update[key] exist, and it's not a string or array,
// we go in one level deeper // we go in one level deeper
if ( if (
current.hasOwnProperty(key) && // eslint-disable-line current.hasOwnProperty(key) &&
typeof current[key] === 'object' && typeof current[key] === 'object' &&
!(current[key] instanceof Array) !(current[key] instanceof Array)
) { ) {

23
cypress/platform/webpackUsage.html
View File

@@ -1,18 +1,17 @@
<!doctype html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
/* .mermaid { /* .mermaid {
font-family: "trebuchet ms", verdana, arial;; font-family: "trebuchet ms", verdana, arial;;
} */ } */
/* .mermaid { /* .mermaid {
font-family: 'arial'; font-family: 'arial';
} */ } */
</style> </style>
</head> </head>
<body> <body>
<div id="graph-to-be"></div> <div id="graph-to-be"></div>
<script src="./bundle-test.js" charset="utf-8"></script> <script src="./bundle-test.js" charset="utf-8"></script>
</body> </body>
</html> </html>

11
cypress/platform/xss.html
View File

@@ -1,16 +1,13 @@
<html> <html>
<head> <head>
<script src="/e2e.js"></script> <script src="/e2e.js"></script>
<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;

60
cypress/platform/xss10.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -88,20 +94,20 @@
} }
var diagram = 'classDiagram\n'; var diagram = 'classDiagram\n';
diagram += 'class Square~<img/src'; diagram += 'class Square~<img/src';
diagram += "='1'/onerror=xssAttack()>~{\n"; diagram += "='1'/onerror=xssAttack()>~{\n";
diagram += 'id A\n'; diagram += 'id A\n';
diagram += '}'; diagram += '}';
// var diagram = "stateDiagram-v2\n"; // var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror" // diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B"; // diagram += "=xssAttack()> --> B";
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

58
cypress/platform/xss11.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -87,19 +93,19 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'stateDiagram-v2\n'; var diagram = 'stateDiagram-v2\n';
diagram += 's2 : This is a state description<img/src'; diagram += 's2 : This is a state description<img/src';
diagram += "='1'/onerror=xssAttack()>"; diagram += "='1'/onerror=xssAttack()>";
// var diagram = "stateDiagram-v2\n"; // var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror" // diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B"; // diagram += "=xssAttack()> --> B";
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

58
cypress/platform/xss12.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -87,19 +93,19 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'stateDiagram-v2\n'; var diagram = 'stateDiagram-v2\n';
diagram += 's2 : A<img/src'; diagram += 's2 : A<img/src';
diagram += "='1'/onerror=xssAttack()>"; diagram += "='1'/onerror=xssAttack()>";
// var diagram = "stateDiagram-v2\n"; // var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror" // diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B"; // diagram += "=xssAttack()> --> B";
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

58
cypress/platform/xss13.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -87,19 +93,19 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'stateDiagram-v2\n'; var diagram = 'stateDiagram-v2\n';
diagram += 'if_state --> False: if n < 0<img/src'; diagram += 'if_state --> False: if n < 0<img/src';
diagram += "='1'/onerror=xssAttack()>"; diagram += "='1'/onerror=xssAttack()>";
// var diagram = "stateDiagram-v2\n"; // var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror" // diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B"; // diagram += "=xssAttack()> --> B";
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

60
cypress/platform/xss14.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -88,20 +94,20 @@
} }
var diagram = 'classDiagram\n'; var diagram = 'classDiagram\n';
diagram += 'classA <-- classB : <ifr'; diagram += 'classA <-- classB : <ifr';
diagram += "ame/srcdoc='<scr"; diagram += "ame/srcdoc='<scr";
diagram += 'ipt>parent.xssAttack(`XSS`)</'; diagram += 'ipt>parent.xssAttack(`XSS`)</';
diagram += "script>'>"; diagram += "script>'>";
// var diagram = "stateDiagram-v2\n"; // var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror" // diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B"; // diagram += "=xssAttack()> --> B";
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

54
cypress/platform/xss15.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -90,17 +96,17 @@
var diagram = `sequenceDiagram var diagram = `sequenceDiagram
participant John participant John
links John: {"XSS": "javas`; links John: {"XSS": "javas`;
diagram += `cript:alert('AudioParam')"}`; diagram += `cript:alert('AudioParam')"}`;
// var diagram = "stateDiagram-v2\n"; // var diagram = "stateDiagram-v2\n";
// diagram += "<img/src='1'/onerror" // diagram += "<img/src='1'/onerror"
// diagram += "=xssAttack()> --> B"; // diagram += "=xssAttack()> --> B";
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss16.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -91,15 +97,15 @@
participant Alice participant Alice
links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`; links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;
// // var diagram = "stateDiagram-v2\n"; // // var diagram = "stateDiagram-v2\n";
// // diagram += "<img/src='1'/onerror" // // diagram += "<img/src='1'/onerror"
// diagram += '//via.placeholder.com/64\' width=64 />"]'; // diagram += '//via.placeholder.com/64\' width=64 />"]';
// console.log(diagram); // console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss17.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -91,15 +97,15 @@
participant Alice participant Alice
link Alice: Click Me!@javasjavascript:cript:alert("goose")`; link Alice: Click Me!@javasjavascript:cript:alert("goose")`;
// // var diagram = "stateDiagram-v2\n"; // // var diagram = "stateDiagram-v2\n";
// // diagram += "<img/src='1'/onerror" // // diagram += "<img/src='1'/onerror"
// diagram += '//via.placeholder.com/64\' width=64 />"]'; // diagram += '//via.placeholder.com/64\' width=64 />"]';
// console.log(diagram); // console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss18.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -90,15 +96,15 @@
var diagram = `classDiagram var diagram = `classDiagram
Class "<img/src='x'/onerror=xssAttack(1)>" <--> "<img/src='x'/onerror=xssAttack(2)>" C2: Cool label`; Class "<img/src='x'/onerror=xssAttack(1)>" <--> "<img/src='x'/onerror=xssAttack(2)>" C2: Cool label`;
// // var diagram = "stateDiagram-v2\n"; // // var diagram = "stateDiagram-v2\n";
// // diagram += "<img/src='1'/onerror" // // diagram += "<img/src='1'/onerror"
// diagram += '//via.placeholder.com/64\' width=64 />"]'; // diagram += '//via.placeholder.com/64\' width=64 />"]';
// console.log(diagram); // console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss19.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -91,16 +97,16 @@
class Shape{ class Shape{
<<<img/src='1'/`; <<<img/src='1'/`;
// // var diagram = "stateDiagram-v2\n"; // // var diagram = "stateDiagram-v2\n";
diagram += `onerror=xssAttack()>>> diagram += `onerror=xssAttack()>>>
}`; }`;
// diagram += '//via.placeholder.com/64\' width=64 />"]'; // diagram += '//via.placeholder.com/64\' width=64 />"]';
// console.log(diagram); // console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</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({

54
cypress/platform/xss20.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -87,18 +93,18 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
// var diagram = ` graph TD // var diagram = ` graph TD
// A --> B["&lt;a href='javasc`; // A --> B["&lt;a href='javasc`;
// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`; // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
var diagram = ` graph TD var diagram = ` graph TD
A --> B["<a href='javasc`; A --> B["<a href='javasc`;
diagram += `ript#colon;xssAttack()'>AAA</a>"]`; diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
// diagram += '//via.placeholder.com/64\' width=64 />"]'; // diagram += '//via.placeholder.com/64\' width=64 />"]';
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
// console.log(res); // console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

54
cypress/platform/xss21.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -87,18 +93,18 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
// var diagram = ` graph TD // var diagram = ` graph TD
// A --> B["&lt;a href='javasc`; // A --> B["&lt;a href='javasc`;
// diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`; // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
var diagram = ` graph TD var diagram = ` graph TD
A --> B["<a href='javasc`; A --> B["<a href='javasc`;
diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`; diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
// diagram += '//via.placeholder.com/64\' width=64 />"]'; // diagram += '//via.placeholder.com/64\' width=64 />"]';
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

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({

57
cypress/platform/xss4.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: false, htmlLabels: false,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,23 +82,22 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n'; var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
diagram += 'flowchart\n'; diagram += 'flowchart\n';
diagram += 'A["<ifra'; diagram += 'A["<ifra';
diagram += "me srcdoc='<scrip"; diagram += "me srcdoc='<scrip";
diagram += 't src=http://localhost:9000/exploit.js>'; diagram += 't src=http://localhost:9000/exploit.js>';
diagram += '</scr'; diagram += '</scr';
diagram += 'ipt>\'></iframe>"]'; diagram += 'ipt>\'></iframe>"]';
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss5.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -87,16 +93,16 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'graph LR\n'; var diagram = 'graph LR\n';
diagram += 'B-->D("<img onerror=location=`java'; diagram += 'B-->D("<img onerror=location=`java';
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n"; // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n'; diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

50
cypress/platform/xss6.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -87,14 +93,14 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'graph LR\n'; var diagram = 'graph LR\n';
diagram += 'A(<img/src/onerror=xssAttack`1`>)'; diagram += 'A(<img/src/onerror=xssAttack`1`>)';
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n"; // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

54
cypress/platform/xss7.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -87,16 +93,16 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'graph LR\n'; var diagram = 'graph LR\n';
diagram += " B(<a href='<"; diagram += " B(<a href='<";
diagram += 'script></'; diagram += 'script></';
diagram += "script>Javascript:xssAttack`1`'>Click)"; diagram += "script>Javascript:xssAttack`1`'>Click)";
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n"; // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss8.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -87,15 +93,15 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'stateDiagram-v2\n'; var diagram = 'stateDiagram-v2\n';
diagram += "<img/src='1'/onerror=xssAttack()> --> B"; diagram += "<img/src='1'/onerror=xssAttack()> --> B";
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n"; // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

52
cypress/platform/xss9.html
View File

@@ -1,20 +1,25 @@
<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';
/* 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;
@@ -43,7 +48,8 @@
<div class="flex"> <div class="flex">
<div id="diagram" class="mermaid"></div> <div id="diagram" class="mermaid"></div>
<div id="res" class=""></div> <div id="res" class=""></div>
<script src="./mermaid.js"></script> </div>
<script src="./mermaid.js"></script>
<script> <script>
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
@@ -59,8 +65,8 @@
flowchart: { flowchart: {
// defaultRenderer: 'dagre-wrapper', // defaultRenderer: 'dagre-wrapper',
nodeSpacing: 10, nodeSpacing: 10,
curve: 'cardinal', curve: 'cardinal',
htmlLabels: true, htmlLabels: true,
}, },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
@@ -76,8 +82,8 @@
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
function xssAttack() { function xssAttack() {
const div = document.createElement('div'); const div = document.createElement('div');
div.id = 'the-malware'; div.id = 'the-malware';
@@ -87,15 +93,15 @@
throw new Error('XSS Succeeded'); throw new Error('XSS Succeeded');
} }
var diagram = 'stateDiagram-v2\n'; var diagram = 'stateDiagram-v2\n';
diagram += "<img/src='1'/onerror=xssAttack()> --> B"; diagram += "<img/src='1'/onerror=xssAttack()> --> B";
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n"; // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram); console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram; // document.querySelector('#diagram').innerHTML = diagram;
mermaid.render('diagram', diagram, (res) => { mermaid.render('diagram', diagram, (res) => {
console.log(res); console.log(res);
document.querySelector('#res').innerHTML = res; document.querySelector('#res').innerHTML = res;
}); });
</script> </script>
</body> </body>
</html> </html>

63
demos/classchart.html
View File

@@ -1,23 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div class="mermaid">
classDiagram classDiagram
title Animal Diagram title Animal Diagram
accDescription The animal class diagram accDescription The animal class diagram
@@ -41,22 +38,20 @@
+bool is_wild +bool is_wild
+run() +run()
} }
</div> </pre>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
</html> </html>

70
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,26 +28,26 @@
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>
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
flowchart: { curve: 'basis' }, flowchart: { curve: 'basis' },
}); });
</script> </script>
<script> <script>
function testClick(nodeId) { function testClick(nodeId) {
console.log('clicked', nodeId); console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor; var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow'; document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () { setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor; document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100); }, 100);
} }
</script> </script>
</body> </body>
</html> </html>

63
demos/er.html
View File

@@ -1,45 +1,40 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<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>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
</html> </html>

366
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,30 +1083,30 @@
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>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
flowchart: { curve: 'basis' }, flowchart: { curve: 'basis' },
}); });
</script> </script>
<script> <script>
function testClick(nodeId) { function testClick(nodeId) {
console.log('clicked', nodeId); console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor; var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow'; document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () { setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor; document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100); }, 100);
} }
</script> </script>
</body> </body>
</html> </html>

51
demos/gantt.html
View File

@@ -1,22 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <!-- accDescription Tasks for Q4 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <pre class="mermaid">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<!-- accDescription Tasks for Q4 -->
<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>
mermaid.initialize({
logLevel: 3,
securityLevel: 'loose',
gantt: { axisFormat: '%m/%d/%Y' },
});
</script>
</body> </pre
>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
logLevel: 3,
securityLevel: 'loose',
gantt: { axisFormat: '%m/%d/%Y' },
});
</script>
</body>
</html> </html>

405
demos/index.html
View File

@@ -1,27 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div 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,96 +1003,95 @@ 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>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
const ALLOWED_TAGS = [ const ALLOWED_TAGS = [
'a', 'a',
'b', 'b',
'blockquote', 'blockquote',
'br', 'br',
'dd', 'dd',
'div', 'div',
'dl', 'dl',
'dt', 'dt',
'em', 'em',
'foreignObject', 'foreignObject',
'h1', 'h1',
'h2', 'h2',
'h3', 'h3',
'h4', 'h4',
'h5', 'h5',
'h6', 'h6',
'h7', 'h7',
'h8', 'h8',
'hr', 'hr',
'i', 'i',
'li', 'li',
'ul', 'ul',
'ol', 'ol',
'p', 'p',
'pre', 'pre',
'span', 'span',
'strike', 'strike',
'strong', 'strong',
'table', 'table',
'tbody', 'tbody',
'td', 'td',
'tfoot', 'tfoot',
'th', 'th',
'thead', 'thead',
'tr', 'tr',
]; ];
mermaid.initialize({ mermaid.initialize({
theme: 'forest', theme: 'forest',
// themeCSS: '.node rect { fill: red; }', // themeCSS: '.node rect { fill: red; }',
logLevel: 3, logLevel: 3,
securityLevel: 'loose', securityLevel: 'loose',
flowchart: { curve: 'basis' }, flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' }, gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 }, sequence: { actorMargin: 50 },
dompurifyConfig: { dompurifyConfig: {
USE_PROFILES: { USE_PROFILES: {
svg: true, svg: true,
},
ADD_TAGS: ALLOWED_TAGS,
ADD_ATTR: ['transform-origin'],
}, },
ADD_TAGS: ALLOWED_TAGS, // sequenceDiagram: { actorMargin: 300 } // deprecated
ADD_ATTR: ['transform-origin'], });
}, </script>
// sequenceDiagram: { actorMargin: 300 } // deprecated <script>
}); function ganttTestClick(a, b, c) {
</script> console.log('a:', a);
<script> console.log('b:', b);
function ganttTestClick(a, b, c) { console.log('c:', c);
console.log('a:', a);
console.log('b:', b);
console.log('c:', c);
}
function testClick(nodeId) {
console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100);
}
</script>
<script>
const testLineEndings = (test, input) => {
try {
mermaid.render(test, input, () => {});
} catch (err) {
console.error('Error in %s:\n\n%s', test, err);
} }
}; function testClick(nodeId) {
console.log('clicked', nodeId);
testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend'); var originalBgColor = document.querySelector('body').style.backgroundColor;
testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend'); document.querySelector('body').style.backgroundColor = 'yellow';
testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend'); setTimeout(function () {
</script> document.querySelector('body').style.backgroundColor = originalBgColor;
</body> }, 100);
}
</script>
<script>
const testLineEndings = (test, input) => {
try {
mermaid.render(test, input, () => {});
} catch (err) {
console.error('Error in %s:\n\n%s', test, err);
}
};
testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
</script>
</body>
</html> </html>

57
demos/journey.html
View File

@@ -1,21 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div 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,20 +25,18 @@
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>
mermaid.initialize({
theme: 'forest',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
});
</script>
</body>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
});
</script>
</body>
</html> </html>

64
demos/requirements.html
View File

@@ -1,23 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div class="mermaid">
requirementDiagram requirementDiagram
title This is a title title This is a title
requirement test_req { requirement test_req {
@@ -85,22 +82,21 @@
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>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
</html> </html>

63
demos/sequence.html
View File

@@ -1,23 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div class="mermaid">
sequenceDiagram sequenceDiagram
title: FancySequenceDiagram title: FancySequenceDiagram
accDescription Test a description accDescription Test a description
@@ -56,22 +53,20 @@
and and
Alice -->> John: Parallel message 2 Alice -->> John: Parallel message 2
end end
</div> </pre>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
</html> </html>

67
demos/state.html
View File

@@ -1,50 +1,45 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<head> <body>
<meta charset="utf-8"> <pre class="mermaid">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<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>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
</html> </html>

546
docs/CHANGELOG.md
View File

@@ -158,201 +158,201 @@ mermaidAPI.initialize({
**Closed issues:** **Closed issues:**
- Gantt and sequence diagram do not render [#853](https://github.com/knsv/mermaid/issues/853) - Gantt and sequence diagram do not render [\#853](https://github.com/knsv/mermaid/issues/853)
- margins around flowchart are not balanced [#852](https://github.com/knsv/mermaid/issues/852) - margins around flowchart are not balanced [\#852](https://github.com/knsv/mermaid/issues/852)
- Smaller bundles [#843](https://github.com/knsv/mermaid/issues/843) - Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843)
- unicode in labels [#776](https://github.com/knsv/mermaid/issues/776) - unicode in labels [\#776](https://github.com/knsv/mermaid/issues/776)
- Hard-changing drawing of arrows per edge type [#775](https://github.com/knsv/mermaid/issues/775) - Hard-changing drawing of arrows per edge type [\#775](https://github.com/knsv/mermaid/issues/775)
- SequenceDiagram wrong [#773](https://github.com/knsv/mermaid/issues/773) - SequenceDiagram wrong [\#773](https://github.com/knsv/mermaid/issues/773)
- Render mermaid on github pages with simple code [#772](https://github.com/knsv/mermaid/issues/772) - Render mermaid on github pages with simple code [\#772](https://github.com/knsv/mermaid/issues/772)
- FlowChart - large space between text and the image [#754](https://github.com/knsv/mermaid/issues/754) - FlowChart - large space between text and the image [\#754](https://github.com/knsv/mermaid/issues/754)
- Class Diagram Issues when using Mermaid in Stackedit [#748](https://github.com/knsv/mermaid/issues/748) - Class Diagram Issues when using Mermaid in Stackedit [\#748](https://github.com/knsv/mermaid/issues/748)
- Multi-platform CI [#744](https://github.com/knsv/mermaid/issues/744) - Multi-platform CI [\#744](https://github.com/knsv/mermaid/issues/744)
- gantt: sections can't have a colon [#742](https://github.com/knsv/mermaid/issues/742) - gantt: sections can't have a colon [\#742](https://github.com/knsv/mermaid/issues/742)
- Yarn build does not add mermaid.min.css to dist [#732](https://github.com/knsv/mermaid/issues/732) - Yarn build does not add mermaid.min.css to dist [\#732](https://github.com/knsv/mermaid/issues/732)
- Is there a grammar / keyword / more than just the basic examples? [#718](https://github.com/knsv/mermaid/issues/718) - Is there a grammar / keyword / more than just the basic examples? [\#718](https://github.com/knsv/mermaid/issues/718)
- Click event and react component [#717](https://github.com/knsv/mermaid/issues/717) - Click event and react component [\#717](https://github.com/knsv/mermaid/issues/717)
- Long text going outside the box [#706](https://github.com/knsv/mermaid/issues/706) - Long text going outside the box [\#706](https://github.com/knsv/mermaid/issues/706)
- How to migrate from yUML to mermaid? [#704](https://github.com/knsv/mermaid/issues/704) - How to migrate from yUML to mermaid? [\#704](https://github.com/knsv/mermaid/issues/704)
- Issue on Dynamic Creation in PHP [#690](https://github.com/knsv/mermaid/issues/690) - Issue on Dynamic Creation in PHP [\#690](https://github.com/knsv/mermaid/issues/690)
- `click "\#target"` and `click "http://url"` should create regular links [#689](https://github.com/knsv/mermaid/issues/689) - `click "\#target"` and `click "http://url"` should create regular links [\#689](https://github.com/knsv/mermaid/issues/689)
- Support Chinese punctuation [#687](https://github.com/knsv/mermaid/issues/687) - Support Chinese punctuation [\#687](https://github.com/knsv/mermaid/issues/687)
- \[Question] Proper way to install on Mac? [#681](https://github.com/knsv/mermaid/issues/681) - \[Question\] Proper way to install on Mac? [\#681](https://github.com/knsv/mermaid/issues/681)
- Has Mermaid a graphical interface to make diagrams? [#668](https://github.com/knsv/mermaid/issues/668) - Has Mermaid a graphical interface to make diagrams? [\#668](https://github.com/knsv/mermaid/issues/668)
- mermaid installation on debian [#649](https://github.com/knsv/mermaid/issues/649) - mermaid installation on debian [\#649](https://github.com/knsv/mermaid/issues/649)
- "Cannot activate" in sequenceDiagram [#647](https://github.com/knsv/mermaid/issues/647) - "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
- Link ("click" statement) in flowchart does not work in exported SVG [#646](https://github.com/knsv/mermaid/issues/646) - Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
- How to pass styling [#639](https://github.com/knsv/mermaid/issues/639) - How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [#638](https://github.com/knsv/mermaid/issues/638) - The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
- import mermaid.css with ES6 + NPM [#634](https://github.com/knsv/mermaid/issues/634) - import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
- Actor line cuts through other elements [#633](https://github.com/knsv/mermaid/issues/633) - Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
- Graph TD line out of the picture (left side) [#630](https://github.com/knsv/mermaid/issues/630) - Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
- Flowchart labels appear "cutoff" [#628](https://github.com/knsv/mermaid/issues/628) - Flowchart labels appear "cutoff" [\#628](https://github.com/knsv/mermaid/issues/628)
- Uncaught TypeError: \_.constant is not a function (mermaid.js) [#626](https://github.com/knsv/mermaid/issues/626) - Uncaught TypeError: \_.constant is not a function \(mermaid.js\) [\#626](https://github.com/knsv/mermaid/issues/626)
- Missing tags and releases for newer versions [#623](https://github.com/knsv/mermaid/issues/623) - Missing tags and releases for newer versions [\#623](https://github.com/knsv/mermaid/issues/623)
- Mermaid and Leo / Leo Vue [#622](https://github.com/knsv/mermaid/issues/622) - Mermaid and Leo / Leo Vue [\#622](https://github.com/knsv/mermaid/issues/622)
- mermaidAPI gantt Vue.js [#621](https://github.com/knsv/mermaid/issues/621) - mermaidAPI gantt Vue.js [\#621](https://github.com/knsv/mermaid/issues/621)
- Gantt sections are not separated by colors - Fix: set numberSectionStyles to 4 instead of 3 [#620](https://github.com/knsv/mermaid/issues/620) - Gantt sections are not separated by colors - Fix: set numberSectionStyles to 4 instead of 3 [\#620](https://github.com/knsv/mermaid/issues/620)
- how to get mermaidAPI? [#617](https://github.com/knsv/mermaid/issues/617) - how to get mermaidAPI? [\#617](https://github.com/knsv/mermaid/issues/617)
- Error in startOnLoad documentation? [#616](https://github.com/knsv/mermaid/issues/616) - Error in startOnLoad documentation? [\#616](https://github.com/knsv/mermaid/issues/616)
- Example export to SVG generates error [#614](https://github.com/knsv/mermaid/issues/614) - Example export to SVG generates error [\#614](https://github.com/knsv/mermaid/issues/614)
- The new online editor does not support previously generated links [#613](https://github.com/knsv/mermaid/issues/613) - The new online editor does not support previously generated links [\#613](https://github.com/knsv/mermaid/issues/613)
- Grammar / Syntax documentation for flowcharts [#607](https://github.com/knsv/mermaid/issues/607) - Grammar / Syntax documentation for flowcharts [\#607](https://github.com/knsv/mermaid/issues/607)
- Mermaid does not work with d3.js [#606](https://github.com/knsv/mermaid/issues/606) - Mermaid does not work with d3.js [\#606](https://github.com/knsv/mermaid/issues/606)
- Why does this code's flowchart lines get cut-off on screen? [#604](https://github.com/knsv/mermaid/issues/604) - Why does this code's flowchart lines get cut-off on screen? [\#604](https://github.com/knsv/mermaid/issues/604)
- click keyword does not fire my callback (on the demo Website too) [#603](https://github.com/knsv/mermaid/issues/603) - click keyword does not fire my callback \(on the demo Website too\) [\#603](https://github.com/knsv/mermaid/issues/603)
- Online Editor fails to show exported SVG [#601](https://github.com/knsv/mermaid/issues/601) - Online Editor fails to show exported SVG [\#601](https://github.com/knsv/mermaid/issues/601)
- Just saying thanks! [#597](https://github.com/knsv/mermaid/issues/597) - Just saying thanks! [\#597](https://github.com/knsv/mermaid/issues/597)
- stylesheet crashed with other library like abcjs [#596](https://github.com/knsv/mermaid/issues/596) - stylesheet crashed with other library like abcjs [\#596](https://github.com/knsv/mermaid/issues/596)
- Missing connection [#594](https://github.com/knsv/mermaid/issues/594) - Missing connection [\#594](https://github.com/knsv/mermaid/issues/594)
- How to use mermaid on node.js restful api? [#593](https://github.com/knsv/mermaid/issues/593) - How to use mermaid on node.js restful api? [\#593](https://github.com/knsv/mermaid/issues/593)
- Remove status code [#589](https://github.com/knsv/mermaid/issues/589) - Remove status code [\#589](https://github.com/knsv/mermaid/issues/589)
- Golang based editor [#588](https://github.com/knsv/mermaid/issues/588) - Golang based editor [\#588](https://github.com/knsv/mermaid/issues/588)
- sequenceDiagram -> notetext css font is hardcoded [#587](https://github.com/knsv/mermaid/issues/587) - sequenceDiagram -\> notetext css font is hardcoded [\#587](https://github.com/knsv/mermaid/issues/587)
- Multiple graph in the live editor [#586](https://github.com/knsv/mermaid/issues/586) - Multiple graph in the live editor [\#586](https://github.com/knsv/mermaid/issues/586)
- All \<svg> elements in page are colored black [#584](https://github.com/knsv/mermaid/issues/584) - All \<svg\> elements in page are colored black [\#584](https://github.com/knsv/mermaid/issues/584)
- Styling: classes aren't applied to elements. [#582](https://github.com/knsv/mermaid/issues/582) - Styling: classes aren't applied to elements. [\#582](https://github.com/knsv/mermaid/issues/582)
- Rounded connections [#580](https://github.com/knsv/mermaid/issues/580) - Rounded connections [\#580](https://github.com/knsv/mermaid/issues/580)
- Arrows are not being shown correctly in the dark theme [#578](https://github.com/knsv/mermaid/issues/578) - Arrows are not being shown correctly in the dark theme [\#578](https://github.com/knsv/mermaid/issues/578)
- The documentation for CLI seems outdated. [#572](https://github.com/knsv/mermaid/issues/572) - The documentation for CLI seems outdated. [\#572](https://github.com/knsv/mermaid/issues/572)
- No effect of click event:can not open link [#571](https://github.com/knsv/mermaid/issues/571) - No effect of click event:can not open link [\#571](https://github.com/knsv/mermaid/issues/571)
- Text colors are not correct in VSCODE [#570](https://github.com/knsv/mermaid/issues/570) - Text colors are not correct in VSCODE [\#570](https://github.com/knsv/mermaid/issues/570)
- Nodes aren't aligned properly (just need an explanation) [#568](https://github.com/knsv/mermaid/issues/568) - Nodes aren't aligned properly \(just need an explanation\) [\#568](https://github.com/knsv/mermaid/issues/568)
- setting margin around figure in R [#567](https://github.com/knsv/mermaid/issues/567) - setting margin around figure in R [\#567](https://github.com/knsv/mermaid/issues/567)
- Arrows should Come out in upward and Downward direction from decision Node [#566](https://github.com/knsv/mermaid/issues/566) - Arrows should Come out in upward and Downward direction from decision Node [\#566](https://github.com/knsv/mermaid/issues/566)
- TypeError: Cannot read property 'select' of undefined [#563](https://github.com/knsv/mermaid/issues/563) - TypeError: Cannot read property 'select' of undefined [\#563](https://github.com/knsv/mermaid/issues/563)
- A little bug [#557](https://github.com/knsv/mermaid/issues/557) - A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
- Japanese text appears garbled [#554](https://github.com/knsv/mermaid/issues/554) - Japanese text appears garbled [\#554](https://github.com/knsv/mermaid/issues/554)
- classdiagram not works in mermaid live_editor [#553](https://github.com/knsv/mermaid/issues/553) - classdiagram not works in mermaid live_editor [\#553](https://github.com/knsv/mermaid/issues/553)
- font awesome in link text? [#546](https://github.com/knsv/mermaid/issues/546) - font awesome in link text? [\#546](https://github.com/knsv/mermaid/issues/546)
- q: heard of the cosmogol standard? [#545](https://github.com/knsv/mermaid/issues/545) - q: heard of the cosmogol standard? [\#545](https://github.com/knsv/mermaid/issues/545)
- Arrow heads missing (cli, 7.0.3) [#544](https://github.com/knsv/mermaid/issues/544) - Arrow heads missing \(cli, 7.0.3\) [\#544](https://github.com/knsv/mermaid/issues/544)
- No Edge Boxes if useHtmlLabels=false [#541](https://github.com/knsv/mermaid/issues/541) - No Edge Boxes if useHtmlLabels=false [\#541](https://github.com/knsv/mermaid/issues/541)
- how to change mermaid text color or line text block color？ [#534](https://github.com/knsv/mermaid/issues/534) - how to change mermaid text color or line text block color？ [\#534](https://github.com/knsv/mermaid/issues/534)
- FlowChart visualization broken when downloading from live editor [#533](https://github.com/knsv/mermaid/issues/533) - FlowChart visualization broken when downloading from live editor [\#533](https://github.com/knsv/mermaid/issues/533)
- Can't get flowchart to render paths at the top of the diagram; I even tried the online editor and that shows the same issue. Thoughts? [#532](https://github.com/knsv/mermaid/issues/532) - Can't get flowchart to render paths at the top of the diagram; I even tried the online editor and that shows the same issue. Thoughts? [\#532](https://github.com/knsv/mermaid/issues/532)
- live editor make browser(safari on macOS\&iOS) not longer respond [#531](https://github.com/knsv/mermaid/issues/531) - live editor make browser\(safari on macOS&iOS\) not longer respond [\#531](https://github.com/knsv/mermaid/issues/531)
- css classes need a prefix/namespace [#527](https://github.com/knsv/mermaid/issues/527) - css classes need a prefix/namespace [\#527](https://github.com/knsv/mermaid/issues/527)
- input activate/deactivate cause safari unresponding [#521](https://github.com/knsv/mermaid/issues/521) - input activate/deactivate cause safari unresponding [\#521](https://github.com/knsv/mermaid/issues/521)
- Cannot Render the Mermaid Graph to PDF ? [#520](https://github.com/knsv/mermaid/issues/520) - Cannot Render the Mermaid Graph to PDF ? [\#520](https://github.com/knsv/mermaid/issues/520)
- clicking links works from inset in subgraph but not from nodes [#516](https://github.com/knsv/mermaid/issues/516) - clicking links works from inset in subgraph but not from nodes [\#516](https://github.com/knsv/mermaid/issues/516)
- Strange syntax error - when importing mermaid.js [#515](https://github.com/knsv/mermaid/issues/515) - Strange syntax error - when importing mermaid.js [\#515](https://github.com/knsv/mermaid/issues/515)
- gantt x-axis display [#510](https://github.com/knsv/mermaid/issues/510) - gantt x-axis display [\#510](https://github.com/knsv/mermaid/issues/510)
- phantomjs renamed to phantomjs-prebuilt [#508](https://github.com/knsv/mermaid/issues/508) - phantomjs renamed to phantomjs-prebuilt [\#508](https://github.com/knsv/mermaid/issues/508)
- issue when using sphinxcontrib-mermaid extension for sphinx [#507](https://github.com/knsv/mermaid/issues/507) - issue when using sphinxcontrib-mermaid extension for sphinx [\#507](https://github.com/knsv/mermaid/issues/507)
- layout of docs page looks broken [#504](https://github.com/knsv/mermaid/issues/504) - layout of docs page looks broken [\#504](https://github.com/knsv/mermaid/issues/504)
- Problem showing graph with php on localhost [#502](https://github.com/knsv/mermaid/issues/502) - Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
- logLevel's option doesn't work at 7.0.0 [#501](https://github.com/knsv/mermaid/issues/501) - logLevel's option doesn't work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
- How do I get the log for a render or parse attempt? [#500](https://github.com/knsv/mermaid/issues/500) - How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
- Mermaid neutral style style to built in latest release [#499](https://github.com/knsv/mermaid/issues/499) - Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
- Any plans for adding a typescript definition file? [#495](https://github.com/knsv/mermaid/issues/495) - Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
- Gantt diagrams too narrow [#493](https://github.com/knsv/mermaid/issues/493) - Gantt diagrams too narrow [\#493](https://github.com/knsv/mermaid/issues/493)
- Flowchart edge labels placement [#490](https://github.com/knsv/mermaid/issues/490) - Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
- Very different styles when rendering as png vs. svg [#489](https://github.com/knsv/mermaid/issues/489) - Very different styles when rendering as png vs. svg [\#489](https://github.com/knsv/mermaid/issues/489)
- New editor that supports mermaid: Caret [#488](https://github.com/knsv/mermaid/issues/488) - New editor that supports mermaid: Caret [\#488](https://github.com/knsv/mermaid/issues/488)
- Gant PNG margin [#486](https://github.com/knsv/mermaid/issues/486) - Gant PNG margin [\#486](https://github.com/knsv/mermaid/issues/486)
- ReferenceError: window is not defined [#485](https://github.com/knsv/mermaid/issues/485) - ReferenceError: window is not defined [\#485](https://github.com/knsv/mermaid/issues/485)
- Menu and layout bugs in docs [#484](https://github.com/knsv/mermaid/issues/484) - Menu and layout bugs in docs [\#484](https://github.com/knsv/mermaid/issues/484)
- Mermaid resets some of the page CSS styles [#482](https://github.com/knsv/mermaid/issues/482) - Mermaid resets some of the page CSS styles [\#482](https://github.com/knsv/mermaid/issues/482)
- Arrows rendering incorrectly in online editor [#480](https://github.com/knsv/mermaid/issues/480) - Arrows rendering incorrectly in online editor [\#480](https://github.com/knsv/mermaid/issues/480)
- CSS stroke-dasharray ignored by browsers but not other viewers [#474](https://github.com/knsv/mermaid/issues/474) - CSS stroke-dasharray ignored by browsers but not other viewers [\#474](https://github.com/knsv/mermaid/issues/474)
- mermaid - Browser Support issue [#472](https://github.com/knsv/mermaid/issues/472) - mermaid - Browser Support issue [\#472](https://github.com/knsv/mermaid/issues/472)
- Totally love mermaid I might pop! [#471](https://github.com/knsv/mermaid/issues/471) - Totally love mermaid I might pop! [\#471](https://github.com/knsv/mermaid/issues/471)
- Sequence Diagram: Missing x on async arrows (png) [#469](https://github.com/knsv/mermaid/issues/469) - Sequence Diagram: Missing x on async arrows \(png\) [\#469](https://github.com/knsv/mermaid/issues/469)
- live editor: the svg file rendered from graph is not supported by browsers [#468](https://github.com/knsv/mermaid/issues/468) - live editor: the svg file rendered from graph is not supported by browsers [\#468](https://github.com/knsv/mermaid/issues/468)
- Not found css [#462](https://github.com/knsv/mermaid/issues/462) - Not found css [\#462](https://github.com/knsv/mermaid/issues/462)
- Phantomjs Dependency [#461](https://github.com/knsv/mermaid/issues/461) - Phantomjs Dependency [\#461](https://github.com/knsv/mermaid/issues/461)
- Mermaid cli not working for subgraphs [#459](https://github.com/knsv/mermaid/issues/459) - Mermaid cli not working for subgraphs [\#459](https://github.com/knsv/mermaid/issues/459)
- Support for notes across multiple participants? [#458](https://github.com/knsv/mermaid/issues/458) - Support for notes across multiple participants? [\#458](https://github.com/knsv/mermaid/issues/458)
- Related to Issue #329: Phantomjs issues. [#455](https://github.com/knsv/mermaid/issues/455) - Related to Issue \#329: Phantomjs issues. [\#455](https://github.com/knsv/mermaid/issues/455)
- Add a click style [#426](https://github.com/knsv/mermaid/issues/426) - Add a click style [\#426](https://github.com/knsv/mermaid/issues/426)
- Add Parallel block (par) to sequence diagrams [#425](https://github.com/knsv/mermaid/issues/425) - Add Parallel block \(par\) to sequence diagrams [\#425](https://github.com/knsv/mermaid/issues/425)
- updating shapes after the flow chart rendering complete [#424](https://github.com/knsv/mermaid/issues/424) - updating shapes after the flow chart rendering complete [\#424](https://github.com/knsv/mermaid/issues/424)
- can't catch parse error Maximum call stack size exceeded on safari [#421](https://github.com/knsv/mermaid/issues/421) - can't catch parse error Maximum call stack size exceeded on safari [\#421](https://github.com/knsv/mermaid/issues/421)
- Arrows endings are missing [#419](https://github.com/knsv/mermaid/issues/419) - Arrows endings are missing [\#419](https://github.com/knsv/mermaid/issues/419)
- shouldn't mermaid become more like Markdown ? [#417](https://github.com/knsv/mermaid/issues/417) - shouldn't mermaid become more like Markdown ? [\#417](https://github.com/knsv/mermaid/issues/417)
- Live editor show rendered diagram if syntax invalid [#415](https://github.com/knsv/mermaid/issues/415) - Live editor show rendered diagram if syntax invalid [\#415](https://github.com/knsv/mermaid/issues/415)
- Linkstyle stroke does not work [#410](https://github.com/knsv/mermaid/issues/410) - Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410)
- flowchart id's with dots in them .. break links [#408](https://github.com/knsv/mermaid/issues/408) - flowchart id's with dots in them .. break links [\#408](https://github.com/knsv/mermaid/issues/408)
- Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [#407](https://github.com/knsv/mermaid/issues/407) - Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407)
- Some Chinese character will case Safari no responding. [#405](https://github.com/knsv/mermaid/issues/405) - Some Chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
- Cannot center-justify text in nodes? [#397](https://github.com/knsv/mermaid/issues/397) - Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397)
- Edge labels should have white background in live editor [#396](https://github.com/knsv/mermaid/issues/396) - Edge labels should have white background in live editor [\#396](https://github.com/knsv/mermaid/issues/396)
- Live editor does not support activate/deactivate [#394](https://github.com/knsv/mermaid/issues/394) - Live editor does not support activate/deactivate [\#394](https://github.com/knsv/mermaid/issues/394)
- Styling subgraph? [#391](https://github.com/knsv/mermaid/issues/391) - Styling subgraph? [\#391](https://github.com/knsv/mermaid/issues/391)
- Update live editor to version 6.0.0 [#387](https://github.com/knsv/mermaid/issues/387) - Update live editor to version 6.0.0 [\#387](https://github.com/knsv/mermaid/issues/387)
- sequence diagram config issue [#385](https://github.com/knsv/mermaid/issues/385) - sequence diagram config issue [\#385](https://github.com/knsv/mermaid/issues/385)
- How to add newline in the text [#384](https://github.com/knsv/mermaid/issues/384) - How to add newline in the text [\#384](https://github.com/knsv/mermaid/issues/384)
- PhantomJS crashes on a large graph [#380](https://github.com/knsv/mermaid/issues/380) - PhantomJS crashes on a large graph [\#380](https://github.com/knsv/mermaid/issues/380)
- Finnish support for class diagrams using plantuml syntax [#377](https://github.com/knsv/mermaid/issues/377) - Finnish support for class diagrams using plantuml syntax [\#377](https://github.com/knsv/mermaid/issues/377)
- mermaidAPI.render generated different svg code from mermaid.int() [#374](https://github.com/knsv/mermaid/issues/374) - mermaidAPI.render generated different svg code from mermaid.int\(\) [\#374](https://github.com/knsv/mermaid/issues/374)
- Put your own action on the chart [#372](https://github.com/knsv/mermaid/issues/372) - Put your own action on the chart [\#372](https://github.com/knsv/mermaid/issues/372)
- when declaring participants the elements are generated twice [#370](https://github.com/knsv/mermaid/issues/370) - when declaring participants the elements are generated twice [\#370](https://github.com/knsv/mermaid/issues/370)
- Example Flowchart is cut in display (Chrome). [#368](https://github.com/knsv/mermaid/issues/368) - Example Flowchart is cut in display \(Chrome\). [\#368](https://github.com/knsv/mermaid/issues/368)
- Add shebang support to diagrams [#365](https://github.com/knsv/mermaid/issues/365) - Add shebang support to diagrams [\#365](https://github.com/knsv/mermaid/issues/365)
- Silencing CLI output [#352](https://github.com/knsv/mermaid/issues/352) - Silencing CLI output [\#352](https://github.com/knsv/mermaid/issues/352)
- SequenceDiagram: 3+ Alternative Paths [#348](https://github.com/knsv/mermaid/issues/348) - SequenceDiagram: 3+ Alternative Paths [\#348](https://github.com/knsv/mermaid/issues/348)
- Smaller height of actor boxes [#342](https://github.com/knsv/mermaid/issues/342) - Smaller height of actor boxes [\#342](https://github.com/knsv/mermaid/issues/342)
- Question: lib/phantomscript.js - foreignObjects in SVG - related to #58 [#340](https://github.com/knsv/mermaid/issues/340) - Question: lib/phantomscript.js - foreignObjects in SVG - related to \#58 [\#340](https://github.com/knsv/mermaid/issues/340)
- npm test fails on osx being blocked at Can not load "PhantomJS", it is not registered! [#337](https://github.com/knsv/mermaid/issues/337) - npm test fails on osx being blocked at Can not load "PhantomJS", it is not registered! [\#337](https://github.com/knsv/mermaid/issues/337)
- Tabs & subgraphs cause rendering error [#336](https://github.com/knsv/mermaid/issues/336) - Tabs & subgraphs cause rendering error [\#336](https://github.com/knsv/mermaid/issues/336)
- Display question: right angles [#335](https://github.com/knsv/mermaid/issues/335) - Display question: right angles [\#335](https://github.com/knsv/mermaid/issues/335)
- No Arrows rendered v0.5.8 [#330](https://github.com/knsv/mermaid/issues/330) - No Arrows rendered v0.5.8 [\#330](https://github.com/knsv/mermaid/issues/330)
- You had errors in your syntax. Use --help for further information. [#327](https://github.com/knsv/mermaid/issues/327) - You had errors in your syntax. Use --help for further information. [\#327](https://github.com/knsv/mermaid/issues/327)
- Allow alternate arrow syntax that doesn't close html comments [#322](https://github.com/knsv/mermaid/issues/322) - Allow alternate arrow syntax that doesn't close html comments [\#322](https://github.com/knsv/mermaid/issues/322)
- Comment in subgraph [#319](https://github.com/knsv/mermaid/issues/319) - Comment in subgraph [\#319](https://github.com/knsv/mermaid/issues/319)
- Update graph [#311](https://github.com/knsv/mermaid/issues/311) - Update graph [\#311](https://github.com/knsv/mermaid/issues/311)
- css conflicts with boostrap's css [#308](https://github.com/knsv/mermaid/issues/308) - css conflicts with boostrap's css [\#308](https://github.com/knsv/mermaid/issues/308)
- Can not get click event to fire. [#306](https://github.com/knsv/mermaid/issues/306) - Can not get click event to fire. [\#306](https://github.com/knsv/mermaid/issues/306)
- Fix phantomjs2 compatibility [#304](https://github.com/knsv/mermaid/issues/304) - Fix phantomjs2 compatibility [\#304](https://github.com/knsv/mermaid/issues/304)
- Flowcharts do not work in native IE11 [#303](https://github.com/knsv/mermaid/issues/303) - Flowcharts do not work in native IE11 [\#303](https://github.com/knsv/mermaid/issues/303)
- Integration with remark.js - tutorial added [#302](https://github.com/knsv/mermaid/issues/302) - Integration with remark.js - tutorial added [\#302](https://github.com/knsv/mermaid/issues/302)
- Sequence diagram Loops: changing boxMargin spoils the "loop" notation [#299](https://github.com/knsv/mermaid/issues/299) - Sequence diagram Loops: changing boxMargin spoils the "loop" notation [\#299](https://github.com/knsv/mermaid/issues/299)
- src/mermaid.js generates bad code [#297](https://github.com/knsv/mermaid/issues/297) - src/mermaid.js generates bad code [\#297](https://github.com/knsv/mermaid/issues/297)
- Fresh fork: jasmine tests fail [#294](https://github.com/knsv/mermaid/issues/294) - Fresh fork: jasmine tests fail [\#294](https://github.com/knsv/mermaid/issues/294)
- CSS clash [#292](https://github.com/knsv/mermaid/issues/292) - CSS clash [\#292](https://github.com/knsv/mermaid/issues/292)
- Mermaid does not work in Chrome 48 [#281](https://github.com/knsv/mermaid/issues/281) - Mermaid does not work in Chrome 48 [\#281](https://github.com/knsv/mermaid/issues/281)
- circle and ellipse cannot change color by classDef [#271](https://github.com/knsv/mermaid/issues/271) - circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271)
- npm run watch doesn't work due missing dependencies [#266](https://github.com/knsv/mermaid/issues/266) - npm run watch doesn't work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
- label out of node [#262](https://github.com/knsv/mermaid/issues/262) - label out of node [\#262](https://github.com/knsv/mermaid/issues/262)
- IE11 Support issue [#261](https://github.com/knsv/mermaid/issues/261) - IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
- mermaid without browser [#260](https://github.com/knsv/mermaid/issues/260) - mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
- Insufficient capacity of gantt diagrams [#226](https://github.com/knsv/mermaid/issues/226) - Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
- some WARN about installation [#222](https://github.com/knsv/mermaid/issues/222) - some WARN about installation [\#222](https://github.com/knsv/mermaid/issues/222)
- Live editor offline access [#217](https://github.com/knsv/mermaid/issues/217) - Live editor offline access [\#217](https://github.com/knsv/mermaid/issues/217)
- suggest: code highlight mode config for editors [#212](https://github.com/knsv/mermaid/issues/212) - suggest: code highlight mode config for editors [\#212](https://github.com/knsv/mermaid/issues/212)
- Uncaught RangeError: Maximum call stack size exceeded [#189](https://github.com/knsv/mermaid/issues/189) - Uncaught RangeError: Maximum call stack size exceeded [\#189](https://github.com/knsv/mermaid/issues/189)
- Styling label texts [#50](https://github.com/knsv/mermaid/issues/50) - Styling label texts [\#50](https://github.com/knsv/mermaid/issues/50)
**Merged pull requests:** **Merged pull requests:**
- Remove console.log in classDB. [#861](https://github.com/knsv/mermaid/pull/861) ([Arthaey](https://github.com/Arthaey)) - Remove console.log in classDB. [\#861](https://github.com/knsv/mermaid/pull/861) ([Arthaey](https://github.com/Arthaey))
- Bump sshpk from 1.13.1 to 1.16.1 [#851](https://github.com/knsv/mermaid/pull/851) ([dependabot\[bot\]](https://github.com/apps/dependabot)) - Bump sshpk from 1.13.1 to 1.16.1 [\#851](https://github.com/knsv/mermaid/pull/851) ([dependabot[bot]](https://github.com/apps/dependabot))
- Significantly smaller bundles [#850](https://github.com/knsv/mermaid/pull/850) ([fabiospampinato](https://github.com/fabiospampinato)) - Significantly smaller bundles [\#850](https://github.com/knsv/mermaid/pull/850) ([fabiospampinato](https://github.com/fabiospampinato))
- Support styling of subgraphs [#845](https://github.com/knsv/mermaid/pull/845) ([Qix-](https://github.com/Qix-)) - Support styling of subgraphs [\#845](https://github.com/knsv/mermaid/pull/845) ([Qix-](https://github.com/Qix-))
- fix dark theme loop labels not visible [#837](https://github.com/knsv/mermaid/pull/837) ([jnnnnn](https://github.com/jnnnnn)) - fix dark theme loop labels not visible [\#837](https://github.com/knsv/mermaid/pull/837) ([jnnnnn](https://github.com/jnnnnn))
- fix draw function can only call once [#832](https://github.com/knsv/mermaid/pull/832) ([vaniship](https://github.com/vaniship)) - fix draw function can only call once [\#832](https://github.com/knsv/mermaid/pull/832) ([vaniship](https://github.com/vaniship))
- Fix dotted lines not appearing in flowcharts when HTML labels disabled [#828](https://github.com/knsv/mermaid/pull/828) ([stanhu](https://github.com/stanhu)) - Fix dotted lines not appearing in flowcharts when HTML labels disabled [\#828](https://github.com/knsv/mermaid/pull/828) ([stanhu](https://github.com/stanhu))
- Fix issue with XML line breaks inside vertex labels [#824](https://github.com/knsv/mermaid/pull/824) ([jsyang](https://github.com/jsyang)) - Fix issue with XML line breaks inside vertex labels [\#824](https://github.com/knsv/mermaid/pull/824) ([jsyang](https://github.com/jsyang))
- fixed diagrams [#810](https://github.com/knsv/mermaid/pull/810) ([0xflotus](https://github.com/0xflotus)) - fixed diagrams [\#810](https://github.com/knsv/mermaid/pull/810) ([0xflotus](https://github.com/0xflotus))
- Clickable gantt tasks [#804](https://github.com/knsv/mermaid/pull/804) ([abzicht](https://github.com/abzicht)) - Clickable gantt tasks [\#804](https://github.com/knsv/mermaid/pull/804) ([abzicht](https://github.com/abzicht))
- linkStyle now supports list of indexes with a few tests [#798](https://github.com/knsv/mermaid/pull/798) ([ivan-danilov](https://github.com/ivan-danilov)) - linkStyle now supports list of indexes with a few tests [\#798](https://github.com/knsv/mermaid/pull/798) ([ivan-danilov](https://github.com/ivan-danilov))
- fix class diagram mermaid [#795](https://github.com/knsv/mermaid/pull/795) ([DanShai](https://github.com/DanShai)) - fix class diagram mermaid [\#795](https://github.com/knsv/mermaid/pull/795) ([DanShai](https://github.com/DanShai))
- Added exclude weekdays to definition [#792](https://github.com/knsv/mermaid/pull/792) ([jopapo](https://github.com/jopapo)) - Added exclude weekdays to definition [\#792](https://github.com/knsv/mermaid/pull/792) ([jopapo](https://github.com/jopapo))
- SVG link rendering [#791](https://github.com/knsv/mermaid/pull/791) ([flying-sheep](https://github.com/flying-sheep)) - SVG link rendering [\#791](https://github.com/knsv/mermaid/pull/791) ([flying-sheep](https://github.com/flying-sheep))
- Gantt milestones [#788](https://github.com/knsv/mermaid/pull/788) ([gijswijs](https://github.com/gijswijs)) - Gantt milestones [\#788](https://github.com/knsv/mermaid/pull/788) ([gijswijs](https://github.com/gijswijs))
- Remove duplicate code [#768](https://github.com/knsv/mermaid/pull/768) ([znxkznxk1030](https://github.com/znxkznxk1030)) - Remove duplicate code [\#768](https://github.com/knsv/mermaid/pull/768) ([znxkznxk1030](https://github.com/znxkznxk1030))
- Render nodes as real links [#765](https://github.com/knsv/mermaid/pull/765) ([flying-sheep](https://github.com/flying-sheep)) - Render nodes as real links [\#765](https://github.com/knsv/mermaid/pull/765) ([flying-sheep](https://github.com/flying-sheep))
- Fix issue with marker-end. [#757](https://github.com/knsv/mermaid/pull/757) ([gjlubbertsen](https://github.com/gjlubbertsen)) - Fix issue with marker-end. [\#757](https://github.com/knsv/mermaid/pull/757) ([gjlubbertsen](https://github.com/gjlubbertsen))
- Make Class Diagrams usable in Stackedit and Live Editor [#749](https://github.com/knsv/mermaid/pull/749) ([monsterkrampe](https://github.com/monsterkrampe)) - Make Class Diagrams usable in Stackedit and Live Editor [\#749](https://github.com/knsv/mermaid/pull/749) ([monsterkrampe](https://github.com/monsterkrampe))
- Adding trapezoid and inverse trapezoid vertex options. [#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf)) - Adding trapezoid and inverse trapezoid vertex options. [\#741](https://github.com/knsv/mermaid/pull/741) ([adamwulf](https://github.com/adamwulf))
- Add option for right angles [#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland)) - Add option for right angles [\#721](https://github.com/knsv/mermaid/pull/721) ([paulbland](https://github.com/paulbland))
- Add nested activation classes [#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland)) - Add nested activation classes [\#720](https://github.com/knsv/mermaid/pull/720) ([paulbland](https://github.com/paulbland))
- wip: class diagram cardinality display [#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz)) - wip: class diagram cardinality display [\#705](https://github.com/knsv/mermaid/pull/705) ([Vrixyz](https://github.com/Vrixyz))
- add comments about CSS in config [#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90)) - add comments about CSS in config [\#688](https://github.com/knsv/mermaid/pull/688) ([imma90](https://github.com/imma90))
- SequenceDiagram: Add support for multiple alt else statements [#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel)) - SequenceDiagram: Add support for multiple alt else statements [\#641](https://github.com/knsv/mermaid/pull/641) ([sechel](https://github.com/sechel))
- fix #426 - add class .clickable on nodes with click function or link [#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil)) - fix \#426 - add class .clickable on nodes with click function or link [\#598](https://github.com/knsv/mermaid/pull/598) ([thomasleveil](https://github.com/thomasleveil))
- Spec fix 1 [#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt)) - Spec fix 1 [\#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))
## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01) ## [7.0.5](https://github.com/knsv/mermaid/tree/7.0.5) (2017-09-01)
@@ -436,48 +436,48 @@ mermaidAPI.initialize({
**Closed issues:** **Closed issues:**
- demos on io site not working [#466](https://github.com/knsv/mermaid/issues/466) - demos on io site not working [\#466](https://github.com/knsv/mermaid/issues/466)
- Can not be generated PNG pictures through CLI with Chinese [#451](https://github.com/knsv/mermaid/issues/451) - Can not be generated PNG pictures through CLI with Chinese [\#451](https://github.com/knsv/mermaid/issues/451)
- Round nodes cannot be styled with CSS classes [#443](https://github.com/knsv/mermaid/issues/443) - Round nodes cannot be styled with CSS classes [\#443](https://github.com/knsv/mermaid/issues/443)
- webpack gulp UglifyJsPlugin error. [#440](https://github.com/knsv/mermaid/issues/440) - webpack gulp UglifyJsPlugin error. [\#440](https://github.com/knsv/mermaid/issues/440)
- String concatenation isn't working [#432](https://github.com/knsv/mermaid/issues/432) - String concatenation isn't working [\#432](https://github.com/knsv/mermaid/issues/432)
- text flow/wrap in actor box of sequence diagram [#422](https://github.com/knsv/mermaid/issues/422) - text flow/wrap in actor box of sequence diagram [\#422](https://github.com/knsv/mermaid/issues/422)
- Online live editor still use old version [#402](https://github.com/knsv/mermaid/issues/402) - Online live editor still use old version [\#402](https://github.com/knsv/mermaid/issues/402)
- uncaught TypeError: t.getTransformToElement is not a function [#401](https://github.com/knsv/mermaid/issues/401) - uncaught TypeError: t.getTransformToElement is not a function [\#401](https://github.com/knsv/mermaid/issues/401)
- Only works when using browserify'd code [#373](https://github.com/knsv/mermaid/issues/373) - Only works when using browserify'd code [\#373](https://github.com/knsv/mermaid/issues/373)
- document the use of shebang line in mmd files [#364](https://github.com/knsv/mermaid/issues/364) - document the use of shebang line in mmd files [\#364](https://github.com/knsv/mermaid/issues/364)
- Diagrams are small and unreadable in IE 11 - since 0.5.1 [#356](https://github.com/knsv/mermaid/issues/356) - Diagrams are small and unreadable in IE 11 - since 0.5.1 [\#356](https://github.com/knsv/mermaid/issues/356)
- \[Feature Request] ER-Diagram Support [#354](https://github.com/knsv/mermaid/issues/354) - \[Feature Request\] ER-Diagram Support [\#354](https://github.com/knsv/mermaid/issues/354)
- The need for mermaid.css should be mentioned explicitly in the intro docs... [#273](https://github.com/knsv/mermaid/issues/273) - The need for mermaid.css should be mentioned explicitly in the intro docs... [\#273](https://github.com/knsv/mermaid/issues/273)
**Merged pull requests:** **Merged pull requests:**
- Update index.html [#465](https://github.com/knsv/mermaid/pull/465) ([bmsleight](https://github.com/bmsleight)) - Update index.html [\#465](https://github.com/knsv/mermaid/pull/465) ([bmsleight](https://github.com/bmsleight))
- Fix for #416, customizing link style with any color sets `fill` property to `black` instead of `none` [#452](https://github.com/knsv/mermaid/pull/452) ([joshuacolvin](https://github.com/joshuacolvin)) - Fix for \#416, customizing link style with any color sets `fill` property to `black` instead of `none` [\#452](https://github.com/knsv/mermaid/pull/452) ([joshuacolvin](https://github.com/joshuacolvin))
- Allow .node>circle to receive css styles [#449](https://github.com/knsv/mermaid/pull/449) ([bfriedz](https://github.com/bfriedz)) - Allow .node\>circle to receive css styles [\#449](https://github.com/knsv/mermaid/pull/449) ([bfriedz](https://github.com/bfriedz))
- Fix spelling [#447](https://github.com/knsv/mermaid/pull/447) ([jawn](https://github.com/jawn)) - Fix spelling [\#447](https://github.com/knsv/mermaid/pull/447) ([jawn](https://github.com/jawn))
- added tests and fix cli css style selector lowercase problem [#445](https://github.com/knsv/mermaid/pull/445) ([whyzdev](https://github.com/whyzdev)) - added tests and fix cli css style selector lowercase problem [\#445](https://github.com/knsv/mermaid/pull/445) ([whyzdev](https://github.com/whyzdev))
- Update d3.js [#441](https://github.com/knsv/mermaid/pull/441) ([hetz](https://github.com/hetz)) - Update d3.js [\#441](https://github.com/knsv/mermaid/pull/441) ([hetz](https://github.com/hetz))
- added tests to reproduce #434 in flowchart [#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev)) - added tests to reproduce \#434 in flowchart [\#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev))
- Code Climate config [#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott)) - Code Climate config [\#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott))
- fix gantt and sequence digram cli cfg [#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev)) - fix gantt and sequence digram cli cfg [\#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev))
- fix gantt chart cli configuration broken [#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev)) - fix gantt chart cli configuration broken [\#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev))
- fix gantt chart cli configuration parsing including functions [#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev)) - fix gantt chart cli configuration parsing including functions [\#430](https://github.com/knsv/mermaid/pull/430) ([whyzdev](https://github.com/whyzdev))
- Uses an empty text node instead of a string for svg group labels [#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick)) - Uses an empty text node instead of a string for svg group labels [\#429](https://github.com/knsv/mermaid/pull/429) ([daveaglick](https://github.com/daveaglick))
- use tspan via d3.textwrap to place actor text in sequence diagram [#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev)) - use tspan via d3.textwrap to place actor text in sequence diagram [\#427](https://github.com/knsv/mermaid/pull/427) ([whyzdev](https://github.com/whyzdev))
- \#422 use foreignObject/div to place actor label in sequence diagram [#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev)) - \#422 use foreignObject/div to place actor label in sequence diagram [\#423](https://github.com/knsv/mermaid/pull/423) ([whyzdev](https://github.com/whyzdev))
- Clarify the need for a CSS stylesheet [#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb)) - Clarify the need for a CSS stylesheet [\#413](https://github.com/knsv/mermaid/pull/413) ([sifb](https://github.com/sifb))
- Added hads downstream project [#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied)) - Added hads downstream project [\#412](https://github.com/knsv/mermaid/pull/412) ([sinedied](https://github.com/sinedied))
- update usage and fix #273 [#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance)) - update usage and fix \#273 [\#406](https://github.com/knsv/mermaid/pull/406) ([jinntrance](https://github.com/jinntrance))
- Add https://github.com/raghur/mermaid-filter to downstream projects docs page [#404](https://github.com/knsv/mermaid/pull/404) ([raghur](https://github.com/raghur)) - Add https://github.com/raghur/mermaid-filter to downstream projects docs page [\#404](https://github.com/knsv/mermaid/pull/404) ([raghur](https://github.com/raghur))
- New neutral theme [#395](https://github.com/knsv/mermaid/pull/395) ([sinedied](https://github.com/sinedied)) - New neutral theme [\#395](https://github.com/knsv/mermaid/pull/395) ([sinedied](https://github.com/sinedied))
- fix cli issues [#390](https://github.com/knsv/mermaid/pull/390) ([ben-page](https://github.com/ben-page)) - fix cli issues [\#390](https://github.com/knsv/mermaid/pull/390) ([ben-page](https://github.com/ben-page))
- Add missing space for 'Labels out of bounds' section [#386](https://github.com/knsv/mermaid/pull/386) ([The-Alchemist](https://github.com/The-Alchemist)) - Add missing space for 'Labels out of bounds' section [\#386](https://github.com/knsv/mermaid/pull/386) ([The-Alchemist](https://github.com/The-Alchemist))
- Fix typo: `pats` -> `paths` [#382](https://github.com/knsv/mermaid/pull/382) ([swhgoon](https://github.com/swhgoon)) - Fix typo: `pats` -\> `paths` [\#382](https://github.com/knsv/mermaid/pull/382) ([swhgoon](https://github.com/swhgoon))
- Added class diagram example to README.md [#379](https://github.com/knsv/mermaid/pull/379) ([HustLion](https://github.com/HustLion)) - Added class diagram example to README.md [\#379](https://github.com/knsv/mermaid/pull/379) ([HustLion](https://github.com/HustLion))
- override normal flowchart arrowhead to allow css styling [#376](https://github.com/knsv/mermaid/pull/376) ([dodoinblue](https://github.com/dodoinblue)) - override normal flowchart arrowhead to allow css styling [\#376](https://github.com/knsv/mermaid/pull/376) ([dodoinblue](https://github.com/dodoinblue))
- added sphinx extension [#371](https://github.com/knsv/mermaid/pull/371) ([mgaitan](https://github.com/mgaitan)) - added sphinx extension [\#371](https://github.com/knsv/mermaid/pull/371) ([mgaitan](https://github.com/mgaitan))
- Fix typo in the sequence diagram documentation [#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino)) - Fix typo in the sequence diagram documentation [\#369](https://github.com/knsv/mermaid/pull/369) ([ggpasqualino](https://github.com/ggpasqualino))
## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29) ## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29)
@@ -633,40 +633,40 @@ mermaidAPI.initialize({
**Closed issues:** **Closed issues:**
- Installing “atom-mermaid@0.1.3” failed [#218](https://github.com/knsv/mermaid/issues/218) - Installing “atom-mermaid@0.1.3” failed [\#218](https://github.com/knsv/mermaid/issues/218)
- node feature request [#211](https://github.com/knsv/mermaid/issues/211) - node feature request [\#211](https://github.com/knsv/mermaid/issues/211)
- Please add prefix for styles [#208](https://github.com/knsv/mermaid/issues/208) - Please add prefix for styles [\#208](https://github.com/knsv/mermaid/issues/208)
- Bad handling of block arguments [#207](https://github.com/knsv/mermaid/issues/207) - Bad handling of block arguments [\#207](https://github.com/knsv/mermaid/issues/207)
- please consider port to mac osx [#203](https://github.com/knsv/mermaid/issues/203) - please consider port to mac osx [\#203](https://github.com/knsv/mermaid/issues/203)
- allow phantomjs >=1.9.x [#201](https://github.com/knsv/mermaid/issues/201) - allow phantomjs \>=1.9.x [\#201](https://github.com/knsv/mermaid/issues/201)
- syntax for venn diagrams? [#200](https://github.com/knsv/mermaid/issues/200) - syntax for venn diagrams? [\#200](https://github.com/knsv/mermaid/issues/200)
- Broken CLI Graphs? (v0.5.1) [#196](https://github.com/knsv/mermaid/issues/196) - Broken CLI Graphs? \(v0.5.1\) [\#196](https://github.com/knsv/mermaid/issues/196)
- Static site does not render under HTTPS [#194](https://github.com/knsv/mermaid/issues/194) - Static site does not render under HTTPS [\#194](https://github.com/knsv/mermaid/issues/194)
- Error on simple graph [#192](https://github.com/knsv/mermaid/issues/192) - Error on simple graph [\#192](https://github.com/knsv/mermaid/issues/192)
- Escape "~" [#191](https://github.com/knsv/mermaid/issues/191) - Escape "~" [\#191](https://github.com/knsv/mermaid/issues/191)
- Trying to add link using 'click' to flowchart [#188](https://github.com/knsv/mermaid/issues/188) - Trying to add link using 'click' to flowchart [\#188](https://github.com/knsv/mermaid/issues/188)
- cli: no lines and arrowheads rendered / only dotted lines [#187](https://github.com/knsv/mermaid/issues/187) - cli: no lines and arrowheads rendered / only dotted lines [\#187](https://github.com/knsv/mermaid/issues/187)
- text of mermaid div displayed on page [#186](https://github.com/knsv/mermaid/issues/186) - text of mermaid div displayed on page [\#186](https://github.com/knsv/mermaid/issues/186)
- using mermaid with laravel [#185](https://github.com/knsv/mermaid/issues/185) - using mermaid with laravel [\#185](https://github.com/knsv/mermaid/issues/185)
- Atom editor package [#183](https://github.com/knsv/mermaid/issues/183) - Atom editor package [\#183](https://github.com/knsv/mermaid/issues/183)
- Auto linewrap for notes in sequence diagrams [#178](https://github.com/knsv/mermaid/issues/178) - Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
- Execute code after initialize [#176](https://github.com/knsv/mermaid/issues/176) - Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
- Autoscaling for all diagram types [#175](https://github.com/knsv/mermaid/issues/175) - Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
- Problem wit click event callback [#174](https://github.com/knsv/mermaid/issues/174) - Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
- How to escape characters? [#170](https://github.com/knsv/mermaid/issues/170) - How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
- it can not work [#167](https://github.com/knsv/mermaid/issues/167) - it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
- Broken subgraph using the CLI [#153](https://github.com/knsv/mermaid/issues/153) - Broken subgraph using the CLI [\#153](https://github.com/knsv/mermaid/issues/153)
- IE Support issue [#142](https://github.com/knsv/mermaid/issues/142) - IE Support issue [\#142](https://github.com/knsv/mermaid/issues/142)
- Flowchart truncated [#140](https://github.com/knsv/mermaid/issues/140) - Flowchart truncated [\#140](https://github.com/knsv/mermaid/issues/140)
- Double Quote as text is not working [#219](https://github.com/knsv/mermaid/issues/219) - Double Quote as text is not working [\#219](https://github.com/knsv/mermaid/issues/219)
- classDef / class not working with htmlLabels? [#210](https://github.com/knsv/mermaid/issues/210) - classDef / class not working with htmlLabels? [\#210](https://github.com/knsv/mermaid/issues/210)
- Links in graph missing [#209](https://github.com/knsv/mermaid/issues/209) - Links in graph missing [\#209](https://github.com/knsv/mermaid/issues/209)
- Last word in comment boxes getting cut off by word wrap library : ( [#195](https://github.com/knsv/mermaid/issues/195) - Last word in comment boxes getting cut off by word wrap library : \( [\#195](https://github.com/knsv/mermaid/issues/195)
- Escaping characters in sequence diagram [#193](https://github.com/knsv/mermaid/issues/193) - Escaping characters in sequence diagram [\#193](https://github.com/knsv/mermaid/issues/193)
- SVG foreignObject rendering [#180](https://github.com/knsv/mermaid/issues/180) - SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180)
- IE9 issue [#179](https://github.com/knsv/mermaid/issues/179) - IE9 issue [\#179](https://github.com/knsv/mermaid/issues/179)
- inoperable in an AMD/requirejs environment: IPython Notebook [#127](https://github.com/knsv/mermaid/issues/127) - inoperable in an AMD/requirejs environment: IPython Notebook [\#127](https://github.com/knsv/mermaid/issues/127)
- \[Parser] Hyphen in participant name bring TypeError [#74](https://github.com/knsv/mermaid/issues/74) - \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74)
**Merged pull requests:** **Merged pull requests:**
@@ -912,12 +912,12 @@ mermaidAPI.initialize({
**Merged pull requests:** **Merged pull requests:**
- New grammar will allow statements ending without semicolon as disccused in Issue #38 [#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40)) - New grammar will allow statements ending without semicolon as disccused in Issue \#38 [\#63](https://github.com/knsv/mermaid/pull/63) ([vijay40](https://github.com/vijay40))
- Class based styling [#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes)) - Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
- Fix typos [#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino)) - Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
- Included .DS_Store in gitignore [#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq)) - Included .DS_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
- Improves readability discussed in issue #38 [#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40)) - Improves readability discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
- Added a linting task for gulp [#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv)) - Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05) ## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05)
@@ -936,8 +936,8 @@ mermaidAPI.initialize({
**Merged pull requests:** **Merged pull requests:**
- Include bower_components/ to .gitignore [#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv)) - Include bower_components/ to .gitignore [\#33](https://github.com/knsv/mermaid/pull/33) ([serv](https://github.com/serv))
- Fixed reference to Git repo. [#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis)) - Fixed reference to Git repo. [\#32](https://github.com/knsv/mermaid/pull/32) ([guyellis](https://github.com/guyellis))
## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03) ## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03)

2
docs/Configuration.md
View File

@@ -13,7 +13,7 @@ The Following are the most commonly used methods, and are all tied to Mermaid [D
## [Directives](./directives.md), ## [Directives](./directives.md),
Directives allows limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition. allows the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. you can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition.
## Theme Creation: ## Theme Creation:

13
docs/README.md
View File

@@ -24,7 +24,8 @@ Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-i
Diagramming and documentation costs precious developer time and gets outdated quickly. Diagramming and documentation costs precious developer time and gets outdated quickly.
But not having diagrams or docs ruins productivity and hurts organizational learning.<br/> But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/> <br/> Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/>
<br/>
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/> Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
[Tutorials](./Tutorials.md) has video tutorials. [Tutorials](./Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md). Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md).
@@ -191,11 +192,11 @@ Latest Version: <https://unpkg.com/browse/mermaid@8.8.0/>
To Deploy Mermaid: To Deploy Mermaid:
1. You will need to install node v16, which would have npm 1. You will need to install node v16, which would have npm
2. Download yarn using npm 2. Download yarn using npm
3. Enter the following command: `yarn add mermaid` 3. Enter the following command: `yarn add mermaid`
4. You can then add mermaid as a dev dependency using this command: 4. You can then add mermaid as a dev dependency using this command:
`yarn add --dev mermaid` `yarn add --dev mermaid`
### [Mermaid API](./Setup.md): ### [Mermaid API](./Setup.md):

2
docs/_navbar.md
View File

@@ -1,5 +1,3 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
- Getting started - Getting started
- [Quick start](quickstart.md) - [Quick start](quickstart.md)

102
docs/accessibility.md
View File

@@ -4,12 +4,12 @@
## Accessibility ## Accessibility
Now with Mermaid library is in much wider use, we have started to work towwards more accessible features, based on the feedback from the community.
Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community. Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community.
To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**. To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
## Defining Accessibility Options ## Defining Accessibility Options
### Single line accessibility values ### Single line accessibility values
@@ -33,23 +33,13 @@ Let us take a look at the following example with a flowchart diagram:
``` ```
```mermaid
graph LR
accTitle: Big decisions
accDescr: Flow chart of the decision making process
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
```
See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code: See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
![Accessibility options rendered inside SVG](img/accessibility-div-example.png) ![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
### Multi-line Accessibility title/description ### Multi-line Accessibility title/description
You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then multiple lines, followed by a closing `}`. You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then mutltile lines, followed by a closing `}`.
`accTitle: My single line title value` (**_single line format_**) `accTitle: My single line title value` (**_single line format_**)
@@ -74,21 +64,6 @@ Let us look at it in the following example, with same flowchart:
``` ```
```mermaid
graph LR
accTitle: Big decisions
accDescr {
My multi-line description
of the diagram
}
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
```
See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code: See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png) ![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
@@ -197,22 +172,6 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
``` ```
```mermaid
journey
accTitle: My User Journey Diagram
accDescr: My User Journey Diagram Description
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
#### Gantt Chart #### Gantt Chart
```mermaid-example ```mermaid-example
@@ -262,19 +221,6 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
``` ```
```mermaid
pie
accTitle: My Pie Chart Accessibility Title
accDescr: My Pie Chart Accessibility Description
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```
#### Requirement Diagram #### Requirement Diagram
```mermaid-example ```mermaid-example
@@ -297,27 +243,13 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
``` ```
```mermaid
requirementDiagram
accTitle: My Requirement Diagram
accDescr: My Requirement Diagram Description
requirement test_req { requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity { id: 1
type: simulation text: the test text.
} risk: high
verifymethod: test
test_entity - satisfies -> test_req }
```
#### Gitgraph
```mermaid-example ```mermaid-example
gitGraph gitGraph
@@ -336,21 +268,3 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
commit commit
``` ```
```mermaid
gitGraph
accTitle: My Gitgraph Accessibility Title
accDescr: My Gitgraph Accessibility Description
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
```

341
docs/c4c.md
View File

@@ -2,6 +2,8 @@
# C4 Diagrams # C4 Diagrams
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
> C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable. > C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
Mermaid's c4 diagram syntax is compatible with plantUML. See example below: Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
@@ -51,53 +53,6 @@ Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```
```mermaid
C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
``` ```
For an example, see the source code demos/index.html For an example, see the source code demos/index.html
@@ -126,121 +81,71 @@ The number of shapes per row and the number of boundaries can be adjusted using
The following unfinished features are not supported in the short term. The following unfinished features are not supported in the short term.
- \[ ] sprite - [ ] sprite
- [ ] tags
- [ ] link
- [ ] Legend
- \[ ] tags - [x] System Context
- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
- - [x] Person_Ext
- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
- - [x] SystemDb
- - [x] SystemQueue
- - [x] System_Ext
- - [x] SystemDb_Ext
- - [x] SystemQueue_Ext
- - [x] Boundary(alias, label, ?type, ?tags, $link)
- - [x] Enterprise_Boundary(alias, label, ?tags, $link)
- - [x] System_Boundary
- \[ ] link - [x] Container diagram
- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] ContainerDb
- - [x] ContainerQueue
- - [x] Container_Ext
- - [x] ContainerDb_Ext
- - [x] ContainerQueue_Ext
- - [x] Container_Boundary(alias, label, ?tags, $link)
- \[ ] Legend - [x] Component diagram
- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] ComponentDb
- - [x] ComponentQueue
- - [x] Component_Ext
- - [x] ComponentDb_Ext
- - [x] ComponentQueue_Ext
- \[x] System Context - [x] Dynamic diagram
- - [x] RelIndex(index, from, to, label, ?tags, $link)
- - \[x] Person(alias, label, ?descr, ?sprite, ?tags, $link) - [x] Deployment diagram
- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
- - \[x] Person_Ext - [x] Relationship Types
- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - [x] BiRel (bidirectional relationship)
- - [x] Rel_U, Rel_Up
- - [x] Rel_D, Rel_Down
- - [x] Rel_L, Rel_Left
- - [x] Rel_R, Rel_Right
- - [x] Rel_Back
- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
- - \[x] System(alias, label, ?descr, ?sprite, ?tags, $link) - [ ] Custom tags/stereotypes support and skinparam updates
- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
- - \[x] SystemDb - - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
- - \[x] SystemQueue - - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
- - \[x] System_Ext - - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
- - \[x] SystemDb_Ext - - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
- - \[x] SystemQueue_Ext - - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
- - \[x] Boundary(alias, label, ?type, ?tags, $link)
- - \[x] Enterprise_Boundary(alias, label, ?tags, $link)
- - \[x] System_Boundary
- \[x] Container diagram
- - \[x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - \[x] ContainerDb
- - \[x] ContainerQueue
- - \[x] Container_Ext
- - \[x] ContainerDb_Ext
- - \[x] ContainerQueue_Ext
- - \[x] Container_Boundary(alias, label, ?tags, $link)
- \[x] Component diagram
- - \[x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - \[x] ComponentDb
- - \[x] ComponentQueue
- - \[x] Component_Ext
- - \[x] ComponentDb_Ext
- - \[x] ComponentQueue_Ext
- \[x] Dynamic diagram
- - \[x] RelIndex(index, from, to, label, ?tags, $link)
- \[x] Deployment diagram
- - \[x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
- - \[x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
- - \[x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
- - \[x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
- \[x] Relationship Types
- - \[x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
- - \[x] BiRel (bidirectional relationship)
- - \[x] Rel_U, Rel_Up
- - \[x] Rel_D, Rel_Down
- - \[x] Rel_L, Rel_Left
- - \[x] Rel_R, Rel_Right
- - \[x] Rel_Back
- - \[x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
- \[ ] Custom tags/stereotypes support and skinparam updates
- - \[ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
- - \[ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
- - \[x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
- - \[x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
- - \[ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
- - \[ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
- - \[ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
- - \[ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
- - \[ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
- - \[x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol. There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
@@ -301,52 +206,6 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
``` ```
```mermaid
C4Context
title System Context diagram for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```
## C4 Container diagram (C4Container) ## C4 Container diagram (C4Container)
```mermaid-example ```mermaid-example
@@ -389,46 +248,6 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
``` ```
```mermaid
C4Container
title Container diagram for Internet Banking System
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
Container_Boundary(c1, "Internet Banking") {
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
}
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Rel(customer, web_app, "Uses", "HTTPS")
UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
Rel(customer, spa, "Uses", "HTTPS")
UpdateRelStyle(customer, spa, $offsetY="-40")
Rel(customer, mobile_app, "Uses")
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
Rel(web_app, spa, "Delivers")
UpdateRelStyle(web_app, spa, $offsetX="130")
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
Rel(email_system, customer, "Sends e-mails to")
UpdateRelStyle(email_system, customer, $offsetX="-45")
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
UpdateRelStyle(backend_api, email_system, $offsetY="-60")
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
```
## C4 Component diagram (C4Component) ## C4 Component diagram (C4Component)
```mermaid-example ```mermaid-example
@@ -471,46 +290,6 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
``` ```
```mermaid
C4Component
title Component diagram for Internet Banking System - API Application
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Container_Boundary(api, "API Application") {
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
Rel(sign, security, "Uses")
Rel(accounts, mbsfacade, "Uses")
Rel(security, db, "Read & write to", "JDBC")
Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
}
Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
Rel(spa, accounts, "Uses", "JSON/HTTPS")
Rel(ma, sign, "Uses", "JSON/HTTPS")
Rel(ma, accounts, "Uses", "JSON/HTTPS")
UpdateRelStyle(spa, sign, $offsetY="-40")
UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
UpdateRelStyle(ma, accounts, $offsetY="-40")
UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
UpdateRelStyle(security, db, $offsetY="-40")
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
```
## C4 Dynamic diagram (C4Dynamic) ## C4 Dynamic diagram (C4Dynamic)
```mermaid-example ```mermaid-example

26
docs/classDiagram.md
View File

@@ -500,33 +500,17 @@ classDiagram
Student "1" --o "1" Bike : rides Student "1" --o "1" Bike : rides
``` ```
```mermaid
classDiagram
direction RL
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
```
## Interaction ## Interaction
It is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. It is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
You would define these actions on a separate line after all classes have been declared. You would define these actions on a separate line after all classes have been declared.
action className "reference" "tooltip" ```
click className call callback() "tooltip" action className "reference" "tooltip"
click className href "url" "tooltip" click className call callback() "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

8
docs/development.md
View File

@@ -28,7 +28,7 @@ We make all changes via Pull Requests. As we have many Pull Requests from develo
- Large changes reviewed by knsv or other developer asked to review by knsv - Large changes reviewed by knsv or other developer asked to review by knsv
- Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators - Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
- Documentation (we encourage updates to the `src/docs` folder; you can submit them via direct commits) - Documentation (we encourage updates to the docs folder; you can submit them via direct commits)
When you commit code, create a branch with the following naming convention: When you commit code, create a branch with the following naming convention:
@@ -72,9 +72,9 @@ This tests the rendering and visual appearance of the diagrams. This ensures tha
To start working with the e2e tests: To start working with the e2e tests:
1. Run `yarn dev` to start the dev server 1. Run `yarn dev` to start the dev server
2. Start **Cypress** by running `cypress open` in the **mermaid** folder.\ 2. Start **Cypress** by running `cypress open` in the **mermaid** folder.
(Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`). (Make sure you have path to Cypress in order, the binary is located in `node_modules/.bin`).
The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress. The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.

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

@@ -154,11 +154,6 @@ graph LR
id1>This is the text in the box] id1>This is the text in the box]
``` ```
```mermaid
graph LR
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)
@@ -192,11 +187,6 @@ graph TD
id1[/This is the text in the box/] id1[/This is the text in the box/]
``` ```
```mermaid
graph TD
id1[/This is the text in the box/]
```
### Parallelogram alt ### Parallelogram alt
```mermaid-example ```mermaid-example
@@ -216,11 +206,6 @@ graph TD
A[/Christmas\] A[/Christmas\]
``` ```
```mermaid
graph TD
A[/Christmas\]
```
### Trapezoid alt ### Trapezoid alt
```mermaid-example ```mermaid-example
@@ -390,11 +375,6 @@ graph TB
A & B--> C & D A & B--> C & D
``` ```
```mermaid
graph TB
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
@@ -559,20 +539,6 @@ graph TB
end end
``` ```
```mermaid
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
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
@@ -583,14 +549,6 @@ graph TB
end end
``` ```
```mermaid
graph TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
```
## Flowcharts ## Flowcharts
With the graphtype `flowchart` it is also possible to set edges to and from subgraphs: With the graphtype `flowchart` it is also possible to set edges to and from subgraphs:
@@ -612,23 +570,6 @@ flowchart TB
two --> c2 two --> c2
``` ```
```mermaid
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
```
## Interaction ## Interaction
A node can have click events bound that lead to either a JavaScript callback or to open a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. A node can have click events bound that lead to either a JavaScript callback or to open a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
@@ -662,17 +603,6 @@ graph LR;
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"
``` ```
```mermaid
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip for a callback"
click B "https://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
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/).
@@ -782,13 +712,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
``` ```
```mermaid
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
#### 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.
@@ -813,12 +736,6 @@ graph LR
classDef someclass fill:#f96; classDef someclass fill:#f96;
``` ```
```mermaid
graph LR
A:::someclass --> B
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:
@@ -842,18 +759,13 @@ graph LR;
class A cssClass; class A cssClass;
``` ```
```mermaid
graph LR;
A-->B[AAA<span>BBB</span>];
B-->D;
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.
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
@@ -867,14 +779,6 @@ graph TD
B-->E(A fa:fa-camera-retro perhaps?); B-->E(A fa:fa-camera-retro perhaps?);
``` ```
```mermaid
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
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.
@@ -891,14 +795,6 @@ graph LR
C -->|Two| E[Result two] C -->|Two| E[Result two]
``` ```
```mermaid
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
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.

70
docs/directives.md
View File

@@ -14,7 +14,7 @@ While directives allow you to change most of the default configuration settings,
Mermaid basically supports two types of configuration options to be overridden by directives. Mermaid basically supports two types of configuration options to be overridden by directives.
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are: 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
- theme - theme
- fontFamily - fontFamily
@@ -23,13 +23,15 @@ Mermaid basically supports two types of configuration options to be overridden b
- startOnLoad - startOnLoad
- secure - secure
2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. 2. _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type. For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code. **NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, ```
with their possible values in the docs Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations,
with their possible values in the docs
```
## Declaring directives ## Declaring directives
@@ -40,28 +42,34 @@ Here the structure of a directive text is like a nested key-value pair map or a
Following code snippet shows the structure of a directive: Following code snippet shows the structure of a directive:
%%{ ```
init: { %%{
"theme": "dark", init: {
"fontFamily": "monospace", "theme": "dark",
"logLevel": "info", "fontFamily": "monospace",
"flowchart": { "logLevel": "info",
"htmlLabels": true, "flowchart": {
"curve": "linear" "htmlLabels": true,
}, "curve": "linear"
"sequence": { },
"mirrorActors": true "sequence": {
} "mirrorActors": true
} }
}%% }
}%%
```
You can also define the directives in a single line, like this: You can also define the directives in a single line, like this:
%%{init: { **insert argument here**}}%% ```
%%{init: { **insert argument here**}}%%
```
For example, the following code snippet: For example, the following code snippet:
%%{init: { "sequence": { "mirrorActors":false }}}%% ```
%%{init: { "sequence": { "mirrorActors":false }}}%%
```
**Notes:** **Notes:**
The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored. The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored.
@@ -244,17 +252,6 @@ A --> C[End]
end end
``` ```
```mermaid
%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
subgraph section
B
C
end
```
### Changing Sequence diagram config via directive ### Changing Sequence diagram config via directive
Some common sequence configurations are: Some common sequence configurations are:
@@ -309,12 +306,3 @@ Bob->Alice: Fine, How did you mother like the book I suggested? And did you catc
Alice->Bob: Good. Alice->Bob: Good.
Bob->Alice: Cool Bob->Alice: Cool
``` ```
```mermaid
%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool
```

54
docs/entityRelationshipDiagram.md
View File

@@ -2,6 +2,8 @@
# Entity Relationship Diagrams # Entity Relationship Diagrams
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/entityRelationshipDiagram.md)
> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia. > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
Note that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns. Note that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
@@ -48,26 +50,6 @@ erDiagram
} }
``` ```
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
string name
string custNumber
string sector
}
ORDER ||--|{ LINE-ITEM : contains
ORDER {
int orderNumber
string deliveryAddress
}
LINE-ITEM {
string productCode
int quantity
float pricePerUnit
}
```
When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a _logical_ model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice. When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a _logical_ model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice.
## Syntax ## Syntax
@@ -140,22 +122,6 @@ erDiagram
} }
``` ```
```mermaid
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string registrationNumber
string make
string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string firstName
string lastName
int age
}
```
The attributes are rendered inside the entity boxes: The attributes are rendered inside the entity boxes:
```mermaid-example ```mermaid-example
@@ -174,22 +140,6 @@ erDiagram
} }
``` ```
```mermaid
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string registrationNumber
string make
string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string firstName
string lastName
int age
}
```
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types. The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.
#### Attribute Keys and Comments #### Attribute Keys and Comments

77
docs/examples.md
View File

@@ -16,12 +16,6 @@ pie title NETFLIX
"Time spent watching it" : 10 "Time spent watching it" : 10
``` ```
```mermaid
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
```
```mermaid-example ```mermaid-example
pie title What Voldemort doesn't have? pie title What Voldemort doesn't have?
"FRIENDS" : 2 "FRIENDS" : 2
@@ -29,13 +23,6 @@ pie title What Voldemort doesn't have?
"NOSE" : 45 "NOSE" : 45
``` ```
```mermaid
pie title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45
```
## Basic sequence diagram ## Basic sequence diagram
```mermaid-example ```mermaid-example
@@ -72,14 +59,6 @@ graph LR
C --> D C --> D
``` ```
```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```
## Larger flowchart with some styling ## Larger flowchart with some styling
```mermaid-example ```mermaid-example
@@ -106,30 +85,6 @@ graph TB
class di orange class di orange
``` ```
```mermaid
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
```
## SequenceDiagram: Loops, alt and opt ## SequenceDiagram: Loops, alt and opt
```mermaid-example ```mermaid-example
@@ -148,22 +103,6 @@ sequenceDiagram
end end
``` ```
```mermaid
sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
```
## SequenceDiagram: Message to self in loop ## SequenceDiagram: Message to self in loop
```mermaid-example ```mermaid-example
@@ -262,22 +201,6 @@ sequenceDiagram
## A commit flow diagram. ## A commit flow diagram.
```mermaid-example
gitGraph:
commit "Ashish"
branch newbranch
checkout newbranch
commit id:"1111"
commit tag:"test"
checkout main
commit type: HIGHLIGHT
commit
merge newbranch
commit
branch b2
commit
```
```mermaid ```mermaid
gitGraph: gitGraph:
commit "Ashish" commit "Ashish"

115
docs/flowchart.md
View File

@@ -145,11 +145,6 @@ flowchart LR
id1>This is the text in the box] id1>This is the text in the box]
``` ```
```mermaid
flowchart LR
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)
@@ -207,11 +202,6 @@ flowchart TD
A[/Christmas\] A[/Christmas\]
``` ```
```mermaid
flowchart TD
A[/Christmas\]
```
### Trapezoid alt ### Trapezoid alt
```mermaid-example ```mermaid-example
@@ -393,11 +383,6 @@ flowchart TB
A & B--> C & D A & B--> C & D
``` ```
```mermaid
flowchart TB
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.
@@ -421,12 +406,6 @@ flowchart LR
B --x C B --x C
``` ```
```mermaid
flowchart LR
A --o B
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.
@@ -563,20 +542,6 @@ flowchart TB
end end
``` ```
```mermaid
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
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
@@ -587,14 +552,6 @@ flowchart TB
end end
``` ```
```mermaid
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
```
## flowcharts ## flowcharts
With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below. With the graphtype flowchart it is also possible to set edges to and from subgraphs as in the flowchart below.
@@ -616,23 +573,6 @@ flowchart TB
two --> c2 two --> c2
``` ```
```mermaid
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
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.
@@ -654,23 +594,6 @@ flowchart LR
B1 --> B2 B1 --> B2
``` ```
```mermaid
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
```
## Interaction ## Interaction
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`. It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
@@ -821,13 +744,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
``` ```
```mermaid
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
#### 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
@@ -835,7 +751,9 @@ 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;
```
Attachment of a class to a node is done as per below: Attachment of a class to a node is done as per below:
@@ -853,12 +771,6 @@ flowchart LR
classDef someclass fill:#f96; classDef someclass fill:#f96;
``` ```
```mermaid
flowchart LR
A:::someclass --> B
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
@@ -885,18 +797,13 @@ flowchart LR;
class A cssClass class A cssClass
``` ```
```mermaid
flowchart LR;
A-->B[AAA<span>BBB</span>]
B-->D
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.
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
@@ -920,8 +827,6 @@ flowchart TD
B-->E(A fa:fa-camera-retro perhaps?) B-->E(A fa:fa-camera-retro perhaps?)
``` ```
?> 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.
@@ -938,14 +843,6 @@ flowchart LR
C -->|Two| E[Result two] C -->|Two| E[Result two]
``` ```
```mermaid
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
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.

12
docs/gantt.md
View File

@@ -126,8 +126,6 @@ It is possible to set multiple dependencies separated by space:
cherry :active, c, after b a, 1d cherry :active, c, after b a, 1d
``` ```
### 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
@@ -150,16 +148,6 @@ taska3 : 5min
Final milestone : milestone, m2, 18:14, 2min Final milestone : milestone, m2, 18:14, 2min
``` ```
```mermaid
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49,2min
taska2 : 10min
taska3 : 5min
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`.

390
docs/gitgraph.md
View File

@@ -2,6 +2,8 @@
# Gitgraph Diagrams # Gitgraph Diagrams
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gitgraph.md)
> A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches. > A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works. These kind of diagram are particularly helpful to developers and devops teams to share their Git branching strategies. For example, it makes it easier to visualize how git flow works.
@@ -65,13 +67,6 @@ A simple gitgraph showing three commits on the default (**_main_**) branch:
commit commit
``` ```
```mermaid
gitGraph
commit
commit
commit
```
If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid. If you look closely at the previous example, you can see the default branch `main` along with three commits. Also, notice that by default each commit has been given a unique & random ID. What if you wanted to give your own custom ID to a commit? Yes, it is possible to do that with Mermaid.
### Adding custom commit id ### Adding custom commit id
@@ -181,16 +176,6 @@ Let see this in an example:
commit commit
``` ```
```mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
```
In this example, see how we started with default `main` branch, and pushed two commits on that. In this example, see how we started with default `main` branch, and pushed two commits on that.
Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch. Then we created the `develop` branch, and all commits afterwards are put on the `develop` branch as it became the current branch.
@@ -215,19 +200,6 @@ Let see modify our previous example:
commit commit
``` ```
```mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
```
In this example, see how we started with default `main` branch, and pushed two commits on that. In this example, see how we started with default `main` branch, and pushed two commits on that.
Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch. Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`. After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`.
@@ -258,22 +230,6 @@ Let us modify our previous example to merge our two branches:
commit commit
``` ```
```mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
merge develop
commit
commit
```
In this example, see how we started with default `main` branch, and pushed two commits on that. In this example, see how we started with default `main` branch, and pushed two commits on that.
Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch. Then we created the `develop` branch, and all three commits afterwards are put on the `develop` branch as it became the current branch.
After this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`. After this we made use of the `checkout` keyword to set the current branch as `main`, and all commits that follow are registered against the current branch, i.e. `main`.
@@ -353,9 +309,9 @@ Here, a new commit representing the cherry-pick is created on the current branch
A few important rules to note here are: A few important rules to note here are:
1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above. 1. You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch. 2. The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw. 3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
Let see an example: Let see an example:
@@ -376,23 +332,6 @@ Let see an example:
commit id:"C" commit id:"C"
``` ```
```mermaid
gitGraph
commit id: "ZERO"
branch develop
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
commit id:"TWO"
cherry-pick id:"A"
commit id:"THREE"
checkout develop
commit id:"C"
```
## Gitgraph specific configuration options ## Gitgraph specific configuration options
In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options: In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:
@@ -456,52 +395,6 @@ Usage example:
merge release merge release
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
## Commit labels Layout: Rotated or Horizontal ## Commit labels Layout: Rotated or Horizontal
Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels. Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degrees for better readability. This is particularly useful for commits with long labels.
@@ -531,25 +424,6 @@ gitGraph
commit commit
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
```
Usage example: Horizontal commit labels Usage example: Horizontal commit labels
```mermaid-example ```mermaid-example
@@ -571,25 +445,6 @@ gitGraph
commit commit
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
gitGraph
commit id: "feat(api): ..."
commit id: "a"
commit id: "b"
commit id: "fix(client): .extra long label.."
branch c2
commit id: "feat(modules): ..."
commit id: "test(client): ..."
checkout main
commit id: "fix(api): ..."
commit id: "ci: ..."
branch b1
commit
branch b2
commit
```
## Hiding commit labels ## Hiding commit labels
Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives. Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.
@@ -642,8 +497,14 @@ Usage example:
merge release merge release
``` ```
```mermaid ## Customizing main branch name
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
Sometimes you may want to customize the name of the main/default branch. You can do this by using the `mainBranchName` keyword. By default its value is `main`. You can set it to any string using directives.
Usage example:
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
gitGraph gitGraph
commit commit
branch hotfix branch hotfix
@@ -718,30 +579,6 @@ Usage example:
commit type:REVERSE id:"SanFrancisco" commit type:REVERSE id:"SanFrancisco"
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
gitGraph
commit id:"NewYork"
commit id:"Dallas"
branch MetroLine2
commit id:"LosAngeles"
commit id:"Chicago"
commit id:"Houston"
branch MetroLine3
commit id:"Phoenix"
commit type: HIGHLIGHT id:"Denver"
commit id:"Boston"
checkout MetroLine1
commit id:"Atlanta"
merge MetroLine3
commit id:"Miami"
commit id:"Washington"
merge MetroLine2 tag:"MY JUNCTION"
commit id:"Boston"
commit id:"Detroit"
commit type:REVERSE id:"SanFrancisco"
```
Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`. Look at the imaginary railroad map created using Mermaid. Here, we have changed the default main branch name to `MetroLine1`.
## Customizing branch ordering ## Customizing branch ordering
@@ -770,16 +607,6 @@ Usage example:
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
gitGraph
commit
branch test1 order: 3
branch test2 order: 2
branch test3 order: 1
```
Look at the diagram, all the branches are following the order defined. Look at the diagram, all the branches are following the order defined.
Usage example: Usage example:
@@ -795,17 +622,6 @@ Usage example:
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
gitGraph
commit
branch test1 order: 3
branch test2
branch test3
branch test4 order: 1
```
Look at the diagram, here, all the branches without a specified order are drawn in their order of definition. Look at the diagram, here, all the branches without a specified order are drawn in their order of definition.
Then, `test4` branch is drawn because the order of `1`. Then, `test4` branch is drawn because the order of `1`.
Then, `main` branch is drawn because the order of `2`. Then, `main` branch is drawn because the order of `2`.
@@ -1112,7 +928,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge release merge release
``` ```
### Dark Theme ### Forest Theme
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
@@ -1160,6 +976,8 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge release merge release
``` ```
### Default Theme
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
gitGraph gitGraph
@@ -1206,7 +1024,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge release merge release
``` ```
### Neutral Theme ### Dark Theme
```mermaid-example ```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
@@ -1254,6 +1072,8 @@ Let's put them to use, and see how our sample diagram looks in different themes:
merge release merge release
``` ```
### Neutral Theme
```mermaid ```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%% %%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
gitGraph gitGraph
@@ -1324,22 +1144,6 @@ See how the default theme is used to set the colors for the branches:
commit commit
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
> #### IMPORTANT: > #### IMPORTANT:
> >
> Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'. > Mermaid supports the theme variables to override the default values for **up to 8 branches**, i.e., you can set the color/styling of up to 8 branches using theme variables. After this threshold of 8 branches, the theme variables are reused in the cyclic manner, i.e. the 9th branch will use the color/styling of the 1st branch, or the branch at index position '8' will use the color/styling of the branch at index position '0'.
@@ -1381,32 +1185,6 @@ Now let's override the default values for the `git0` to `git3` variables:
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'git0': '#ff0000',
'git1': '#00ff00',
'git2': '#0000ff',
'git3': '#ff00ff',
'git4': '#00ffff',
'git5': '#ffff00',
'git6': '#ff00ff',
'git7': '#00ffff'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the branch colors are changed to the values specified in the theme variables. See how the branch colors are changed to the values specified in the theme variables.
### Customizing branch label colors ### Customizing branch label colors
@@ -1445,34 +1223,6 @@ Now let's override the default values for the `gitBranchLabel0` to `gitBranchLab
commit commit
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'gitBranchLabel0': '#ffffff',
'gitBranchLabel1': '#ffffff',
'gitBranchLabel2': '#ffffff',
'gitBranchLabel3': '#ffffff',
'gitBranchLabel4': '#ffffff',
'gitBranchLabel5': '#ffffff',
'gitBranchLabel6': '#ffffff',
'gitBranchLabel7': '#ffffff',
'gitBranchLabel8': '#ffffff',
'gitBranchLabel9': '#ffffff'
} } }%%
gitGraph
checkout main
branch branch1
branch branch2
branch branch3
branch branch4
branch branch5
branch branch6
branch branch7
branch branch8
branch branch9
checkout branch1
commit
```
Here, you can see that `branch8` and `branch9` colors and the styles are being picked from branch at index position `0` (`main`) and `1`(`branch1`) respectively, i.e., **branch themeVariables are repeated cyclically**. Here, you can see that `branch8` and `branch9` colors and the styles are being picked from branch at index position `0` (`main`) and `1`(`branch1`) respectively, i.e., **branch themeVariables are repeated cyclically**.
### Customizing Commit colors ### Customizing Commit colors
@@ -1502,26 +1252,6 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'commitLabelColor': '#ff0000',
'commitLabelBackground': '#00ff00'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the commit label color and background color are changed to the values specified in the theme variables. See how the commit label color and background color are changed to the values specified in the theme variables.
### Customizing Commit Label Font Size ### Customizing Commit Label Font Size
@@ -1552,27 +1282,6 @@ Now let's override the default values for the `commitLabelFontSize` variable:
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'commitLabelColor': '#ff0000',
'commitLabelBackground': '#00ff00',
'commitLabelFontSize': '16px'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the commit label font size changed. See how the commit label font size changed.
### Customizing Tag Label Font Size ### Customizing Tag Label Font Size
@@ -1603,27 +1312,6 @@ Now let's override the default values for the `tagLabelFontSize` variable:
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'commitLabelColor': '#ff0000',
'commitLabelBackground': '#00ff00',
'tagLabelFontSize': '16px'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the tag label font size changed. See how the tag label font size changed.
### Customizing Tag colors ### Customizing Tag colors
@@ -1653,27 +1341,6 @@ Now let's override the default values for the `tagLabelColor`, `tagLabelBackgrou
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'tagLabelColor': '#ff0000',
'tagLabelBackground': '#00ff00',
'tagLabelBorder': '#0000ff'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the tag colors are changed to the values specified in the theme variables. See how the tag colors are changed to the values specified in the theme variables.
### Customizing Highlight commit colors ### Customizing Highlight commit colors
@@ -1703,23 +1370,4 @@ Now let's override the default values for the `git0` to `git3` variables:
``` ```
```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'gitInv0': '#ff0000'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit
```
See how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`. See how the highlighted commit color on the first branch is changed to the value specified in the theme variable `gitInv0`.

28
docs/index.html
View File

@@ -103,14 +103,26 @@
markdown: { markdown: {
renderer: { renderer: {
code: function (code, lang) { code: function (code, lang) {
if (lang === 'mermaid-example') { if (lang && (lang.startsWith('mermaid') || lang === 'mmd')) {
currentCodeExample++; var resultingHTML = '';
colorize.push(currentCodeExample);
return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>'; if (lang === 'mmd' || lang === 'mermaid-example') {
} else if (lang === 'mermaid') { currentCodeExample++;
return ( colorize.push(currentCodeExample);
'<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>' resultingHTML +=
); '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
}
if (lang === 'mermaid' || lang === 'mermaid-example') {
resultingHTML +=
'<div class="mermaid">' +
mermaid.render('mermaid-svg-' + num++, code) +
'</div>';
}
if (resultingHTML !== '') {
return resultingHTML;
}
} }
return this.origin.code.apply(this, arguments); return this.origin.code.apply(this, arguments);
}, },

14
docs/n00b-advanced.md
View File

@@ -6,14 +6,18 @@
A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so: A more condensed html code can be achieved by embedding the mermaid code in its own .js file, which is referenced like so:
stuff stuff ```
</div> stuff stuff
</body> </div>
</html> </body>
</html>
```
The actual mermaid file could for example look like this: The actual mermaid file could for example look like this:
mermaid content... ```
mermaid content...
```
--- ---

12
docs/n00b-syntaxReference.md
View File

@@ -26,18 +26,6 @@ erDiagram
PRODUCT ||--o{ ORDER-ITEM : "ordered in" PRODUCT ||--o{ ORDER-ITEM : "ordered in"
``` ```
```mermaid
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax. The [Getting Started](./n00b-gettingStarted.md) section can also provide some practical examples of mermaid syntax.
## Diagram Breaking ## Diagram Breaking

8
docs/newDiagram.md
View File

@@ -169,6 +169,10 @@ It is probably a good idea to keep the handling similar to this in your new diag
The syntax for adding title and description looks like this: The syntax for adding title and description looks like this:
````
accTitle: The title
accDescr: The description
accTitle: The title accTitle: The title
accDescr: The description accDescr: The description
@@ -199,7 +203,7 @@ statement
: acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); } : acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); }
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); } | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
``` ````
The functions for setting title and description are provided by a common module. This is the import from flowDb.js: The functions for setting title and description are provided by a common module. This is the import from flowDb.js:
@@ -258,4 +262,4 @@ const themes = {
}; };
``` ```
The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups. The actual options and values for the colors are defined in **src/theme/theme-[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.

19
docs/pie.md
View File

@@ -3,7 +3,7 @@
# Pie chart diagrams # Pie chart diagrams
> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801 > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
> \-Wikipedia > -Wikipedia
Mermaid can render Pie Chart diagrams. Mermaid can render Pie Chart diagrams.
@@ -14,13 +14,6 @@ pie title Pets adopted by volunteers
"Rats" : 15 "Rats" : 15
``` ```
```mermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
## Syntax ## Syntax
Drawing a pie chart is really simple in mermaid. Drawing a pie chart is really simple in mermaid.
@@ -33,11 +26,11 @@ Drawing a pie chart is really simple in mermaid.
- Followed by `:` colon as separator - Followed by `:` colon as separator
- Followed by `positive numeric value` (supported upto two decimal places) - Followed by `positive numeric value` (supported upto two decimal places)
\[pie] \[showData] (OPTIONAL) [pie] [showData] (OPTIONAL)
\[title] \[titlevalue] (OPTIONAL) [title] [titlevalue] (OPTIONAL)
"\[datakey1]" : \[dataValue1] "[datakey1]" : [dataValue1]
"\[datakey2]" : \[dataValue2] "[datakey2]" : [dataValue2]
"\[datakey3]" : \[dataValue3] "[datakey3]" : [dataValue3]
. .
. .

5
docs/requirementDiagram.md
View File

@@ -71,10 +71,7 @@ Type, risk, and method are enumerations defined in SysML.
An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents. An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.
element user_defined_name { An element definition contains an element name, type, and document reference. These three are all user defined. The element feature is intended to be lightweight but allow requirements to be connected to portions of other documents.
type: user_defined_type
docref: user_defined_ref
}
### Relationship ### Relationship

2
docs/security.md
View File

@@ -1,5 +1,3 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Security # Security
The Mermaid team takes the security of Mermaid and the applications that use Mermaid seriously. This page describes how to report any vulnerabilities you may find, and lists best practices to minimize the risk of introducing a vulnerability. The Mermaid team takes the security of Mermaid and the applications that use Mermaid seriously. This page describes how to report any vulnerabilities you may find, and lists best practices to minimize the risk of introducing a vulnerability.

6
docs/sequenceDiagram.md
View File

@@ -2,6 +2,8 @@
# Sequence diagrams # Sequence diagrams
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/sequenceDiagram.md)
> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. > A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
Mermaid can render sequence diagrams. Mermaid can render sequence diagrams.
@@ -552,7 +554,9 @@ Actors can have popup-menus containing individualized links to external pages. F
This can be configured by adding one or more link lines with the format: This can be configured by adding one or more link lines with the format:
link <actor>: <link-label> @ <link-url> ```
link <actor>: <link-label> @ <link-url>
```
```mmd ```mmd
sequenceDiagram sequenceDiagram

33
docs/stateDiagram.md
View File

@@ -223,26 +223,6 @@ stateDiagram-v2
} }
``` ```
```mermaid
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
```
_You can not define transitions between internal states belonging to different composite states_ _You can not define transitions between internal states belonging to different composite states_
## Choice ## Choice
@@ -386,19 +366,6 @@ stateDiagram
B --> D B --> D
``` ```
```mermaid
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
```
## Comments ## Comments
Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax

82
docs/theming.md
View File

@@ -12,15 +12,15 @@ Themes follow and build upon the Levels of Configuration, and employ `directives
The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls. The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls.
1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes. 1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
2. **forest**- A theme full of light greens that is easy on the eyes. 1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
3. **dark**- A theme that would go well with other dark-colored elements. 1. **forest**- A theme full of light greens that is easy on the eyes.
4. **default**- The default theme for all diagrams. 1. **dark**- A theme that would go well with other dark-colored elements.
5. **neutral**- The theme to be used for black and white printing. 1. **default**- The default theme for all diagrams.
## Site-wide Themes ## Site-wide Themes
@@ -67,24 +67,6 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
end end
``` ```
```mermaid
%%{init: {'theme':'base'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
# List of Themes # List of Themes
# Customizing Themes with `themeVariables` # Customizing Themes with `themeVariables`
@@ -115,24 +97,6 @@ The easiest way to make a custom theme is to start with the base theme, and just
end end
``` ```
```mermaid
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
**Notes:** **Notes:**
Leaving it empty will set all variable values to default. Leaving it empty will set all variable values to default.
@@ -256,24 +220,6 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
end end
``` ```
```mermaid
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed: \*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
- Make the primary color a little lighter - Make the primary color a little lighter
@@ -347,24 +293,6 @@ In the following examples, the directive `init` is used, with the `theme` being
end end
``` ```
```mermaid-example
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
```mermaid ```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%% %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
graph TD graph TD

20
docs/usage.md
View File

@@ -1,5 +1,3 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Usage # Usage
Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations. Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.
@@ -242,11 +240,11 @@ 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.
2. After generation the render function calls the provided callback function, in this case it's called insertSvg. 2. After generation the render function calls the provided callback function, in this case it's called insertSvg.
3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM. 3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
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
@@ -323,10 +321,10 @@ One effective and more future-proof method of validating your graph definitions,
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).

2
package.json
View File

@@ -85,6 +85,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",

4
src/__mocks__/mermaidAPI.ts
View File

@@ -15,6 +15,10 @@ import Diagram from '../Diagram';
// const {parse} = jest.requireActual("./mermaidAPI"); // const {parse} = jest.requireActual("./mermaidAPI");
let hasLoadedDiagrams = false; let hasLoadedDiagrams = false;
/**
* @param text
* @param parseError
*/
function parse(text: string, parseError?: Function): boolean { function parse(text: string, parseError?: Function): boolean {
if (!hasLoadedDiagrams) { if (!hasLoadedDiagrams) {
addDiagrams(); addDiagrams();

2
src/dagre-wrapper/createLabel.js
View File

@@ -1,5 +1,5 @@
import { select } from 'd3'; import { select } from 'd3';
import { log } from '../logger'; // eslint-disable-line import { log } from '../logger';
import { getConfig } from '../config'; import { getConfig } from '../config';
import { sanitizeText, evaluate } from '../diagrams/common/common'; import { sanitizeText, evaluate } from '../diagrams/common/common';
import { decodeEntities } from '../mermaidAPI'; import { decodeEntities } from '../mermaidAPI';

2
src/dagre-wrapper/edges.js
View File

@@ -1,4 +1,4 @@
import { log } from '../logger'; // eslint-disable-line import { log } from '../logger';
import createLabel from './createLabel'; import createLabel from './createLabel';
import { line, curveBasis, select } from 'd3'; import { line, curveBasis, select } from 'd3';
import { getConfig } from '../config'; import { getConfig } from '../config';

Some files were not shown because too many files have changed in this diff Show More