mirror of https://github.com/mermaid-js/mermaid
fix #3407 Replace `div` with `pre` and format
Sidharth Vinod
parent
a64a76db9b
commit
91478caf5b
|
|
@ -5,7 +5,7 @@
|
|||
"jest/globals": true,
|
||||
"node": true
|
||||
},
|
||||
"parser": "@babel/eslint-parser",
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"ecmaFeatures": {
|
||||
"experimentalObjectRestSpread": true,
|
||||
|
|
@ -18,9 +18,9 @@
|
|||
"plugin:jsdoc/recommended",
|
||||
"plugin:json/recommended",
|
||||
"plugin:markdown/recommended",
|
||||
"plugin:prettier/recommended"
|
||||
"prettier"
|
||||
],
|
||||
"plugins": ["html", "jest", "jsdoc", "json", "prettier"],
|
||||
"plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"],
|
||||
"rules": {
|
||||
"no-prototype-builtins": "off",
|
||||
"no-unused-vars": "off",
|
||||
|
|
@ -41,12 +41,6 @@
|
|||
"no-undef": "off",
|
||||
"jsdoc/require-jsdoc": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": "./**/*.md/*.html",
|
||||
"rules": {
|
||||
"prettier/prettier": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
{
|
||||
"*.{js,json,html,md}": [
|
||||
"yarn lint:fix"
|
||||
]
|
||||
}
|
||||
"*.{ts,js,json,html,md}": ["eslint --fix", "prettier --write"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
demos/*.html
|
||||
dist
|
||||
cypress/platform/xss3.html
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
{
|
||||
"endOfLine": "auto",
|
||||
"printWidth": 100,
|
||||
"singleQuote": true
|
||||
}
|
||||
"singleQuote": true,
|
||||
"useTabs": false,
|
||||
"tabWidth": 2
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<div id="FirstLine" class="mermaid">
|
||||
</pre>
|
||||
|
||||
<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';
|
||||
|
||||
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;
|
||||
<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 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 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 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: 'loose', logLevel: 1 });
|
||||
</script>
|
||||
</body>
|
||||
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>
|
||||
</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,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,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,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>
|
||||
</html>
|
||||
</pre>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
</html>
|
||||
</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,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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
|
|
|
|||
407
demos/index.html
407
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
|
||||
|
||||
|
|
@ -102,12 +101,10 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
|||
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")
|
||||
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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ class BankAccount{
|
|||
|
||||
#### Return Type
|
||||
|
||||
Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example:
|
||||
Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final `)` and the return type). An example:
|
||||
|
||||
```mermaid-example
|
||||
classDiagram
|
||||
|
|
@ -146,13 +146,14 @@ To describe the visibility (or encapsulation) of an attribute or method/function
|
|||
- `~` Package/Internal
|
||||
|
||||
> _note_ you can also include additional _classifiers_ to a method definition by adding the following notation to the _end_ of the method, i.e.: after the `()`:
|
||||
>
|
||||
> - `*` Abstract e.g.: `someAbstractMethod()*`
|
||||
> - `$` Static e.g.: `someStaticMethod()$`
|
||||
|
||||
> _note_ you can also include additional _classifiers_ to a field definition by adding the following notation to the end of its name:
|
||||
>
|
||||
> - `$` Static e.g.: `String someField$`
|
||||
|
||||
|
||||
## Defining Relationship
|
||||
|
||||
A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
|
||||
|
|
@ -234,7 +235,6 @@ Here is the syntax:
|
|||
|
||||
Where `Relation Type` can be one of:
|
||||
|
||||
|
||||
| Type | Description |
|
||||
| ---- | ----------- |
|
||||
| <\| | Inheritance |
|
||||
|
|
@ -282,7 +282,7 @@ classDiagram
|
|||
|
||||
## Annotations on classes
|
||||
|
||||
It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:
|
||||
It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:
|
||||
|
||||
- `<<Interface>>` To represent an Interface class
|
||||
- `<<Abstract>>` To represent an abstract class
|
||||
|
|
@ -355,7 +355,7 @@ classDiagram
|
|||
}
|
||||
Student "1" --o "1" IdCard : carries
|
||||
Student "1" --o "1" Bike : rides
|
||||
```
|
||||
```
|
||||
|
||||
## Interaction
|
||||
|
||||
|
|
@ -368,6 +368,7 @@ 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
|
||||
- _reference_ is either the url link, or the function name for callback.
|
||||
|
|
@ -398,9 +399,9 @@ click Shape2 call callbackFunction() "This is a tooltip for a callback"
|
|||
|
||||
```html
|
||||
<script>
|
||||
var callbackFunction = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
var callbackFunction = function () {
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
@ -422,7 +423,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
|
|||
|
||||
```html
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
classDiagram
|
||||
Animal <|-- Duck
|
||||
Animal <|-- Fish
|
||||
|
|
@ -447,15 +448,15 @@ Beginner's tip—a full example using interactive links in an HTML page:
|
|||
|
||||
callback Duck callback "Tooltip"
|
||||
link Zebra "https://www.github.com" "This is a link"
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
var callback = function () {
|
||||
alert('A callback was triggered');
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
var config = {
|
||||
startOnLoad: true,
|
||||
securityLevel: 'loose'
|
||||
startOnLoad: true,
|
||||
securityLevel: 'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
|
|
@ -470,11 +471,11 @@ It is possible to apply specific styles such as a thicker border or a different
|
|||
|
||||
```html
|
||||
<style>
|
||||
.cssClass > rect{
|
||||
fill:#FF0000;
|
||||
stroke:#FFFF00;
|
||||
stroke-width:4px;
|
||||
}
|
||||
.cssClass > rect {
|
||||
fill: #ff0000;
|
||||
stroke: #ffff00;
|
||||
stroke-width: 4px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
|
@ -509,7 +510,7 @@ classDiagram
|
|||
|
||||
?> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
|
||||
|
||||
?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. ***Coming soon!***
|
||||
?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. **_Coming soon!_**
|
||||
|
||||
### Default Styles
|
||||
|
||||
|
|
@ -531,91 +532,91 @@ The main styling of the class diagram is done with a preset number of css classe
|
|||
|
||||
```scss
|
||||
body {
|
||||
background: white;
|
||||
background: white;
|
||||
}
|
||||
|
||||
g.classGroup text {
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 10px;
|
||||
fill: $nodeBorder;
|
||||
stroke: none;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 10px;
|
||||
|
||||
.title {
|
||||
font-weight: bolder;
|
||||
}
|
||||
.title {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
|
||||
g.classGroup rect {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
}
|
||||
|
||||
g.classGroup line {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.classLabel .box {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.5;
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: $nodeBkg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.classLabel .label {
|
||||
fill: $nodeBorder;
|
||||
font-size: 10px;
|
||||
fill: $nodeBorder;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.relation {
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
@mixin composition {
|
||||
fill: $nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: $nodeBorder;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#compositionStart {
|
||||
@include composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#compositionEnd {
|
||||
@include composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
@mixin aggregation {
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
fill: $nodeBkg;
|
||||
stroke: $nodeBorder;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#aggregationStart {
|
||||
@include aggregation;
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#aggregationEnd {
|
||||
@include aggregation;
|
||||
@include aggregation;
|
||||
}
|
||||
|
||||
#dependencyStart {
|
||||
@include composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#dependencyEnd {
|
||||
@include composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionStart {
|
||||
@include composition;
|
||||
@include composition;
|
||||
}
|
||||
|
||||
#extensionEnd {
|
||||
@include composition;
|
||||
@include composition;
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -25,20 +25,19 @@ graph LR
|
|||
|
||||
Possible FlowChart orientations are:
|
||||
|
||||
* TB - top to bottom
|
||||
* TD - top-down (same as top to bottom)
|
||||
* BT - bottom to top
|
||||
* RL - right to left
|
||||
* LR - left to right
|
||||
|
||||
- TB - top to bottom
|
||||
- TD - top-down (same as top to bottom)
|
||||
- BT - bottom to top
|
||||
- RL - right to left
|
||||
- LR - left to right
|
||||
|
||||
## Flowcharts
|
||||
|
||||
This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs.
|
||||
|
||||
Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts.
|
||||
Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts.
|
||||
|
||||
> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).**
|
||||
> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
|
||||
|
||||
## Nodes and shapes
|
||||
|
||||
|
|
@ -105,7 +104,8 @@ graph LR
|
|||
graph LR
|
||||
id1>This is the text in the box]
|
||||
```
|
||||
Currently it is only possible to render the shape above, and not its mirror. *This might change with future releases.*
|
||||
|
||||
Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._
|
||||
|
||||
### A node (rhombus)
|
||||
|
||||
|
|
@ -127,6 +127,7 @@ graph LR
|
|||
graph TD
|
||||
id1[/This is the text in the box/]
|
||||
```
|
||||
|
||||
### Parallelogram alt
|
||||
|
||||
```mermaid-example
|
||||
|
|
@ -140,6 +141,7 @@ graph TD
|
|||
graph TD
|
||||
A[/Christmas\]
|
||||
```
|
||||
|
||||
### Trapezoid alt
|
||||
|
||||
```mermaid-example
|
||||
|
|
@ -224,23 +226,28 @@ graph LR
|
|||
### Chaining of links
|
||||
|
||||
It is possible to declare many links on the same line as per below:
|
||||
|
||||
```mermaid-example
|
||||
graph LR
|
||||
A -- text --> B -- text2 --> C
|
||||
```
|
||||
|
||||
It is also possible to declare multiple nodes links in the same line as per below:
|
||||
|
||||
```mermaid-example
|
||||
graph LR
|
||||
a --> b & c--> d
|
||||
```
|
||||
|
||||
You can then describe dependencies in a very expressive way. Like the one-liner below:
|
||||
|
||||
```mermaid-example
|
||||
graph TB
|
||||
A & B--> C & D
|
||||
```
|
||||
|
||||
If you describe the same diagram using the the basic syntax, it will take four lines:
|
||||
|
||||
```mmd
|
||||
graph TB
|
||||
A --> C
|
||||
|
|
@ -248,6 +255,7 @@ graph TB
|
|||
B --> C
|
||||
B --> D
|
||||
```
|
||||
|
||||
A word of warning, one could go overboard with this, making the graph harder to read in
|
||||
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
|
||||
This goes for expressive syntaxes as well.
|
||||
|
|
@ -312,12 +320,12 @@ graph TD
|
|||
For dotted or thick links, the characters to add are equals signs or dots,
|
||||
as summed up in the following table:
|
||||
|
||||
| Length | 1 | 2 | 3 |
|
||||
|-------------------|:------:|:-------:|:--------:|
|
||||
| Normal | `---` | `----` | `-----` |
|
||||
| Normal with arrow | `-->` | `--->` | `---->` |
|
||||
| Thick | `===` | `====` | `=====` |
|
||||
| Thick with arrow | `==>` | `===>` | `====>` |
|
||||
| Length | 1 | 2 | 3 |
|
||||
| ----------------- | :----: | :-----: | :------: |
|
||||
| Normal | `---` | `----` | `-----` |
|
||||
| Normal with arrow | `-->` | `--->` | `---->` |
|
||||
| Thick | `===` | `====` | `=====` |
|
||||
| Thick with arrow | `==>` | `===>` | `====>` |
|
||||
| Dotted | `-.-` | `-..-` | `-...-` |
|
||||
| Dotted with arrow | `-.->` | `-..->` | `-...->` |
|
||||
|
||||
|
|
@ -361,7 +369,7 @@ graph TB
|
|||
subgraph three
|
||||
c1-->c2
|
||||
end
|
||||
```
|
||||
```
|
||||
|
||||
You can also set an explicit id for the subgraph:
|
||||
|
||||
|
|
@ -371,7 +379,7 @@ graph TB
|
|||
subgraph ide1 [one]
|
||||
a1-->a2
|
||||
end
|
||||
```
|
||||
```
|
||||
|
||||
## Flowcharts
|
||||
|
||||
|
|
@ -392,7 +400,7 @@ flowchart TB
|
|||
one --> two
|
||||
three --> two
|
||||
two --> c2
|
||||
```
|
||||
```
|
||||
|
||||
## Interaction
|
||||
|
||||
|
|
@ -403,8 +411,8 @@ click nodeId callback
|
|||
click nodeId call callback()
|
||||
```
|
||||
|
||||
* nodeId is the id of the node
|
||||
* `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter.
|
||||
- nodeId is the id of the node
|
||||
- `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter.
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
|
@ -428,11 +436,13 @@ graph LR;
|
|||
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/).
|
||||
|
||||
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
|
||||
|
||||
```mermaid-example
|
||||
graph LR;
|
||||
A-->B;
|
||||
|
|
@ -449,7 +459,7 @@ Beginner's tip—here's a full example of using interactive links in HTML:
|
|||
|
||||
```html
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
graph LR;
|
||||
A-->B;
|
||||
B-->C;
|
||||
|
|
@ -458,20 +468,20 @@ Beginner's tip—here's a full example of using interactive links in HTML:
|
|||
click B "https://www.github.com" "This is a link"
|
||||
click C call callback() "Tooltip"
|
||||
click D href "https://www.github.com" "This is a link"
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
var callback = function () {
|
||||
alert('A callback was triggered');
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
var config = {
|
||||
startOnLoad: true,
|
||||
flowchart: {
|
||||
useMaxWidth: true,
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal'
|
||||
},
|
||||
securityLevel: 'loose'
|
||||
startOnLoad: true,
|
||||
flowchart: {
|
||||
useMaxWidth: true,
|
||||
htmlLabels: true,
|
||||
curve: 'cardinal',
|
||||
},
|
||||
securityLevel: 'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
|
|
@ -480,7 +490,7 @@ Beginner's tip—here's a full example of using interactive links in HTML:
|
|||
|
||||
### Comments
|
||||
|
||||
Comments can be entered within a flow diagram, 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 until the next newline will be treated as a comment, including all punctuation and any flow syntax.
|
||||
Comments can be entered within a flow diagram, 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 until the next newline will be treated as a comment, including all punctuation and any flow syntax.
|
||||
|
||||
```mmd
|
||||
graph LR
|
||||
|
|
@ -532,7 +542,6 @@ graph LR
|
|||
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.
|
||||
|
|
@ -563,7 +572,6 @@ graph LR
|
|||
classDef someclass fill:#f96;
|
||||
```
|
||||
|
||||
|
||||
### Css classes
|
||||
|
||||
It is also possible to predefine classes in css styles that can be applied from the graph definition:
|
||||
|
|
@ -572,9 +580,9 @@ It is also possible to predefine classes in css styles that can be applied from
|
|||
|
||||
```css
|
||||
.cssClass > rect {
|
||||
fill: #FF0000;
|
||||
stroke: #FFFF00;
|
||||
stroke-width: 4px;
|
||||
fill: #ff0000;
|
||||
stroke: #ffff00;
|
||||
stroke-width: 4px;
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -587,7 +595,6 @@ graph LR;
|
|||
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.
|
||||
|
|
@ -596,10 +603,9 @@ If a class is named `default` it will be assigned to all nodes that do not have
|
|||
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
```
|
||||
|
||||
|
||||
## Basic support for fontawesome
|
||||
|
||||
It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#.
|
||||
It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#.
|
||||
|
||||
```mermaid-example
|
||||
graph TD
|
||||
|
|
@ -609,12 +615,11 @@ graph TD
|
|||
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.
|
||||
- After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.
|
||||
|
||||
* A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability.
|
||||
- A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability.
|
||||
|
||||
Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges.
|
||||
|
||||
|
|
@ -626,7 +631,6 @@ graph LR
|
|||
C -->|Two| E[Result two]
|
||||
```
|
||||
|
||||
|
||||
## Configuration...
|
||||
|
||||
Is it possible to adjust the width of the rendered flowchart.
|
||||
|
|
@ -636,6 +640,6 @@ In Javascript config parameters can be set by using `mermaid.flowchartConfig`:
|
|||
|
||||
```javascript
|
||||
mermaid.flowchartConfig = {
|
||||
width: '100%'
|
||||
}
|
||||
width: '100%',
|
||||
};
|
||||
```
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ All Flowcharts are composed of **nodes**, the geometric shapes and **edges**, th
|
|||
|
||||
It can also accommodate different arrow types, multi directional arrows, and linking to and from subgraphs.
|
||||
|
||||
> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).**
|
||||
> **Important note**: Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
|
||||
|
||||
### A node (default)
|
||||
|
||||
|
|
@ -50,11 +50,11 @@ flowchart LR
|
|||
|
||||
Possible FlowChart orientations are:
|
||||
|
||||
* TB - top to bottom
|
||||
* TD - top-down/ same as top to bottom
|
||||
* BT - bottom to top
|
||||
* RL - right to left
|
||||
* LR - left to right
|
||||
- TB - top to bottom
|
||||
- TD - top-down/ same as top to bottom
|
||||
- BT - bottom to top
|
||||
- RL - right to left
|
||||
- LR - left to right
|
||||
|
||||
## Node shapes
|
||||
|
||||
|
|
@ -99,7 +99,8 @@ flowchart LR
|
|||
flowchart LR
|
||||
id1>This is the text in the box]
|
||||
```
|
||||
Currently only the shape above is possible and not its mirror. *This might change with future releases.*
|
||||
|
||||
Currently only the shape above is possible and not its mirror. _This might change with future releases._
|
||||
|
||||
### A node (rhombus)
|
||||
|
||||
|
|
@ -109,6 +110,7 @@ flowchart LR
|
|||
```
|
||||
|
||||
### A hexagon node
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
id1{{This is the text in the box}}
|
||||
|
|
@ -134,6 +136,7 @@ flowchart TD
|
|||
flowchart TD
|
||||
A[/Christmas\]
|
||||
```
|
||||
|
||||
### Trapezoid alt
|
||||
|
||||
```mermaid-example
|
||||
|
|
@ -225,26 +228,31 @@ flowchart LR
|
|||
### Chaining of links
|
||||
|
||||
It is possible declare many links in the same line as per below:
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A -- text --> B -- text2 --> C
|
||||
```
|
||||
|
||||
It is also possible to declare multiple nodes links in the same line as per below:
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
a --> b & c--> d
|
||||
```
|
||||
|
||||
You can then describe dependencies in a very expressive way. Like the one-liner below:
|
||||
|
||||
```mermaid-example
|
||||
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.
|
||||
This goes for expressive syntaxes as well.
|
||||
|
||||
```mmd
|
||||
flowchart TB
|
||||
A --> C
|
||||
|
|
@ -263,7 +271,6 @@ flowchart LR
|
|||
B --x C
|
||||
```
|
||||
|
||||
|
||||
### Multi directional arrows
|
||||
|
||||
There is the possibility to use multidirectional arrows.
|
||||
|
|
@ -314,12 +321,12 @@ flowchart TD
|
|||
For dotted or thick links, the characters to add are equals signs or dots,
|
||||
as summed up in the following table:
|
||||
|
||||
| Length | 1 | 2 | 3 |
|
||||
|-------------------|:------:|:-------:|:--------:|
|
||||
| Normal | `---` | `----` | `-----` |
|
||||
| Normal with arrow | `-->` | `--->` | `---->` |
|
||||
| Thick | `===` | `====` | `=====` |
|
||||
| Thick with arrow | `==>` | `===>` | `====>` |
|
||||
| Length | 1 | 2 | 3 |
|
||||
| ----------------- | :----: | :-----: | :------: |
|
||||
| Normal | `---` | `----` | `-----` |
|
||||
| Normal with arrow | `-->` | `--->` | `---->` |
|
||||
| Thick | `===` | `====` | `=====` |
|
||||
| Thick with arrow | `==>` | `===>` | `====>` |
|
||||
| Dotted | `-.-` | `-..-` | `-...-` |
|
||||
| Dotted with arrow | `-.->` | `-..->` | `-...->` |
|
||||
|
||||
|
|
@ -365,9 +372,9 @@ flowchart TB
|
|||
subgraph three
|
||||
c1-->c2
|
||||
end
|
||||
```
|
||||
```
|
||||
|
||||
You can also set an explicit id for the subgraph.
|
||||
You can also set an explicit id for the subgraph.
|
||||
|
||||
```mermaid-example
|
||||
flowchart TB
|
||||
|
|
@ -375,7 +382,7 @@ flowchart TB
|
|||
subgraph ide1 [one]
|
||||
a1-->a2
|
||||
end
|
||||
```
|
||||
```
|
||||
|
||||
## flowcharts
|
||||
|
||||
|
|
@ -396,9 +403,9 @@ flowchart TB
|
|||
one --> two
|
||||
three --> two
|
||||
two --> c2
|
||||
```
|
||||
```
|
||||
|
||||
## Direction in subgraphs
|
||||
## Direction in subgraphs
|
||||
|
||||
With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
|
||||
|
||||
|
|
@ -417,7 +424,7 @@ flowchart LR
|
|||
end
|
||||
A --> TOP --> B
|
||||
B1 --> B2
|
||||
```
|
||||
```
|
||||
|
||||
## Interaction
|
||||
|
||||
|
|
@ -428,15 +435,15 @@ click nodeId callback
|
|||
click nodeId call callback()
|
||||
```
|
||||
|
||||
* nodeId is the id of the node
|
||||
* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
|
||||
- nodeId is the id of the node
|
||||
- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
|
||||
|
||||
Examples of tooltip usage below:
|
||||
|
||||
```html
|
||||
<script>
|
||||
var callback = function () {
|
||||
alert('A callback was triggered');
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
|
@ -459,6 +466,7 @@ flowchart LR
|
|||
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
|
||||
|
||||
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A-->B
|
||||
|
|
@ -472,9 +480,10 @@ flowchart LR
|
|||
```
|
||||
|
||||
Beginner's tip—a full example using interactive links in a html context:
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
flowchart LR
|
||||
A-->B
|
||||
B-->C
|
||||
|
|
@ -483,16 +492,16 @@ Beginner's tip—a full example using interactive links in a html context:
|
|||
click B "https://www.github.com" "This is a link"
|
||||
click C call callback() "Tooltip"
|
||||
click D href "https://www.github.com" "This is a link"
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
var callback = function () {
|
||||
alert('A callback was triggered');
|
||||
alert('A callback was triggered');
|
||||
};
|
||||
var config = {
|
||||
startOnLoad: true,
|
||||
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
|
||||
securityLevel:'loose'
|
||||
startOnLoad: true,
|
||||
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
|
||||
securityLevel: 'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
|
|
@ -501,7 +510,7 @@ Beginner's tip—a full example using interactive links in a html context:
|
|||
|
||||
### Comments
|
||||
|
||||
Comments can be entered within a flow diagram, 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 flow syntax
|
||||
Comments can be entered within a flow diagram, 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 flow syntax
|
||||
|
||||
```mmd
|
||||
flowchart LR
|
||||
|
|
@ -550,7 +559,6 @@ flowchart LR
|
|||
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
|
||||
|
|
@ -558,7 +566,6 @@ should have a different look.
|
|||
|
||||
a class definition looks like the example below:
|
||||
|
||||
|
||||
```
|
||||
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
```
|
||||
|
|
@ -583,7 +590,6 @@ flowchart LR
|
|||
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
|
||||
|
|
@ -593,11 +599,11 @@ below:
|
|||
|
||||
```html
|
||||
<style>
|
||||
.cssClass > rect{
|
||||
fill:#FF0000;
|
||||
stroke:#FFFF00;
|
||||
stroke-width:4px;
|
||||
}
|
||||
.cssClass > rect {
|
||||
fill: #ff0000;
|
||||
stroke: #ffff00;
|
||||
stroke-width: 4px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
|
@ -610,7 +616,6 @@ flowchart LR;
|
|||
class A cssClass
|
||||
```
|
||||
|
||||
|
||||
### Default class
|
||||
|
||||
If a class is named default it will be assigned to all classes without specific class definitions.
|
||||
|
|
@ -619,7 +624,6 @@ If a class is named default it will be assigned to all classes without specific
|
|||
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
```
|
||||
|
||||
|
||||
## Basic support for fontawesome
|
||||
|
||||
It is possible to add icons from fontawesome.
|
||||
|
|
@ -636,12 +640,11 @@ flowchart TD
|
|||
|
||||
?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
|
||||
|
||||
|
||||
## Graph declarations with spaces between vertices and link and without semicolon
|
||||
|
||||
* In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
|
||||
- In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
|
||||
|
||||
* A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.
|
||||
- A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.
|
||||
|
||||
Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
|
||||
|
||||
|
|
@ -653,7 +656,6 @@ flowchart LR
|
|||
C -->|Two| E[Result two]
|
||||
```
|
||||
|
||||
|
||||
## Configuration...
|
||||
|
||||
Is it possible to adjust the width of the rendered flowchart.
|
||||
|
|
|
|||
146
docs/gantt.md
146
docs/gantt.md
|
|
@ -2,18 +2,17 @@
|
|||
|
||||
> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
|
||||
|
||||
## A note to users
|
||||
Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.
|
||||
## A note to users
|
||||
|
||||
Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.
|
||||
|
||||
It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task.
|
||||
As shown here 
|
||||
It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accommodate those changes by extending an equal number of days, towards the right, not by creating a gap inside the task.
|
||||
As shown here 
|
||||
|
||||
However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.
|
||||
As shown here 
|
||||
|
||||
However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.
|
||||
As shown here 
|
||||
|
||||
A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
|
||||
A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
|
||||
|
||||
Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.
|
||||
|
||||
|
|
@ -75,37 +74,35 @@ It is possible to set multiple dependencies separated by space:
|
|||
|
||||
### Title
|
||||
|
||||
The `title` is an *optional* string to be displayed at the top of the Gantt chart to describe the chart as a whole.
|
||||
|
||||
The `title` is an _optional_ string to be displayed at the top of the Gantt chart to describe the chart as a whole.
|
||||
|
||||
### Section statements
|
||||
|
||||
You can divide the chart into various sections, for example to separate different parts of a project like development and documentation.
|
||||
|
||||
To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is *required*.
|
||||
To do so, start a line with the `section` keyword and give it a name. (Note that unlike with the [title for the entire chart](#title), this name is _required_.
|
||||
|
||||
### Milestones
|
||||
|
||||
You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2.
|
||||
You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: _initial date_+_duration_/2.
|
||||
|
||||
```mermaid-example
|
||||
gantt
|
||||
gantt
|
||||
dateFormat HH:mm
|
||||
axisFormat %H:%M
|
||||
Initial milestone : milestone, m1, 17:49,2min
|
||||
taska2 : 10min
|
||||
taska3 : 5min
|
||||
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`.
|
||||
|
||||
### Input date format
|
||||
|
||||
The default input date format is `YYYY-MM-DD`. You can define your custom ``dateFormat``.
|
||||
The default input date format is `YYYY-MM-DD`. You can define your custom `dateFormat`.
|
||||
|
||||
```
|
||||
dateFormat YYYY-MM-DD
|
||||
|
|
@ -140,7 +137,7 @@ More info in: https://momentjs.com/docs/#/parsing/string-format/
|
|||
|
||||
### Output date format on the axis
|
||||
|
||||
The default output date format is YYYY-MM-DD. You can define your custom ``axisFormat``, like `2020-Q1` for the first quarter of the year 2020.
|
||||
The default output date format is YYYY-MM-DD. You can define your custom `axisFormat`, like `2020-Q1` for the first quarter of the year 2020.
|
||||
|
||||
```
|
||||
axisFormat %Y-%m-%d
|
||||
|
|
@ -201,63 +198,61 @@ Styling of the a gantt diagram is done by defining a number of css classes. Duri
|
|||
|
||||
### Classes used
|
||||
|
||||
Class | Description
|
||||
--- | ---
|
||||
grid.tick | Styling for the Grid Lines
|
||||
grid.path | Styling for the Grid's borders
|
||||
.taskText | Task Text Styling
|
||||
.taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right.
|
||||
.taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left.
|
||||
todayMarker | Toggle and Styling for the "Today Marker"
|
||||
|
||||
| Class | Description |
|
||||
| --------------------- | ---------------------------------------------------------------------- |
|
||||
| grid.tick | Styling for the Grid Lines |
|
||||
| grid.path | Styling for the Grid's borders |
|
||||
| .taskText | Task Text Styling |
|
||||
| .taskTextOutsideRight | Styling for Task Text that exceeds the activity bar towards the right. |
|
||||
| .taskTextOutsideLeft | Styling for Task Text that exceeds the activity bar, towards the left. |
|
||||
| todayMarker | Toggle and Styling for the "Today Marker" |
|
||||
|
||||
### Sample stylesheet
|
||||
|
||||
|
||||
```css
|
||||
.grid .tick {
|
||||
stroke: lightgrey;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
stroke: lightgrey;
|
||||
opacity: 0.3;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
.grid path {
|
||||
stroke-width: 0;
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
#tag {
|
||||
color: white;
|
||||
background: #FA283D;
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
padding:3px 6px;
|
||||
margin-left: -80px;
|
||||
font-size: 11px;
|
||||
color: white;
|
||||
background: #fa283d;
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
padding: 3px 6px;
|
||||
margin-left: -80px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#tag:before {
|
||||
border: solid transparent;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
border-width: 10px;
|
||||
border-bottom-color: #FA283D;
|
||||
top: -20px;
|
||||
border: solid transparent;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
border-width: 10px;
|
||||
border-bottom-color: #fa283d;
|
||||
top: -20px;
|
||||
}
|
||||
.taskText {
|
||||
fill:white;
|
||||
text-anchor:middle;
|
||||
fill: white;
|
||||
text-anchor: middle;
|
||||
}
|
||||
.taskTextOutsideRight {
|
||||
fill:black;
|
||||
text-anchor:start;
|
||||
fill: black;
|
||||
text-anchor: start;
|
||||
}
|
||||
.taskTextOutsideLeft {
|
||||
fill:black;
|
||||
text-anchor:end;
|
||||
fill: black;
|
||||
text-anchor: end;
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -286,20 +281,20 @@ mermaid.ganttConfig can be set to a JSON string with config parameters or the co
|
|||
|
||||
```javascript
|
||||
mermaid.ganttConfig = {
|
||||
titleTopMargin:25,
|
||||
barHeight:20,
|
||||
barGap:4,
|
||||
topPadding:75,
|
||||
sidePadding:75
|
||||
}
|
||||
titleTopMargin: 25,
|
||||
barHeight: 20,
|
||||
barGap: 4,
|
||||
topPadding: 75,
|
||||
sidePadding: 75,
|
||||
};
|
||||
```
|
||||
|
||||
### Possible configuration params:
|
||||
|
||||
Param | Description | Default value
|
||||
--- | --- | ---
|
||||
mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false
|
||||
bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists.|1
|
||||
| Param | Description | Default value |
|
||||
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
|
||||
| mirrorActor | Turns on/off the rendering of actors below the diagram as well as above it | false |
|
||||
| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 |
|
||||
|
||||
## Interaction
|
||||
|
||||
|
|
@ -310,13 +305,14 @@ click taskId call callback(arguments)
|
|||
click taskId href URL
|
||||
```
|
||||
|
||||
* taskId is the id of the task
|
||||
* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
|
||||
- taskId is the id of the task
|
||||
- callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
|
||||
|
||||
Beginner's tip—a full example using interactive links in an html context:
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
|
||||
|
|
@ -328,18 +324,18 @@ Beginner's tip—a full example using interactive links in an html context:
|
|||
click cl1 href "https://mermaidjs.github.io/"
|
||||
click cl2 call printArguments("test1", "test2", test3)
|
||||
click cl3 call printTask()
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
var printArguments = function(arg1, arg2, arg3) {
|
||||
var printArguments = function (arg1, arg2, arg3) {
|
||||
alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
|
||||
}
|
||||
var printTask = function(taskId) {
|
||||
};
|
||||
var printTask = function (taskId) {
|
||||
alert('taskId: ' + taskId);
|
||||
}
|
||||
};
|
||||
var config = {
|
||||
startOnLoad:true,
|
||||
securityLevel:'loose',
|
||||
startOnLoad: true,
|
||||
securityLevel: 'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,10 @@
|
|||
/>
|
||||
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
|
||||
<link rel="stylesheet" href="theme.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
|
||||
/>
|
||||
<script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js"></script>
|
||||
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
|
||||
<script>
|
||||
|
|
@ -108,8 +111,7 @@
|
|||
}
|
||||
|
||||
if (lang === 'mermaid' || lang === 'mermaid-example') {
|
||||
resultingHTML +=
|
||||
'<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</div>';
|
||||
'<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>';
|
||||
}
|
||||
|
||||
if (resultingHTML !== '') {
|
||||
|
|
@ -134,7 +136,8 @@
|
|||
while (!window.hasOwnProperty('monaco'))
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
colorizeEverything(html).then(
|
||||
(newHTML) => (document.querySelector('article.markdown-section').innerHTML = newHTML)
|
||||
(newHTML) =>
|
||||
(document.querySelector('article.markdown-section').innerHTML = newHTML)
|
||||
);
|
||||
})();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -85,35 +85,36 @@ c. The `mermaid.initialize()` call, which dictates the appearance of diagrams an
|
|||
|
||||
```html
|
||||
<body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||||
</body>
|
||||
```
|
||||
|
||||
**b. The embedded mermaid diagram definition inside a `<div class="mermaid">`:**
|
||||
**b. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
|
||||
|
||||
```html
|
||||
<body>
|
||||
Here is a mermaid diagram:
|
||||
<div class="mermaid">
|
||||
Here is a mermaid diagram:
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Client] --> B[Load Balancer]
|
||||
B --> C[Server01]
|
||||
B --> D[Server02]
|
||||
</div>
|
||||
</pre
|
||||
>
|
||||
</body>
|
||||
```
|
||||
|
||||
**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<div>` tags.
|
||||
**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<pre>` tags.
|
||||
|
||||
**c. The `mermaid.initialize()` call.**
|
||||
|
||||
`mermaid.initialize()` call takes all the definitions contained in all the `<div class="mermaid">` tags that it finds in the html body and renders them into diagrams. Example:
|
||||
`mermaid.initialize()` call takes all the definitions contained in all the `<pre class="mermaid">` tags that it finds in the html body and renders them into diagrams. Example:
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
|
|
@ -132,29 +133,31 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
|
|||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
<body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
|
||||
Here is one mermaid diagram:
|
||||
<div class="mermaid">
|
||||
Here is one mermaid diagram:
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Client] --> B[Load Balancer]
|
||||
B --> C[Server1]
|
||||
B --> D[Server2]
|
||||
</div>
|
||||
</pre
|
||||
>
|
||||
|
||||
And here is another:
|
||||
<div class="mermaid">
|
||||
And here is another:
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Client] -->|tcp_123| B
|
||||
B(Load Balancer)
|
||||
B -->|tcp_456| C[Server1]
|
||||
B -->|tcp_456| D[Server2]
|
||||
</div>
|
||||
</body>
|
||||
</pre
|
||||
>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
|
@ -163,27 +166,29 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
|
|||
|
||||
```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 LR
|
||||
A --- B
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
</pre
|
||||
>
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Client] --> B[Load Balancer]
|
||||
B --> C[Server1]
|
||||
B --> D[Server2]
|
||||
</div>
|
||||
<script src="The\Path\In\Your\Package\mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
</body>
|
||||
</pre
|
||||
>
|
||||
<script src="The\Path\In\Your\Package\mermaid.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
|
@ -204,4 +209,4 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
|
|||
|
||||
**Comments from Knut Sveidqvist, creator of mermaid:**
|
||||
|
||||
- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works.
|
||||
- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflects the previous way which still works.
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ Diagrams/Charts are significant but also become obsolete/inaccurate very fast. T
|
|||
|
||||
# Doc Rot in Diagrams
|
||||
|
||||
Doc-Rot kills diagrams as quickly as it does text, but it takes hours in a desktop application to produce a diagram.
|
||||
Doc-Rot kills diagrams as quickly as it does text, but it takes hours in a desktop application to produce a diagram.
|
||||
|
||||
Mermaid seeks to change using markdown-inspired syntax. The process is a quicker, less complicated, and more convenient way of going from concept to visualization.
|
||||
|
||||
|
|
@ -22,25 +22,24 @@ It is a relatively straightforward solution to a significant hurdle with the sof
|
|||
|
||||
**Mermaid text definitions can be saved for later reuse and editing.**
|
||||
|
||||
>These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`.
|
||||
> These are the Mermaid diagram definitions inside `<div>` tags, with the `class=mermaid`.
|
||||
|
||||
```html
|
||||
<div class="mermaid">
|
||||
<pre class="mermaid">
|
||||
graph TD
|
||||
A[Client] --> B[Load Balancer]
|
||||
B --> C[Server01]
|
||||
B --> D[Server02]
|
||||
</div>
|
||||
</pre>
|
||||
```
|
||||
|
||||
**render**
|
||||
|
||||
>This is the core function of the Mermaid API. It reads all the `Mermaid Definitions` inside `div` tags and returns an SVG file, based on the definition.
|
||||
|
||||
> This is the core function of the Mermaid API. It reads all the `Mermaid Definitions` inside `div` tags and returns an SVG file, based on the definition.
|
||||
|
||||
**Nodes**
|
||||
|
||||
>These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference)
|
||||
> These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference)
|
||||
|
||||
## Advantages of using Mermaid
|
||||
|
||||
|
|
@ -57,13 +56,13 @@ Mermaid solves this by reducing the time and effort required to create diagrams
|
|||
|
||||
Because, the text base for the diagrams allows it to be updated easily. Also, it can be made part of production scripts (and other pieces of code). So less time is spent on documenting, as a separate task.
|
||||
|
||||
|
||||
## Catching up with Development
|
||||
|
||||
Being based on markdown, Mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render diagrams, at much faster speeds.
|
||||
In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials available in the internet.
|
||||
|
||||
## Mermaid is for everyone.
|
||||
|
||||
Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid.live/).
|
||||
|
||||
Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs.
|
||||
Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs.
|
||||
|
|
|
|||
176
docs/usage.md
176
docs/usage.md
|
|
@ -1,4 +1,4 @@
|
|||
# Usage
|
||||
# Usage
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
|
||||
|
||||
|
|
@ -39,30 +39,34 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
|
|||
|
||||
**Hosting mermaid on a web page.**
|
||||
|
||||
>Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
|
||||
> Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
|
||||
|
||||
The easiest way to integrate mermaid on a web page requires three elements:
|
||||
|
||||
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
|
||||
1. Inclusion of the mermaid address in the html page using a `script` tag, in the `src` section.Example:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||||
```
|
||||
|
||||
2. The `mermaidAPI` call, in a separate `script` tag. Example:
|
||||
2. The `mermaidAPI` call, in a separate `script` tag. Example:
|
||||
|
||||
```html
|
||||
<script>mermaid.initialize({startOnLoad:true});
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
```
|
||||
|
||||
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
|
||||
```html
|
||||
<div class="mermaid">
|
||||
graph LR
|
||||
A --- B
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
</div>
|
||||
```
|
||||
3. A graph definition, inside `<div>` tags labeled `class=mermaid`. Example:
|
||||
|
||||
```html
|
||||
<pre class="mermaid">
|
||||
graph LR
|
||||
A --- B
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
</pre>
|
||||
```
|
||||
|
||||
**Following these directions, mermaid starts at page load and (when the page has loaded) it will
|
||||
locate the graph definitions inside the `div` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.**
|
||||
|
|
@ -72,54 +76,54 @@ locate the graph definitions inside the `div` tags with `class="mermaid"` and re
|
|||
```html
|
||||
<!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 LR
|
||||
A --- B
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||||
<script>mermaid.initialize({startOnLoad:true});
|
||||
</script>
|
||||
</body>
|
||||
</pre>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Notes:
|
||||
|
||||
An id attribute is also added to mermaid tags without one.
|
||||
|
||||
Mermaid can load multiple diagrams, in the same page.
|
||||
|
||||
> Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
|
||||
|
||||
|
||||
## Enabling Click Event and Tags in Nodes
|
||||
|
||||
A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
|
||||
A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
|
||||
|
||||
**It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
|
||||
**It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
|
||||
|
||||
## securityLevel
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| ------------- | --------------------------------- | ------ | -------- | ------------------------- |
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
|
||||
| securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
|
||||
|
||||
Values:
|
||||
|
||||
- **strict**: (**default**) tags in text are encoded, click functionality is disabled
|
||||
- **loose**: tags in text are allowed, click functionality is enabled
|
||||
- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
|
||||
- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
|
||||
|
||||
- **strict**: (**default**) tags in text are encoded, click functionality is disabled
|
||||
- **loose**: tags in text are allowed, click functionality is enabled
|
||||
- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
|
||||
- **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.
|
||||
|
||||
```note
|
||||
This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
|
||||
**sandbox** security level is still in the beta version.
|
||||
**sandbox** security level is still in the beta version.
|
||||
```
|
||||
|
||||
**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
|
||||
|
|
@ -128,27 +132,26 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, unle
|
|||
|
||||
```javascript
|
||||
mermaidAPI.initialize({
|
||||
securityLevel: 'loose'
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### Labels out of bounds
|
||||
|
||||
If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
|
||||
whole page to load (dom + assets, particularly the fonts file).
|
||||
|
||||
```javascript
|
||||
$(document).load(function() {
|
||||
mermaid.initialize();
|
||||
$(document).load(function () {
|
||||
mermaid.initialize();
|
||||
});
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```javascript
|
||||
$(document).ready(function() {
|
||||
mermaid.initialize();
|
||||
$(document).ready(function () {
|
||||
mermaid.initialize();
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -158,7 +161,7 @@ If your page has other fonts in its body those might be used instead of the merm
|
|||
|
||||
```css
|
||||
div.mermaid {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -177,13 +180,13 @@ finer-grained control of this behavior, you can call `init` yourself with:
|
|||
Example:
|
||||
|
||||
```javascript
|
||||
mermaid.init({noteMargin: 10}, ".someOtherClass");
|
||||
mermaid.init({ noteMargin: 10 }, '.someOtherClass');
|
||||
```
|
||||
|
||||
Or with no config object, and a jQuery selection:
|
||||
|
||||
```javascript
|
||||
mermaid.init(undefined, $("#someId .yetAnotherClass"));
|
||||
mermaid.init(undefined, $('#someId .yetAnotherClass'));
|
||||
```
|
||||
|
||||
```warning
|
||||
|
|
@ -194,7 +197,6 @@ This type of integration is deprecated. Instead the preferred way of handling mo
|
|||
|
||||
mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
|
||||
|
||||
|
||||
## API usage
|
||||
|
||||
The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
|
||||
|
|
@ -207,14 +209,19 @@ The example below show an outline of how this could be used. The example just lo
|
|||
<script src="mermaid.js"></script>
|
||||
|
||||
<script>
|
||||
mermaid.mermaidAPI.initialize({ startOnLoad:false }); $(function(){ // Example of using the API var
|
||||
element = document.querySelector("#graphDiv"); var insertSvg = function(svgCode, bindFunctions){
|
||||
element.innerHTML = svgCode; }; var graphDefinition = 'graph TB\na-->b'; var graph =
|
||||
mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg); });
|
||||
mermaid.mermaidAPI.initialize({ startOnLoad: false });
|
||||
$(function () {
|
||||
// Example of using the API var
|
||||
element = document.querySelector('#graphDiv');
|
||||
var insertSvg = function (svgCode, bindFunctions) {
|
||||
element.innerHTML = svgCode;
|
||||
};
|
||||
var graphDefinition = 'graph TB\na-->b';
|
||||
var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
### Binding events
|
||||
|
||||
Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must
|
||||
|
|
@ -224,18 +231,17 @@ The example code below is an extract of what mermaid does when using the API. Th
|
|||
bind events to an SVG when using the API for rendering.
|
||||
|
||||
```javascript
|
||||
var insertSvg = function(svgCode, bindFunctions) {
|
||||
element.innerHTML = svgCode;
|
||||
if(typeof callback !== 'undefined'){
|
||||
callback(id);
|
||||
}
|
||||
bindFunctions(element);
|
||||
var insertSvg = function (svgCode, bindFunctions) {
|
||||
element.innerHTML = svgCode;
|
||||
if (typeof callback !== 'undefined') {
|
||||
callback(id);
|
||||
}
|
||||
bindFunctions(element);
|
||||
};
|
||||
|
||||
var id = 'theGraph';
|
||||
|
||||
|
||||
mermaidAPI.render(id,txt,insertSvg, element);
|
||||
mermaidAPI.render(id, txt, insertSvg, element);
|
||||
```
|
||||
|
||||
1. The graph is generated using the render call.
|
||||
|
|
@ -244,7 +250,6 @@ mermaidAPI.render(id,txt,insertSvg, element);
|
|||
4. Insert the SVG code into the DOM for presentation.
|
||||
5. Call the binding function that binds the events.
|
||||
|
||||
|
||||
## Example of a marked renderer
|
||||
|
||||
This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html.
|
||||
|
|
@ -252,11 +257,11 @@ This is the renderer used for transforming the documentation from Markdown to ht
|
|||
```javascript
|
||||
var renderer = new marked.Renderer();
|
||||
renderer.code = function (code, language) {
|
||||
if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
|
||||
return '<div class="mermaid">'+code+'</div>';
|
||||
}
|
||||
else{
|
||||
return '<pre><code>'+code+'</code></pre>';
|
||||
if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
|
||||
<pre class="mermaid">' + code + '</div>';
|
||||
} else {
|
||||
return '<pre><code>' + code + '</code>
|
||||
return '</pre>';
|
||||
}
|
||||
};
|
||||
```
|
||||
|
|
@ -276,14 +281,14 @@ module.exports = (options) ->
|
|||
if not hasMermaid
|
||||
hasMermaid = true
|
||||
html += '<script src="'+options.mermaidPath+'"></script>'
|
||||
html + '<div class="mermaid">'+code+'</div>'
|
||||
html + '<div class="mermaid">'+code+'
|
||||
</pre>'
|
||||
else
|
||||
@defaultCode(code, language)
|
||||
|
||||
renderer
|
||||
```
|
||||
|
||||
|
||||
## Advanced usage
|
||||
|
||||
**Syntax validation without rendering (Work in Progress)**
|
||||
|
|
@ -299,23 +304,23 @@ function in order to handle the error in an application-specific way.
|
|||
The code-example below in meta code illustrates how this could work:
|
||||
|
||||
```javascript
|
||||
mermaid.parseError = function(err,hash){
|
||||
displayErrorInGui(err);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
displayErrorInGui(err);
|
||||
};
|
||||
|
||||
var textFieldUpdated = function(){
|
||||
var textStr = getTextFromFormField('code');
|
||||
var textFieldUpdated = function () {
|
||||
var textStr = getTextFromFormField('code');
|
||||
|
||||
if(mermaid.parse(textStr)){
|
||||
reRender(textStr)
|
||||
}
|
||||
if (mermaid.parse(textStr)) {
|
||||
reRender(textStr);
|
||||
}
|
||||
};
|
||||
|
||||
bindEventHandler('change', 'code', textFieldUpdated);
|
||||
```
|
||||
**Alternative to mermaid.parse():**
|
||||
One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
|
||||
|
||||
**Alternative to mermaid.parse():**
|
||||
One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
|
||||
|
||||
## Configuration
|
||||
|
||||
|
|
@ -323,14 +328,13 @@ Mermaid takes a number of options which lets you tweak the rendering of the diag
|
|||
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**
|
||||
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).
|
||||
|
||||
|
||||
## Using the `mermaidAPI.initialize`/`mermaid.initialize` call
|
||||
|
||||
The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPI depending
|
||||
|
|
@ -339,8 +343,8 @@ on what kind of integration you use.
|
|||
```html
|
||||
<script src="../dist/mermaid.js"></script>
|
||||
<script>
|
||||
var config = { startOnLoad:true, flowchart:{ useMaxWidth:false, htmlLabels:true } };
|
||||
mermaid.initialize(config);
|
||||
var config = { startOnLoad: true, flowchart: { useMaxWidth: false, htmlLabels: true } };
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
@ -355,8 +359,8 @@ This is the preferred way of configuring mermaid.
|
|||
Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
|
||||
approach are:
|
||||
|
||||
* mermaid.startOnLoad
|
||||
* mermaid.htmlLabels
|
||||
- mermaid.startOnLoad
|
||||
- mermaid.htmlLabels
|
||||
|
||||
```javascript
|
||||
mermaid.startOnLoad = true;
|
||||
|
|
@ -371,8 +375,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i
|
|||
It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
|
||||
approach are:
|
||||
|
||||
* mermaid_config.startOnLoad
|
||||
* mermaid_config.htmlLabels
|
||||
- mermaid_config.startOnLoad
|
||||
- mermaid_config.htmlLabels
|
||||
|
||||
```javascript
|
||||
mermaid_config.startOnLoad = true;
|
||||
|
|
@ -386,8 +390,8 @@ This way of setting the configuration is deprecated. Instead the preferred way i
|
|||
|
||||
To set some configuration via the mermaid object. The two parameters that are supported using this approach are:
|
||||
|
||||
* mermaid_config.startOnLoad
|
||||
* mermaid_config.htmlLabels
|
||||
- mermaid_config.startOnLoad
|
||||
- mermaid_config.htmlLabels
|
||||
|
||||
```javascript
|
||||
mermaid_config.startOnLoad = true;
|
||||
|
|
|
|||
11
package.json
11
package.json
|
|
@ -29,8 +29,8 @@
|
|||
"postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > docs/Setup.md",
|
||||
"build:watch": "yarn build:dev --watch",
|
||||
"release": "yarn build",
|
||||
"lint": "eslint --cache ./ --ext .js,.json,.html,.md",
|
||||
"lint:fix": "yarn lint --fix",
|
||||
"lint": "eslint --cache --ignore-path .gitignore .; prettier --check .",
|
||||
"lint:fix": "eslint --fix --ignore-path .gitignore .; prettier --write .",
|
||||
"e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
|
||||
"cypress": "cypress run",
|
||||
"cypress:open": "cypress open",
|
||||
|
|
@ -83,6 +83,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",
|
||||
|
|
@ -91,15 +93,14 @@
|
|||
"cypress": "9.7.0",
|
||||
"cypress-image-snapshot": "^4.0.1",
|
||||
"documentation": "13.2.0",
|
||||
"eslint": "^8.4.1",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint": "^8.23.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-cypress": "^2.12.1",
|
||||
"eslint-plugin-html": "^7.1.0",
|
||||
"eslint-plugin-jest": "^27.0.1",
|
||||
"eslint-plugin-jsdoc": "^39.1.0",
|
||||
"eslint-plugin-json": "^3.1.0",
|
||||
"eslint-plugin-markdown": "^3.0.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"husky": "^8.0.0",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"jest": "^28.0.3",
|
||||
|
|
|
|||
104
yarn.lock
104
yarn.lock
|
|
@ -2795,6 +2795,31 @@
|
|||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@typescript-eslint/eslint-plugin@^5.36.1":
|
||||
version "5.36.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.36.1.tgz#471f64dc53600025e470dad2ca4a9f2864139019"
|
||||
integrity sha512-iC40UK8q1tMepSDwiLbTbMXKDxzNy+4TfPWgIL661Ym0sD42vRcQU93IsZIrmi+x292DBr60UI/gSwfdVYexCA==
|
||||
dependencies:
|
||||
"@typescript-eslint/scope-manager" "5.36.1"
|
||||
"@typescript-eslint/type-utils" "5.36.1"
|
||||
"@typescript-eslint/utils" "5.36.1"
|
||||
debug "^4.3.4"
|
||||
functional-red-black-tree "^1.0.1"
|
||||
ignore "^5.2.0"
|
||||
regexpp "^3.2.0"
|
||||
semver "^7.3.7"
|
||||
tsutils "^3.21.0"
|
||||
|
||||
"@typescript-eslint/parser@^5.36.1":
|
||||
version "5.36.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.36.1.tgz#931c22c7bacefd17e29734628cdec8b2acdcf1ce"
|
||||
integrity sha512-/IsgNGOkBi7CuDfUbwt1eOqUXF9WGVBW9dwEe1pi+L32XrTsZIgmDFIi2RxjzsvB/8i+MIf5JIoTEH8LOZ368A==
|
||||
dependencies:
|
||||
"@typescript-eslint/scope-manager" "5.36.1"
|
||||
"@typescript-eslint/types" "5.36.1"
|
||||
"@typescript-eslint/typescript-estree" "5.36.1"
|
||||
debug "^4.3.4"
|
||||
|
||||
"@typescript-eslint/scope-manager@5.10.1":
|
||||
version "5.10.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.10.1.tgz#f0539c73804d2423506db2475352a4dec36cd809"
|
||||
|
|
@ -2803,11 +2828,34 @@
|
|||
"@typescript-eslint/types" "5.10.1"
|
||||
"@typescript-eslint/visitor-keys" "5.10.1"
|
||||
|
||||
"@typescript-eslint/scope-manager@5.36.1":
|
||||
version "5.36.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.36.1.tgz#23c49b7ddbcffbe09082e6694c2524950766513f"
|
||||
integrity sha512-pGC2SH3/tXdu9IH3ItoqciD3f3RRGCh7hb9zPdN2Drsr341zgd6VbhP5OHQO/reUqihNltfPpMpTNihFMarP2w==
|
||||
dependencies:
|
||||
"@typescript-eslint/types" "5.36.1"
|
||||
"@typescript-eslint/visitor-keys" "5.36.1"
|
||||
|
||||
"@typescript-eslint/type-utils@5.36.1":
|
||||
version "5.36.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.36.1.tgz#016fc2bff6679f54c0b2df848a493f0ca3d4f625"
|
||||
integrity sha512-xfZhfmoQT6m3lmlqDvDzv9TiCYdw22cdj06xY0obSznBsT///GK5IEZQdGliXpAOaRL34o8phEvXzEo/VJx13Q==
|
||||
dependencies:
|
||||
"@typescript-eslint/typescript-estree" "5.36.1"
|
||||
"@typescript-eslint/utils" "5.36.1"
|
||||
debug "^4.3.4"
|
||||
tsutils "^3.21.0"
|
||||
|
||||
"@typescript-eslint/types@5.10.1":
|
||||
version "5.10.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.10.1.tgz#dca9bd4cb8c067fc85304a31f38ec4766ba2d1ea"
|
||||
integrity sha512-ZvxQ2QMy49bIIBpTqFiOenucqUyjTQ0WNLhBM6X1fh1NNlYAC6Kxsx8bRTY3jdYsYg44a0Z/uEgQkohbR0H87Q==
|
||||
|
||||
"@typescript-eslint/types@5.36.1":
|
||||
version "5.36.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.36.1.tgz#1cf0e28aed1cb3ee676917966eb23c2f8334ce2c"
|
||||
integrity sha512-jd93ShpsIk1KgBTx9E+hCSEuLCUFwi9V/urhjOWnOaksGZFbTOxAT47OH2d4NLJnLhkVD+wDbB48BuaycZPLBg==
|
||||
|
||||
"@typescript-eslint/typescript-estree@5.10.1":
|
||||
version "5.10.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.1.tgz#b268e67be0553f8790ba3fe87113282977adda15"
|
||||
|
|
@ -2821,6 +2869,31 @@
|
|||
semver "^7.3.5"
|
||||
tsutils "^3.21.0"
|
||||
|
||||
"@typescript-eslint/typescript-estree@5.36.1":
|
||||
version "5.36.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.36.1.tgz#b857f38d6200f7f3f4c65cd0a5afd5ae723f2adb"
|
||||
integrity sha512-ih7V52zvHdiX6WcPjsOdmADhYMDN15SylWRZrT2OMy80wzKbc79n8wFW0xpWpU0x3VpBz/oDgTm2xwDAnFTl+g==
|
||||
dependencies:
|
||||
"@typescript-eslint/types" "5.36.1"
|
||||
"@typescript-eslint/visitor-keys" "5.36.1"
|
||||
debug "^4.3.4"
|
||||
globby "^11.1.0"
|
||||
is-glob "^4.0.3"
|
||||
semver "^7.3.7"
|
||||
tsutils "^3.21.0"
|
||||
|
||||
"@typescript-eslint/utils@5.36.1":
|
||||
version "5.36.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.36.1.tgz#136d5208cc7a3314b11c646957f8f0b5c01e07ad"
|
||||
integrity sha512-lNj4FtTiXm5c+u0pUehozaUWhh7UYKnwryku0nxJlYUEWetyG92uw2pr+2Iy4M/u0ONMKzfrx7AsGBTCzORmIg==
|
||||
dependencies:
|
||||
"@types/json-schema" "^7.0.9"
|
||||
"@typescript-eslint/scope-manager" "5.36.1"
|
||||
"@typescript-eslint/types" "5.36.1"
|
||||
"@typescript-eslint/typescript-estree" "5.36.1"
|
||||
eslint-scope "^5.1.1"
|
||||
eslint-utils "^3.0.0"
|
||||
|
||||
"@typescript-eslint/utils@^5.10.0":
|
||||
version "5.10.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.10.1.tgz#fa682a33af47080ba2c4368ee0ad2128213a1196"
|
||||
|
|
@ -2841,6 +2914,14 @@
|
|||
"@typescript-eslint/types" "5.10.1"
|
||||
eslint-visitor-keys "^3.0.0"
|
||||
|
||||
"@typescript-eslint/visitor-keys@5.36.1":
|
||||
version "5.36.1"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.36.1.tgz#7731175312d65738e501780f923896d200ad1615"
|
||||
integrity sha512-ojB9aRyRFzVMN3b5joSYni6FAS10BBSCAfKJhjJAV08t/a95aM6tAhz+O1jF+EtgxktuSO3wJysp2R+Def/IWQ==
|
||||
dependencies:
|
||||
"@typescript-eslint/types" "5.36.1"
|
||||
eslint-visitor-keys "^3.3.0"
|
||||
|
||||
"@wdio/config@7.16.11":
|
||||
version "7.16.11"
|
||||
resolved "https://registry.yarnpkg.com/@wdio/config/-/config-7.16.11.tgz#c35a0efb9c7ec6c80e3324e9818f636010087e97"
|
||||
|
|
@ -5549,7 +5630,7 @@ escodegen@^2.0.0:
|
|||
optionalDependencies:
|
||||
source-map "~0.6.1"
|
||||
|
||||
eslint-config-prettier@^8.3.0:
|
||||
eslint-config-prettier@^8.5.0:
|
||||
version "8.5.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
|
||||
integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
|
||||
|
|
@ -5603,13 +5684,6 @@ eslint-plugin-markdown@^3.0.0:
|
|||
dependencies:
|
||||
mdast-util-from-markdown "^0.8.5"
|
||||
|
||||
eslint-plugin-prettier@^4.0.0:
|
||||
version "4.2.1"
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
|
||||
integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
|
||||
dependencies:
|
||||
prettier-linter-helpers "^1.0.0"
|
||||
|
||||
eslint-scope@5.1.1, eslint-scope@^5.1.1:
|
||||
version "5.1.1"
|
||||
resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
|
||||
|
|
@ -5643,7 +5717,7 @@ eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0:
|
|||
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
|
||||
integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
|
||||
|
||||
eslint@^8.4.1:
|
||||
eslint@^8.23.0:
|
||||
version "8.23.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.23.0.tgz#a184918d288820179c6041bb3ddcc99ce6eea040"
|
||||
integrity sha512-pBG/XOn0MsJcKcTRLr27S5HpzQo4kLr+HjLQIyK4EiCsijDl/TB+h5uEuJU6bQ8Edvwz1XWOjpaP2qgnXGpTcA==
|
||||
|
|
@ -5974,11 +6048,6 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
|
|||
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
|
||||
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
|
||||
|
||||
fast-diff@^1.1.2:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
|
||||
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
|
||||
|
||||
fast-glob@^3.2.9:
|
||||
version "3.2.11"
|
||||
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
|
||||
|
|
@ -9760,13 +9829,6 @@ prelude-ls@~1.1.2:
|
|||
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
|
||||
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
|
||||
|
||||
prettier-linter-helpers@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
|
||||
integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
|
||||
dependencies:
|
||||
fast-diff "^1.1.2"
|
||||
|
||||
prettier-plugin-jsdoc@^0.3.30:
|
||||
version "0.3.38"
|
||||
resolved "https://registry.yarnpkg.com/prettier-plugin-jsdoc/-/prettier-plugin-jsdoc-0.3.38.tgz#b8adbe9efc1dc11f3cc5ff0b07e0233a0fdf533d"
|
||||
|
|
|
|||
Loading…
Reference in New Issue