Merge remote-tracking branch 'origin/develop' into develop
|
@ -4,6 +4,9 @@ node_modules/
|
||||||
coverage/
|
coverage/
|
||||||
.idea/
|
.idea/
|
||||||
|
|
||||||
|
dist/*.js
|
||||||
|
dist/*.map
|
||||||
|
|
||||||
yarn-error.log
|
yarn-error.log
|
||||||
.npmrc
|
.npmrc
|
||||||
token
|
token
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
# mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid)
|
# mermaid [![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid)
|
||||||
|
|
||||||
![banner](./img/header.png)
|
![banner](./img/header.png)
|
||||||
**Edit this Page** [![N|Solid](./docs/img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md)
|
|
||||||
|
|
||||||
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!**
|
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!**
|
||||||
|
|
||||||
|
|
|
@ -371,6 +371,38 @@ flowchart TD
|
||||||
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
|
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
it('62: should render styled subgraphs', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
flowchart TB
|
||||||
|
A
|
||||||
|
B
|
||||||
|
subgraph foo[Foo SubGraph]
|
||||||
|
C
|
||||||
|
D
|
||||||
|
end
|
||||||
|
subgraph bar[Bar SubGraph]
|
||||||
|
E
|
||||||
|
F
|
||||||
|
end
|
||||||
|
G
|
||||||
|
|
||||||
|
A-->B
|
||||||
|
B-->C
|
||||||
|
C-->D
|
||||||
|
B-->D
|
||||||
|
D-->E
|
||||||
|
E-->A
|
||||||
|
E-->F
|
||||||
|
F-->D
|
||||||
|
F-->G
|
||||||
|
B-->G
|
||||||
|
G-->D
|
||||||
|
|
||||||
|
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||||
|
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||||
|
`,
|
||||||
|
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -234,8 +234,8 @@ describe('Flowchart', () => {
|
||||||
B-->G
|
B-->G
|
||||||
G-->D
|
G-->D
|
||||||
|
|
||||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F
|
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||||
style bar fill:#999,stroke-width:10px,stroke:#0F0
|
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||||
`,
|
`,
|
||||||
{ fontFamily: 'courier' }
|
{ fontFamily: 'courier' }
|
||||||
);
|
);
|
||||||
|
|
Before Width: | Height: | Size: 134 KiB |
Before Width: | Height: | Size: 152 KiB |
Before Width: | Height: | Size: 167 KiB |
Before Width: | Height: | Size: 162 KiB |
Before Width: | Height: | Size: 132 KiB |
Before Width: | Height: | Size: 127 KiB |
|
@ -0,0 +1,907 @@
|
||||||
|
<!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>
|
||||||
|
<body>
|
||||||
|
<h1>Comparison "graph vs. flowchart"</h1>
|
||||||
|
<h2>Sample 1</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph LR
|
||||||
|
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
|
||||||
|
|
||||||
|
提交申请
|
||||||
|
熊大
|
||||||
|
"];
|
||||||
|
class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
|
||||||
|
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
|
||||||
|
负责人审批
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
|
||||||
|
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
|
||||||
|
DBA审批
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
|
||||||
|
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
|
||||||
|
SA审批
|
||||||
|
阿美
|
||||||
|
"];
|
||||||
|
class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
|
||||||
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
|
||||||
|
主管审批
|
||||||
|
光头强
|
||||||
|
"];
|
||||||
|
class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
|
||||||
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
|
||||||
|
DBA确认
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
|
||||||
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
|
||||||
|
SA确认
|
||||||
|
阿美
|
||||||
|
"];
|
||||||
|
class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
|
||||||
|
sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
|
||||||
|
结束
|
||||||
|
"];
|
||||||
|
class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
|
||||||
|
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
|
||||||
|
SA执行1
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
|
||||||
|
sid-6C2120F3-D940-4958-A067-0903DCE879C4["
|
||||||
|
SA执行2
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
|
||||||
|
sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
|
||||||
|
DBA执行1
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
|
||||||
|
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
|
||||||
|
DBA执行3
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
|
||||||
|
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
|
||||||
|
DBA执行2
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
|
||||||
|
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
|
||||||
|
DBA执行4
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
|
||||||
|
sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
|
||||||
|
负责人确认
|
||||||
|
梁静茹
|
||||||
|
"];
|
||||||
|
class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
|
||||||
|
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
|
||||||
|
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
|
||||||
|
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
|
||||||
|
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
|
||||||
|
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
|
||||||
|
sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
|
||||||
|
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
|
||||||
|
sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
||||||
|
sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
||||||
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
|
||||||
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
|
||||||
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
|
||||||
|
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
||||||
|
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
||||||
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
|
||||||
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
|
||||||
|
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>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart LR
|
||||||
|
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
|
||||||
|
|
||||||
|
提交申请
|
||||||
|
熊大
|
||||||
|
"];
|
||||||
|
class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
|
||||||
|
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
|
||||||
|
负责人审批
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
|
||||||
|
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
|
||||||
|
DBA审批
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
|
||||||
|
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
|
||||||
|
SA审批
|
||||||
|
阿美
|
||||||
|
"];
|
||||||
|
class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
|
||||||
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
|
||||||
|
主管审批
|
||||||
|
光头强
|
||||||
|
"];
|
||||||
|
class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
|
||||||
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
|
||||||
|
DBA确认
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
|
||||||
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
|
||||||
|
SA确认
|
||||||
|
阿美
|
||||||
|
"];
|
||||||
|
class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
|
||||||
|
sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
|
||||||
|
结束
|
||||||
|
"];
|
||||||
|
class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
|
||||||
|
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
|
||||||
|
SA执行1
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
|
||||||
|
sid-6C2120F3-D940-4958-A067-0903DCE879C4["
|
||||||
|
SA执行2
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
|
||||||
|
sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
|
||||||
|
DBA执行1
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
|
||||||
|
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
|
||||||
|
DBA执行3
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
|
||||||
|
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
|
||||||
|
DBA执行2
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
|
||||||
|
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
|
||||||
|
DBA执行4
|
||||||
|
强子
|
||||||
|
"];
|
||||||
|
class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
|
||||||
|
sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
|
||||||
|
负责人确认
|
||||||
|
梁静茹
|
||||||
|
"];
|
||||||
|
class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
|
||||||
|
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
|
||||||
|
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
|
||||||
|
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
|
||||||
|
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
|
||||||
|
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
|
||||||
|
sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
|
||||||
|
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
|
||||||
|
sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
||||||
|
sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
|
||||||
|
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
|
||||||
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
|
||||||
|
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
|
||||||
|
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
||||||
|
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
|
||||||
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
|
||||||
|
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
|
||||||
|
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>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 2</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div 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>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart 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>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 3</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph TD
|
||||||
|
A[/Christmas\]
|
||||||
|
A -->|Get money| B[\Go shopping/]
|
||||||
|
B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
|
||||||
|
C -->|One| D[/Laptop/]
|
||||||
|
C -->|Two| E[\iPhone\]
|
||||||
|
C -->|Three| F[Car]
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart TD
|
||||||
|
A[/Christmas\]
|
||||||
|
A -->|Get money| B[\Go shopping/]
|
||||||
|
B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
|
||||||
|
C -->|One| D[/Laptop/]
|
||||||
|
C -->|Two| E[\iPhone\]
|
||||||
|
C -->|Three| F[Car]
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 4</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph LR
|
||||||
|
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
||||||
|
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
||||||
|
35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
|
||||||
|
35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
|
||||||
|
41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
|
||||||
|
41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
|
||||||
|
39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
|
||||||
|
39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
|
||||||
|
39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
|
||||||
|
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>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart LR
|
||||||
|
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
||||||
|
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
|
||||||
|
35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
|
||||||
|
45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
|
||||||
|
35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
|
||||||
|
41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
|
||||||
|
41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
|
||||||
|
39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
|
||||||
|
39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
|
||||||
|
39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
|
||||||
|
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>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 5</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div 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")
|
||||||
|
db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
|
||||||
|
4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
|
||||||
|
30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
|
||||||
|
5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
|
||||||
|
c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
|
||||||
|
b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
|
||||||
|
8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
|
||||||
|
0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
|
||||||
|
07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
|
||||||
|
c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
|
||||||
|
ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
|
||||||
|
68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
|
||||||
|
f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
|
||||||
|
d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
|
||||||
|
71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
|
||||||
|
c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
|
||||||
|
9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
|
||||||
|
1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
|
||||||
|
200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
|
||||||
|
1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
|
||||||
|
9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div 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")
|
||||||
|
db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
|
||||||
|
4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
|
||||||
|
30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
|
||||||
|
5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
|
||||||
|
c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
|
||||||
|
b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
|
||||||
|
8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
|
||||||
|
0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
|
||||||
|
07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
|
||||||
|
c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
|
||||||
|
ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
|
||||||
|
68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
|
||||||
|
f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
|
||||||
|
d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
|
||||||
|
71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
|
||||||
|
c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
|
||||||
|
9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
|
||||||
|
1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
|
||||||
|
200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
|
||||||
|
1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
|
||||||
|
9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 6</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph TB
|
||||||
|
subgraph One
|
||||||
|
a1-->a2
|
||||||
|
end
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart TB
|
||||||
|
subgraph One
|
||||||
|
a1-->a2
|
||||||
|
end
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 7</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph TB
|
||||||
|
A
|
||||||
|
B
|
||||||
|
subgraph foo[Foo SubGraph]
|
||||||
|
C
|
||||||
|
D
|
||||||
|
end
|
||||||
|
subgraph bar[Bar SubGraph]
|
||||||
|
E
|
||||||
|
F
|
||||||
|
end
|
||||||
|
G
|
||||||
|
|
||||||
|
A-->B
|
||||||
|
B-->C
|
||||||
|
C-->D
|
||||||
|
B-->D
|
||||||
|
D-->E
|
||||||
|
E-->A
|
||||||
|
E-->F
|
||||||
|
F-->D
|
||||||
|
F-->G
|
||||||
|
B-->G
|
||||||
|
G-->D
|
||||||
|
|
||||||
|
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||||
|
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart TB
|
||||||
|
A
|
||||||
|
B
|
||||||
|
subgraph foo[Foo SubGraph]
|
||||||
|
C
|
||||||
|
D
|
||||||
|
end
|
||||||
|
subgraph bar[Bar SubGraph]
|
||||||
|
E
|
||||||
|
F
|
||||||
|
end
|
||||||
|
G
|
||||||
|
|
||||||
|
A-->B
|
||||||
|
B-->C
|
||||||
|
C-->D
|
||||||
|
B-->D
|
||||||
|
D-->E
|
||||||
|
E-->A
|
||||||
|
E-->F
|
||||||
|
F-->D
|
||||||
|
F-->G
|
||||||
|
B-->G
|
||||||
|
G-->D
|
||||||
|
|
||||||
|
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||||
|
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 8</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph LR
|
||||||
|
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
|
||||||
|
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
|
||||||
|
81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
|
||||||
|
456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
|
||||||
|
f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
|
||||||
|
click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
|
||||||
|
6000"
|
||||||
|
click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
|
||||||
|
600"
|
||||||
|
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
|
||||||
|
3000"
|
||||||
|
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart LR
|
||||||
|
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
|
||||||
|
f7f580e11d00a75814d2ded41fe8e8fe[1141 BBB fa:fa-check]
|
||||||
|
81dc9bdb52d04dc20036dbd8313ed055[1234 CCC fa:fa-check]
|
||||||
|
456ac9b0d15a8b7f1e71073221059886 -->|Node| f7f580e11d00a75814d2ded41fe8e8fe
|
||||||
|
f7f580e11d00a75814d2ded41fe8e8fe -->|Node| 81dc9bdb52d04dc20036dbd8313ed055
|
||||||
|
click 456ac9b0d15a8b7f1e71073221059886 "/admin/user/view?id=1051" "AAA
|
||||||
|
6000"
|
||||||
|
click f7f580e11d00a75814d2ded41fe8e8fe "/admin/user/view?id=1141" "BBB
|
||||||
|
600"
|
||||||
|
click 81dc9bdb52d04dc20036dbd8313ed055 "/admin/user/view?id=1234" "CCC
|
||||||
|
3000"
|
||||||
|
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 9</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div 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?}}
|
||||||
|
C -->|One| D[Laptop]
|
||||||
|
C -->|Two| E[iPhone]
|
||||||
|
C -->|Three| F[Car]
|
||||||
|
click A "flowchart.html#link-clicked" "link test"
|
||||||
|
click B testClick "click test"
|
||||||
|
classDef someclass fill:#f96;
|
||||||
|
class A someclass;
|
||||||
|
class C someclass;
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div 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?}}
|
||||||
|
C -->|One| D[Laptop]
|
||||||
|
C -->|Two| E[iPhone]
|
||||||
|
C -->|Three| F[Car]
|
||||||
|
click A "flowchart.html#link-clicked" "link test"
|
||||||
|
click B testClick "click test"
|
||||||
|
classDef someclass fill:#f96;
|
||||||
|
class A someclass;
|
||||||
|
class C someclass;
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 10</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph TD
|
||||||
|
A([stadium shape test])
|
||||||
|
A -->|Get money| B([Go shopping])
|
||||||
|
B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
|
||||||
|
C -->|One| D([Laptop])
|
||||||
|
C -->|Two| E([iPhone])
|
||||||
|
C -->|Three| F([Car<br/>wroom wroom])
|
||||||
|
click A "flowchart.html#link-clicked" "link test"
|
||||||
|
click B testClick "click test"
|
||||||
|
classDef someclass fill:#f96;
|
||||||
|
class A someclass;
|
||||||
|
class C someclass;
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart TD
|
||||||
|
A([stadium shape test])
|
||||||
|
A -->|Get money| B([Go shopping])
|
||||||
|
B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
|
||||||
|
C -->|One| D([Laptop])
|
||||||
|
C -->|Two| E([iPhone])
|
||||||
|
C -->|Three| F([Car<br/>wroom wroom])
|
||||||
|
click A "flowchart.html#link-clicked" "link test"
|
||||||
|
click B testClick "click test"
|
||||||
|
classDef someclass fill:#f96;
|
||||||
|
class A someclass;
|
||||||
|
class C someclass;
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 11</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph LR
|
||||||
|
A[[subroutine shape test]]
|
||||||
|
A -->|Get money| B[[Go shopping]]
|
||||||
|
B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]]
|
||||||
|
C -->|One| D[[Laptop]]
|
||||||
|
C -->|Two| E[[iPhone]]
|
||||||
|
C -->|Three| F[[Car<br/>wroom wroom]]
|
||||||
|
click A "flowchart.html#link-clicked" "link test"
|
||||||
|
click B testClick "click test"
|
||||||
|
classDef someclass fill:#f96;
|
||||||
|
class A someclass;
|
||||||
|
class C someclass;
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart LR
|
||||||
|
A[[subroutine shape test]]
|
||||||
|
A -->|Get money| B[[Go shopping]]
|
||||||
|
B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]]
|
||||||
|
C -->|One| D[[Laptop]]
|
||||||
|
C -->|Two| E[[iPhone]]
|
||||||
|
C -->|Three| F[[Car<br/>wroom wroom]]
|
||||||
|
click A "flowchart.html#link-clicked" "link test"
|
||||||
|
click B testClick "click test"
|
||||||
|
classDef someclass fill:#f96;
|
||||||
|
class A someclass;
|
||||||
|
class C someclass;
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 12</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph LR
|
||||||
|
A[(cylindrical<br />shape<br />test)]
|
||||||
|
A -->|Get money| B1[(Go shopping 1)]
|
||||||
|
A -->|Get money| B2[(Go shopping 2)]
|
||||||
|
A -->|Get money| B3[(Go shopping 3)]
|
||||||
|
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?)]
|
||||||
|
B1 --> C
|
||||||
|
B2 --> C
|
||||||
|
B3 --> C
|
||||||
|
C -->|One| D[(Laptop)]
|
||||||
|
C -->|Two| E[(iPhone)]
|
||||||
|
C -->|Three| F[(Car)]
|
||||||
|
click A "flowchart.html#link-clicked" "link test"
|
||||||
|
click B testClick "click test"
|
||||||
|
classDef someclass fill:#f96;
|
||||||
|
class A someclass;
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart LR
|
||||||
|
A[(cylindrical<br />shape<br />test)]
|
||||||
|
A -->|Get money| B1[(Go shopping 1)]
|
||||||
|
A -->|Get money| B2[(Go shopping 2)]
|
||||||
|
A -->|Get money| B3[(Go shopping 3)]
|
||||||
|
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?)]
|
||||||
|
B1 --> C
|
||||||
|
B2 --> C
|
||||||
|
B3 --> C
|
||||||
|
C -->|One| D[(Laptop)]
|
||||||
|
C -->|Two| E[(iPhone)]
|
||||||
|
C -->|Three| F[(Car)]
|
||||||
|
click A "flowchart.html#link-clicked" "link test"
|
||||||
|
click B testClick "click test"
|
||||||
|
classDef someclass fill:#f96;
|
||||||
|
class A someclass;
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 13</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div 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)
|
||||||
|
E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
|
||||||
|
A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
|
||||||
|
C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
|
||||||
|
E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
|
||||||
|
linkStyle 0 stroke:DarkGray,stroke-width:2px
|
||||||
|
linkStyle 1 stroke:DarkGray,stroke-width:2px
|
||||||
|
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div 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)
|
||||||
|
E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
|
||||||
|
A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
|
||||||
|
C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
|
||||||
|
E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
|
||||||
|
linkStyle 0 stroke:DarkGray,stroke-width:2px
|
||||||
|
linkStyle 1 stroke:DarkGray,stroke-width:2px
|
||||||
|
linkStyle 2 stroke:DarkGray,stroke-width:2px
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 14</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div 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>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div 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>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 15</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph TB
|
||||||
|
TITLE["Link Click Events<br>(click the nodes below)"]
|
||||||
|
A["link test (open in same tab)"]
|
||||||
|
B["link test (open in new tab)"]
|
||||||
|
C[anchor test]
|
||||||
|
D[mailto test]
|
||||||
|
E[other protocol test]
|
||||||
|
F[script test]
|
||||||
|
TITLE --> A & B & C & D & E & F
|
||||||
|
click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
|
||||||
|
click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
|
||||||
|
click C "#link-clicked"
|
||||||
|
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>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart TB
|
||||||
|
TITLE["Link Click Events<br>(click the nodes below)"]
|
||||||
|
A["link test (open in same tab)"]
|
||||||
|
B["link test (open in new tab)"]
|
||||||
|
C[anchor test]
|
||||||
|
D[mailto test]
|
||||||
|
E[other protocol test]
|
||||||
|
F[script test]
|
||||||
|
TITLE --> A & B & C & D & E & F
|
||||||
|
click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
|
||||||
|
click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
|
||||||
|
click C "#link-clicked"
|
||||||
|
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/>
|
||||||
|
<h2>Sample 16</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div 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}
|
||||||
|
E{{default<br />style}} -->|default<br />style| F([default<br />style])
|
||||||
|
linkStyle default color:Sienna;
|
||||||
|
linkStyle 0 color:red;
|
||||||
|
linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
|
||||||
|
style A color:red;
|
||||||
|
style B color:blue;
|
||||||
|
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
click B "flowchart.html#link-clicked" "link test"
|
||||||
|
click D testClick "click test"
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div 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}
|
||||||
|
E{{default<br />style}} -->|default<br />style| F([default<br />style])
|
||||||
|
linkStyle default color:Sienna;
|
||||||
|
linkStyle 0 color:red;
|
||||||
|
linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
|
||||||
|
style A color:red;
|
||||||
|
style B color:blue;
|
||||||
|
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
click B "flowchart.html#link-clicked" "link test"
|
||||||
|
click D testClick "click test"
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 17</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph TD
|
||||||
|
A[myClass1] --> B[default] & C[default]
|
||||||
|
B[default] & C[default] --> D[myClass2]
|
||||||
|
classDef default stroke-width:2px,fill:none,stroke:silver
|
||||||
|
classDef node color:red
|
||||||
|
classDef myClass1 color:#0000ff
|
||||||
|
classDef myClass2 stroke:#0000ff,fill:#ccccff
|
||||||
|
class A myClass1
|
||||||
|
class D myClass2
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart TD
|
||||||
|
A[myClass1] --> B[default] & C[default]
|
||||||
|
B[default] & C[default] --> D[myClass2]
|
||||||
|
classDef default stroke-width:2px,fill:none,stroke:silver
|
||||||
|
classDef node color:red
|
||||||
|
classDef myClass1 color:#0000ff
|
||||||
|
classDef myClass2 stroke:#0000ff,fill:#ccccff
|
||||||
|
class A myClass1
|
||||||
|
class D myClass2
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</html>
|
|
@ -293,8 +293,8 @@ graph TB
|
||||||
B-->G
|
B-->G
|
||||||
G-->D
|
G-->D
|
||||||
|
|
||||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F
|
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||||
style bar fill:#999,stroke-width:10px,stroke:#0F0
|
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||||
</div>
|
</div>
|
||||||
<div class="mermaid">
|
<div class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
# Version 8.6.0 Changes
|
# Version 8.6.0 Changes
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/8.6.0_docs.md)
|
|
||||||
## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
|
## [New Mermaid Live-Editor Beta](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiJSV7aW5pdDoge1widGhlbWVcIjogXCJmb3Jlc3RcIiwgXCJsb2dMZXZlbFwiOiAxIH19JSVcbmdyYXBoIFREXG4gIEFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgQyAtLT58T25lfCBEW0xhcHRvcF1cbiAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cblx0XHQiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGFyayJ9fQ)
|
||||||
|
|
||||||
## [CDN](https://unpkg.com/mermaid/)
|
## [CDN](https://unpkg.com/mermaid/)
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
# Change Log
|
# Change Log
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/CHANGELOG.md)
|
|
||||||
|
|
||||||
Here is the list of the newest versions in Descending Order, beginning from the latest version.
|
Here is the list of the newest versions in Descending Order, beginning from the latest version.
|
||||||
|
|
||||||
## Unreleased
|
## Unreleased
|
||||||
|
|
|
@ -6,8 +6,7 @@ Many editors, wikis and other tools have mermaid integrations already making it
|
||||||
|
|
||||||
![banner](img/header.png)
|
![banner](img/header.png)
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/About.md)
|
:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
|
||||||
|
|
||||||
|
|
||||||
[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid)
|
[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Mermaid/mermaid)
|
||||||
|
|
||||||
|
@ -203,6 +202,7 @@ To support mermaid on your website, all you have to do is add Mermaid’s JavaSc
|
||||||
## Examples can be found in [Other examples](/examples)
|
## Examples can be found in [Other examples](/examples)
|
||||||
|
|
||||||
# Sibling projects
|
# Sibling projects
|
||||||
|
|
||||||
- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
|
- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
|
||||||
- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
|
- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
|
||||||
- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
|
- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
# Tutorials
|
# Tutorials
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md)
|
|
||||||
|
|
||||||
This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
|
This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
|
||||||
|
|
||||||
For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram.
|
For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram.
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
# Breaking changes
|
# Breaking changes
|
||||||
**Edit this Page** [![N|Solid](./img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/breakingChanges.md)
|
|
||||||
### Breaking changes from history version to latest version:
|
### Breaking changes from history version to latest version:
|
||||||
|
|
||||||
## #1
|
## #1
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
# Class diagrams
|
# Class diagrams
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/classDiagram.md)
|
|
||||||
|
|
||||||
> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
|
> "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
|
||||||
> Wikipedia
|
> Wikipedia
|
||||||
|
|
||||||
|
@ -338,7 +336,6 @@ Multiplicity notations are placed near the ends of an association.
|
||||||
|
|
||||||
The different cardinality options are :
|
The different cardinality options are :
|
||||||
|
|
||||||
- `0..1` Zero or one
|
|
||||||
- `1` Only 1
|
- `1` Only 1
|
||||||
- `0..1` Zero or One
|
- `0..1` Zero or One
|
||||||
- `1..*` One or more
|
- `1..*` One or more
|
||||||
|
|
|
@ -1,8 +1,5 @@
|
||||||
# Development 🙌
|
# Development 🙌
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md)
|
|
||||||
|
|
||||||
|
|
||||||
So you want to help? That's great!
|
So you want to help? That's great!
|
||||||
|
|
||||||
![Image of happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
|
![Image of happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
# Directives
|
# Directives
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/directives.md)
|
|
||||||
|
|
||||||
## Directives were added in [Version 8.6.0](../getting-started/8.6.0_docs.md). Please Read it for more information.
|
## Directives were added in [Version 8.6.0](../getting-started/8.6.0_docs.md). Please Read it for more information.
|
||||||
|
|
||||||
## Directives
|
## Directives
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
# Entity Relationship Diagrams
|
# Entity Relationship Diagrams
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/entityRelationshipDiagram.md
|
|
||||||
> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
|
> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
|
||||||
|
|
||||||
Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*. For example the `CUSTOMER` entity *type* would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
|
Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*. For example the `CUSTOMER` entity *type* would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
|
||||||
|
@ -108,10 +107,10 @@ Cardinality is a property that describes how many elements of another entity can
|
||||||
|
|
||||||
| Value (left) | Value (right) | Meaning |
|
| Value (left) | Value (right) | Meaning |
|
||||||
|:------------:|:-------------:|--------------------------------------------------------|
|
|:------------:|:-------------:|--------------------------------------------------------|
|
||||||
| `|o` | `o|` | Zero or one |
|
| `\|o` | `o\|` | Zero or one |
|
||||||
| `||` | `||` | Exactly one |
|
| `\|\|` | `\|\|` | Exactly one |
|
||||||
| `}o` | `o{` | Zero or more (no upper limit) |
|
| `}o` | `o{` | Zero or more (no upper limit) |
|
||||||
| `}|` | `|{` | One or more (no upper limit) |
|
| `}\|` | `\|{` | One or more (no upper limit) |
|
||||||
|
|
||||||
### Identification
|
### Identification
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
# Examples
|
# Examples
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/examples.md)
|
|
||||||
|
|
||||||
This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
|
This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.
|
||||||
|
|
||||||
**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](/usage?id=usage).**
|
**If you wish to learn how to support mermaid on your webpage, read the [Beginner's Guide](/usage?id=usage).**
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
# Frequently Asked Questions
|
# Frequently Asked Questions
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/faq.md)
|
|
||||||
|
|
||||||
1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
|
1. [How to add title to flowchart?](https://github.com/knsv/mermaid/issues/556#issuecomment-363182217)
|
||||||
1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
|
1. [How to specify custom CSS file?](https://github.com/mermaidjs/mermaid.cli/pull/24#issuecomment-373402785)
|
||||||
1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
|
1. [How to fix tooltip misplacement issue?](https://github.com/knsv/mermaid/issues/542#issuecomment-3343564621)
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
# Flowcharts - Basic Syntax
|
# Flowcharts - Basic Syntax
|
||||||
|
|
||||||
|
**Edit this Page** [![N|Solid](.img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/flowchart.md)
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/flowchart.md)
|
|
||||||
|
|
||||||
## Graph
|
## Graph
|
||||||
|
|
||||||
|
@ -361,7 +360,7 @@ graph TB
|
||||||
```
|
```
|
||||||
If you describe the same diagram using the the basic syntax, it will take four lines. A
|
If you describe the same diagram using the the basic syntax, it will take four lines. A
|
||||||
word of warning, one could go overboard with this making the graph harder to read in
|
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 to much and not to little.
|
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
|
||||||
This goes for expressive syntaxes as well.
|
This goes for expressive syntaxes as well.
|
||||||
```
|
```
|
||||||
graph TB
|
graph TB
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
# Gantt diagrams
|
# Gantt diagrams
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/gantt.md)
|
|
||||||
|
|
||||||
> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
|
> A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule and the amount of time it would take for any one project to finish. Gantt charts illustrate number of days between the start and finish dates of the terminal elements and summary elements of a project.
|
||||||
|
|
||||||
## A note to users
|
## A note to users
|
||||||
|
|
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 39 KiB |
After Width: | Height: | Size: 29 KiB |
Before Width: | Height: | Size: 102 KiB |
Before Width: | Height: | Size: 71 KiB |
Before Width: | Height: | Size: 36 KiB |
Before Width: | Height: | Size: 49 KiB |
Before Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 111 KiB |
|
@ -5,8 +5,8 @@
|
||||||
<title>mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.</title>
|
<title>mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.</title>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
|
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
|
||||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||||
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
|
<!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css"> -->
|
||||||
<link rel="stylesheet" href="theme.css"> <script src="//cdn.jsdelivr.net/npm/mermaid@8.8.2/dist/mermaid.min.js"></script>
|
<link rel="stylesheet" href="theme.css"> <script src="//cdn.jsdelivr.net/npm/mermaid@8.8.2/dist/mermaid.min.js"></script>
|
||||||
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
|
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
|
||||||
<script>
|
<script>
|
||||||
|
@ -34,7 +34,7 @@
|
||||||
window.$docsify = {
|
window.$docsify = {
|
||||||
search: 'auto',
|
search: 'auto',
|
||||||
name: 'mermaid',
|
name: 'mermaid',
|
||||||
repo: 'https://github.com/knsv/mermaid',
|
repo: 'https://github.com/mermaid-js/mermaid',
|
||||||
loadSidebar: true,
|
loadSidebar: true,
|
||||||
mergeNavbar: true,
|
mergeNavbar: true,
|
||||||
maxLevel: 4,
|
maxLevel: 4,
|
||||||
|
@ -50,7 +50,16 @@
|
||||||
return this.origin.code.apply(this, arguments);
|
return this.origin.code.apply(this, arguments);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
function (hook, vm) {
|
||||||
|
hook.beforeEach(function (html) {
|
||||||
|
url = 'https://github.com/mermaid-js/mermaid/blob/develop/docs/' + vm.route.file
|
||||||
|
var editHtml = '[:memo: Edit this Page](' + url + ')\n'
|
||||||
|
return editHtml + html
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
var num = 0;
|
var num = 0;
|
||||||
|
@ -69,9 +78,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
|
||||||
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
|
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
|
||||||
<scrpt src="//unpkg.com/docsify/lib/plugins/ga.min.js"></scrpt>
|
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
# Integrations
|
# Integrations
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/integrations.md)
|
|
||||||
|
|
||||||
The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions
|
The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions
|
||||||
|
|
||||||
They also serve as proof of concept, for the variety of things that can be built with mermaid.
|
They also serve as proof of concept, for the variety of things that can be built with mermaid.
|
||||||
|
@ -123,6 +121,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
||||||
- [MarkdownMermaid](https://github.com/sebastienwarin/mkdocs-mermaid-plugin)
|
- [MarkdownMermaid](https://github.com/sebastienwarin/mkdocs-mermaid-plugin)
|
||||||
- [Type Doc](https://typedoc.org/)
|
- [Type Doc](https://typedoc.org/)
|
||||||
- [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
|
- [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
|
||||||
|
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme)
|
||||||
|
|
||||||
## Chrome Extensions
|
## Chrome Extensions
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
# A basic mermaid User-Guide for Beginners
|
# A basic mermaid User-Guide for Beginners
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-gettingStarted.md)
|
|
||||||
|
|
||||||
Creating diagrams and charts using mermaid code is simple.
|
Creating diagrams and charts using mermaid code is simple.
|
||||||
The code is turned into a diagram in the web page with the use of a mermaid renderer.
|
The code is turned into a diagram in the web page with the use of a mermaid renderer.
|
||||||
|
|
||||||
|
@ -11,7 +9,7 @@ This then renders a diagram based on that code in SVG, alternatively it
|
||||||
Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot.
|
Most web browsers, such as Firefox, Chrome and Safari, can render mermaid, Internet Explorer however cannot.
|
||||||
|
|
||||||
## For beginners, there are four relatively easy ways you can use mermaid:
|
## For beginners, there are four relatively easy ways you can use mermaid:
|
||||||
1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For some popular video tutorials on the live editor go to [Overview](../overview/n00b-overview.md).
|
1. Using the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/). For some popular video tutorials on the live editor go to [Overview](./n00b-overview.md).
|
||||||
2. Using one of the many [mermaid plugins](../overview/integrations.md).
|
2. Using one of the many [mermaid plugins](../overview/integrations.md).
|
||||||
3. Hosting mermaid on a webpage, with an absolute link.
|
3. Hosting mermaid on a webpage, with an absolute link.
|
||||||
4. Downloading mermaid and hosting it on your Web Page.
|
4. Downloading mermaid and hosting it on your Web Page.
|
||||||
|
@ -30,55 +28,26 @@ In the `Code` section one can write or edit raw mermaid code, and instantly `Pre
|
||||||
|
|
||||||
For some popular video tutorials on the live editor go to [Overview](/overview/n00b-overview.md).
|
For some popular video tutorials on the live editor go to [Overview](/overview/n00b-overview.md).
|
||||||
|
|
||||||
![Flowchart](/img/n00b-liveEditor.png)
|
![Flowchart](./img/DiagramDefinition.png)
|
||||||
|
|
||||||
**Notes:**
|
**Notes:**
|
||||||
|
|
||||||
You can also click "Copy Markdown" to copy the markdown code for the diagram, that can then be pasted directly into your documentation.
|
You can also click "Copy Markdown" to copy the markdown code for the diagram, that can then be pasted directly into your documentation.
|
||||||
|
|
||||||
![Flowchart](/img/liveEditorOptions.png)
|
![Flowchart](./img/DownloadChoices.png)
|
||||||
|
|
||||||
The `Mermaid configuration` is for controlling mermaid behaviour. An easy introduction to mermaid configuration is found in the [Advanced usage](n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](Setup.md) page.
|
The `Mermaid configuration` is for configuring the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](./n00b-advanced.md) section. A complete configuration reference cataloguing default values is found on the [mermaidAPI](Setup.md) page.
|
||||||
|
|
||||||
|
![Flowchart](./img/Configuration.png)
|
||||||
|
|
||||||
|
|
||||||
## 2. Using mermaid plugins:
|
## 2. Using mermaid plugins:
|
||||||
|
|
||||||
Thanks to the growing popularity of mermaid, many plugins already exist which incorporate a mermaid renderer. An extensive list can be found [here](../overview/integrations.md).
|
Thanks to the growing popularity of mermaid, many plugins already allow the generation of mermaid diagrams from within popular applications. An extensive list of applications the support mermaid plugins can be found [here](./integrations.md).
|
||||||
|
|
||||||
One example in the list is the [Atlassian Confluence mermaid plugin](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
|
|
||||||
|
|
||||||
When the mermaid plugin is installed on a Confluence server, one can insert a mermaid object into any Confluence page.
|
|
||||||
### Here is a step by step process for using the mermaid-Confluence plugin:
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
- In a Confluence page, Add Other macros.
|
|
||||||
|
|
||||||
![Flowchart](../img/n00b-Confluence1.png)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
- Search for mermaid.
|
|
||||||
|
|
||||||
![Flowchart](../img/n00b-Confluence2.png)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
- The mermaid object appears. Paste your mermaid code into it.
|
|
||||||
|
|
||||||
![Flowchart](../img/n00b-Confluence3.png)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
- Save the page and the diagram appears.
|
|
||||||
|
|
||||||
![Flowchart](../img/n00b-Confluence4.png)
|
|
||||||
|
|
||||||
---
|
|
||||||
## The following are two ways of hosting mermaid on a webpage.
|
|
||||||
**This is covered in greater detail in the [Usage section](usage.md)**
|
**This is covered in greater detail in the [Usage section](usage.md)**
|
||||||
|
|
||||||
## 3. Using the Mermaid API: The quick and dirty way of deploying mermaid
|
## 3. Deploying mermaid on the Browser
|
||||||
|
|
||||||
This method can be used with any common web server. Apache, IIS, nginx, node express [...], you pick your favourite.
|
This method can be used with any common web server. Apache, IIS, nginx, node express [...], you pick your favourite.
|
||||||
|
|
||||||
|
@ -94,13 +63,11 @@ a. A reference for fetching the online mermaid renderer, which is written in Jav
|
||||||
|
|
||||||
b. The mermaid code for the diagram we want to create.
|
b. The mermaid code for the diagram we want to create.
|
||||||
|
|
||||||
c. The `mermaid.initialize()` API call to start the rendering process.
|
c. The `mermaid.initialize()` call to start the rendering process.
|
||||||
|
|
||||||
|
|
||||||
## This is what needs to go into the html file (and all of them are important), for the mermaidAPI to render the diagrams:
|
## This is what needs to go into the html file (and all of them are important), for the mermaidAPI to render the diagrams:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### a. A reference to the address of the `mermaid.js` or the `mermaid.min.js` file has to be contained in a `<script src>` tag like so:
|
### a. A reference to the address of the `mermaid.js` or the `mermaid.min.js` file has to be contained in a `<script src>` tag like so:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
|
|
@ -1,8 +1,5 @@
|
||||||
# Overview for Beginners
|
# Overview for Beginners
|
||||||
|
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-overview.md)
|
|
||||||
|
|
||||||
## Explaining with a Diagram
|
## Explaining with a Diagram
|
||||||
|
|
||||||
A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so for documentation. Mainly because it takes too much time that could be used for more important functions.
|
A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so for documentation. Mainly because it takes too much time that could be used for more important functions.
|
||||||
|
|
|
@ -1,16 +1,13 @@
|
||||||
## Diagram syntax
|
## Diagram syntax
|
||||||
|
|
||||||
|
If you are new to mermaid, read the [Getting Started](../getting-started/n00b-gettingStarted.md) and [Overview](../overview/n00b-overview.md) sections, to learn the basics of mermaid.
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-syntaxReference.md)
|
|
||||||
|
|
||||||
If you are new to mermaid, read the [Simple start to write diagrams](/n00b-gettingStarted.md) and [Overview for Beginners](/n00b-overview.md) sections, to learn the basics of mermaid.
|
|
||||||
Video Tutorials can be found at the bottom of the Overview Section.
|
Video Tutorials can be found at the bottom of the Overview Section.
|
||||||
|
|
||||||
This section is a list of diagram types supported by mermaid. Below is a list of links to articles that explain the syntax of the diagrams or charts that can be called.
|
This section is a list of diagram types supported by mermaid. Below is a list of links to articles that explain the syntax of the diagrams or charts that can be called.
|
||||||
|
|
||||||
They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer.
|
They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer.
|
||||||
|
|
||||||
**The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation.**
|
### The benefits of text based diagramming are its speed and modifiability. mermaid allows for easy maintenance and modification of diagrams. This means your diagrams will always be up to date and closely follow your code and improve your documentation.
|
||||||
|
|
||||||
## mermaid tag:
|
## mermaid tag:
|
||||||
These Diagram Definitions can be entered within a \<div class=mermaid> tag.
|
These Diagram Definitions can be entered within a \<div class=mermaid> tag.
|
||||||
|
|
|
@ -1,8 +1,5 @@
|
||||||
# Adding a New Diagram/Chart 📊
|
# Adding a New Diagram/Chart 📊
|
||||||
|
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/newDiagram.md)
|
|
||||||
|
|
||||||
### Step 1: Grammar & Parsing
|
### Step 1: Grammar & Parsing
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
# Pie chart diagrams
|
# Pie chart diagrams
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/pie.md)
|
|
||||||
|
|
||||||
> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
|
> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
|
||||||
-Wikipedia
|
-Wikipedia
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
# State diagrams
|
# State diagrams
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/stateDiagram.md)
|
|
||||||
|
|
||||||
> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
|
> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
|
||||||
|
|
||||||
Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
|
Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
# Usage
|
# Usage
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/usage.md)
|
|
||||||
|
|
||||||
mermaid is a javascript tool that makes use of a markdown based syntax to render customizable diagrams and charts, for greater speed and ease.
|
mermaid is a javascript tool that makes use of a markdown based syntax to render customizable diagrams and charts, for greater speed and ease.
|
||||||
|
|
||||||
mermaid was made to help Documentation catch up with Development, in quickly changing projects.
|
mermaid was made to help Documentation catch up with Development, in quickly changing projects.
|
||||||
|
|
|
@ -1,8 +1,5 @@
|
||||||
# User Journey Diagram
|
# User Journey Diagram
|
||||||
|
|
||||||
|
|
||||||
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/user-journey.md)
|
|
||||||
|
|
||||||
> User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)
|
> User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)
|
||||||
|
|
||||||
Mermaid can render user journey diagrams:
|
Mermaid can render user journey diagrams:
|
||||||
|
|
|
@ -49,7 +49,6 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@braintree/sanitize-url": "^3.1.0",
|
"@braintree/sanitize-url": "^3.1.0",
|
||||||
"babel-eslint": "^10.1.0",
|
|
||||||
"d3": "^5.7.0",
|
"d3": "^5.7.0",
|
||||||
"dagre": "^0.8.4",
|
"dagre": "^0.8.4",
|
||||||
"dagre-d3": "^0.6.4",
|
"dagre-d3": "^0.6.4",
|
||||||
|
@ -67,6 +66,7 @@
|
||||||
"@babel/register": "^7.0.0",
|
"@babel/register": "^7.0.0",
|
||||||
"@percy/cypress": "*",
|
"@percy/cypress": "*",
|
||||||
"babel-core": "7.0.0-bridge.0",
|
"babel-core": "7.0.0-bridge.0",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
"babel-jest": "^24.9.0",
|
"babel-jest": "^24.9.0",
|
||||||
"babel-loader": "^8.0.4",
|
"babel-loader": "^8.0.4",
|
||||||
"coveralls": "^3.0.2",
|
"coveralls": "^3.0.2",
|
||||||
|
|
|
@ -40,6 +40,7 @@ const rect = (parent, node) => {
|
||||||
log.trace('Data ', node, JSON.stringify(node));
|
log.trace('Data ', node, JSON.stringify(node));
|
||||||
// center the rect around its coordinate
|
// center the rect around its coordinate
|
||||||
rect
|
rect
|
||||||
|
.attr('style', node.style)
|
||||||
.attr('rx', node.rx)
|
.attr('rx', node.rx)
|
||||||
.attr('ry', node.ry)
|
.attr('ry', node.ry)
|
||||||
.attr('x', node.x - node.width / 2 - halfPadding)
|
.attr('x', node.x - node.width / 2 - halfPadding)
|
||||||
|
@ -53,7 +54,7 @@ const rect = (parent, node) => {
|
||||||
'translate(' +
|
'translate(' +
|
||||||
(node.x - bbox.width / 2) +
|
(node.x - bbox.width / 2) +
|
||||||
', ' +
|
', ' +
|
||||||
(node.y - node.height / 2 - node.padding / 3 + 3) +
|
(node.y - node.height / 2 + node.padding / 3) +
|
||||||
')'
|
')'
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -57,11 +57,11 @@ const config = {
|
||||||
/**
|
/**
|
||||||
*| Parameter | Description |Type | Required | Values|
|
*| Parameter | Description |Type | Required | Values|
|
||||||
*| --- | --- | --- | --- | --- |
|
*| --- | --- | --- | --- | --- |
|
||||||
*|fontFamily | specifies the font to be used in the rendered diagrams| String | Required | Verdana, Arial, Trebuchet MS,|
|
*|fontFamily | specifies the font to be used in the rendered diagrams| String | Required | Trebuchet MS, Verdana, Arial, Sans-Serif |
|
||||||
*
|
*
|
||||||
***notes: Default value is \\"trebuchet ms\\".
|
***notes: Default value is \\"trebuchet ms\\".
|
||||||
*/
|
*/
|
||||||
fontFamily: '"trebuchet ms", verdana, arial;',
|
fontFamily: '"trebuchet ms", verdana, arial, sans-serif;',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*| Parameter | Description |Type | Required | Values|
|
*| Parameter | Description |Type | Required | Values|
|
||||||
|
@ -119,6 +119,21 @@ const config = {
|
||||||
*/
|
*/
|
||||||
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
|
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This option controls if the generated ids of nodes in the SVG are generated randomly or based on a seed.
|
||||||
|
* If set to false, the IDs are generated based on the current date and thus are not deterministic. This is the default behaviour.
|
||||||
|
*
|
||||||
|
*## Notes**: This matters if your files are checked into sourcecontrol e.g. git and should not change unless content is changed.
|
||||||
|
***Default value: false**
|
||||||
|
*/
|
||||||
|
deterministicIds: false,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This option is the optional seed for deterministic ids. if set to undefined but deterministicIds is true, a simple number iterator is used.
|
||||||
|
* You can set this attribute to base the seed on a static string.
|
||||||
|
*/
|
||||||
|
deterministicIDSeed: undefined,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The object containing configurations specific for flowcharts
|
* The object containing configurations specific for flowcharts
|
||||||
*/
|
*/
|
||||||
|
@ -391,12 +406,12 @@ const config = {
|
||||||
/**
|
/**
|
||||||
*| Parameter | Description |Type | Required | Values|
|
*| Parameter | Description |Type | Required | Values|
|
||||||
*| --- | --- | --- | --- | --- |
|
*| --- | --- | --- | --- | --- |
|
||||||
*| noteFontFamily| This sets the font family of actor-attached notes. | String | Required | trebuchet ms, verdana, arial |
|
*| noteFontFamily| This sets the font family of actor-attached notes. | String | Required | trebuchet ms, verdana, arial, sans-serif |
|
||||||
*
|
*
|
||||||
***Notes:**
|
***Notes:**
|
||||||
***Default value: trebuchet ms **.
|
***Default value: trebuchet ms **.
|
||||||
*/
|
*/
|
||||||
noteFontFamily: '"trebuchet ms", verdana, arial',
|
noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
|
||||||
/**
|
/**
|
||||||
* This sets the font weight of the note's description
|
* This sets the font weight of the note's description
|
||||||
* **Default value 400.
|
* **Default value 400.
|
||||||
|
@ -423,12 +438,12 @@ const config = {
|
||||||
/**
|
/**
|
||||||
*| Parameter | Description |Type | Required | Values|
|
*| Parameter | Description |Type | Required | Values|
|
||||||
*| --- | --- | --- | --- | --- |
|
*| --- | --- | --- | --- | --- |
|
||||||
*| messageFontFamily | This sets the font family of actor messages. | String| Required | trebuchet ms", verdana, aria |
|
*| messageFontFamily | This sets the font family of actor messages. | String| Required | trebuchet ms", verdana, arial, sans-serif |
|
||||||
*
|
*
|
||||||
***Notes:**
|
***Notes:**
|
||||||
***Default value: "trebuchet ms**.
|
***Default value: "trebuchet ms**.
|
||||||
*/
|
*/
|
||||||
messageFontFamily: '"trebuchet ms", verdana, arial',
|
messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
|
||||||
/**
|
/**
|
||||||
* This sets the font weight of the message's description
|
* This sets the font weight of the message's description
|
||||||
* **Default value 400.
|
* **Default value 400.
|
||||||
|
|
|
@ -32,7 +32,7 @@ export const setConf = function(cnf) {
|
||||||
const drawAttributes = (groupNode, entityTextNode, attributes) => {
|
const drawAttributes = (groupNode, entityTextNode, attributes) => {
|
||||||
const heightPadding = conf.entityPadding / 3; // Padding internal to attribute boxes
|
const heightPadding = conf.entityPadding / 3; // Padding internal to attribute boxes
|
||||||
const widthPadding = conf.entityPadding / 3; // Ditto
|
const widthPadding = conf.entityPadding / 3; // Ditto
|
||||||
const attrFontSize = conf.fontSize * 0.8;
|
const attrFontSize = conf.fontSize * 0.85;
|
||||||
const labelBBox = entityTextNode.node().getBBox();
|
const labelBBox = entityTextNode.node().getBBox();
|
||||||
const attributeNodes = []; // Intermediate storage for attribute nodes created so that we can do a second pass
|
const attributeNodes = []; // Intermediate storage for attribute nodes created so that we can do a second pass
|
||||||
let maxTypeWidth = 0;
|
let maxTypeWidth = 0;
|
||||||
|
@ -90,10 +90,15 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
|
||||||
const bBox = {
|
const bBox = {
|
||||||
width: Math.max(
|
width: Math.max(
|
||||||
conf.minEntityWidth,
|
conf.minEntityWidth,
|
||||||
Math.max(labelBBox.width + widthPadding * 2, maxTypeWidth + maxNameWidth + widthPadding * 4)
|
Math.max(
|
||||||
|
labelBBox.width + conf.entityPadding * 2,
|
||||||
|
maxTypeWidth + maxNameWidth + widthPadding * 4
|
||||||
|
)
|
||||||
),
|
),
|
||||||
height:
|
height:
|
||||||
attributes.length > 0 ? cumulativeHeight : Math.max(conf.minEntityHeight, cumulativeHeight)
|
attributes.length > 0
|
||||||
|
? cumulativeHeight
|
||||||
|
: Math.max(conf.minEntityHeight, labelBBox.height + conf.entityPadding * 2)
|
||||||
};
|
};
|
||||||
|
|
||||||
// There might be some spare width for padding out attributes if the entity name is very long
|
// There might be some spare width for padding out attributes if the entity name is very long
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
"erDiagram" return 'ER_DIAGRAM';
|
"erDiagram" return 'ER_DIAGRAM';
|
||||||
"{" { this.begin("block"); return 'BLOCK_START'; }
|
"{" { this.begin("block"); return 'BLOCK_START'; }
|
||||||
<block>\s+ /* skip whitespace in block */
|
<block>\s+ /* skip whitespace in block */
|
||||||
<block>[A-Za-z][A-Za-z0-9\-_]+ { return 'ATTRIBUTE_WORD'; }
|
<block>[A-Za-z][A-Za-z0-9\-_]* { return 'ATTRIBUTE_WORD'; }
|
||||||
<block>[\n]+ /* nothing */
|
<block>[\n]+ /* nothing */
|
||||||
<block>"}" { this.popState(); return 'BLOCK_STOP'; }
|
<block>"}" { this.popState(); return 'BLOCK_STOP'; }
|
||||||
<block>. return yytext[0];
|
<block>. return yytext[0];
|
||||||
|
|
|
@ -453,7 +453,7 @@ export const addSubGraph = function(_id, list, _title) {
|
||||||
subCount = subCount + 1;
|
subCount = subCount + 1;
|
||||||
const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };
|
const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };
|
||||||
|
|
||||||
console.log('Adding', subGraph.id, subGraph.nodes);
|
logger.info('Adding', subGraph.id, subGraph.nodes);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Deletes an id from all subgraphs
|
* Deletes an id from all subgraphs
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
const getStyles = options =>
|
const getStyles = options =>
|
||||||
`
|
`
|
||||||
.mermaid-main-font {
|
.mermaid-main-font {
|
||||||
font-family: "trebuchet ms", verdana, arial;
|
font-family: "trebuchet ms", verdana, arial, sans-serif;
|
||||||
font-family: var(--mermaid-font-family);
|
font-family: var(--mermaid-font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -44,7 +44,7 @@ const getStyles = options =>
|
||||||
text-anchor: start;
|
text-anchor: start;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
text-height: 14px;
|
text-height: 14px;
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||||
font-family: var(--mermaid-font-family);
|
font-family: var(--mermaid-font-family);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -86,7 +86,7 @@ const getStyles = options =>
|
||||||
|
|
||||||
.taskText {
|
.taskText {
|
||||||
text-anchor: middle;
|
text-anchor: middle;
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||||
font-family: var(--mermaid-font-family);
|
font-family: var(--mermaid-font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -98,7 +98,7 @@ const getStyles = options =>
|
||||||
fill: ${options.taskTextDarkColor};
|
fill: ${options.taskTextDarkColor};
|
||||||
text-anchor: start;
|
text-anchor: start;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||||
font-family: var(--mermaid-font-family);
|
font-family: var(--mermaid-font-family);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -253,7 +253,7 @@ const getStyles = options =>
|
||||||
text-anchor: middle;
|
text-anchor: middle;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
fill: ${options.textColor} ;
|
fill: ${options.textColor} ;
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||||
font-family: var(--mermaid-font-family);
|
font-family: var(--mermaid-font-family);
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -5,7 +5,7 @@ const getStyles = () =>
|
||||||
.branch-label {
|
.branch-label {
|
||||||
fill: lightgrey;
|
fill: lightgrey;
|
||||||
color: lightgrey;
|
color: lightgrey;
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||||
font-family: var(--mermaid-font-family);
|
font-family: var(--mermaid-font-family);
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -79,7 +79,7 @@
|
||||||
<FLOATING_NOTE_ID>[^\n]* {this.popState();/*console.log('Floating note ID', yytext);*/return "ID";}
|
<FLOATING_NOTE_ID>[^\n]* {this.popState();/*console.log('Floating note ID', yytext);*/return "ID";}
|
||||||
<NOTE_ID>\s*[^:\n\s\-]+ { this.popState();this.pushState('NOTE_TEXT');/*console.log('Got ID for note', yytext);*/return 'ID';}
|
<NOTE_ID>\s*[^:\n\s\-]+ { this.popState();this.pushState('NOTE_TEXT');/*console.log('Got ID for note', yytext);*/return 'ID';}
|
||||||
<NOTE_TEXT>\s*":"[^:\n;]+ { this.popState();/*console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.substr(2).trim();return 'NOTE_TEXT';}
|
<NOTE_TEXT>\s*":"[^:\n;]+ { this.popState();/*console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.substr(2).trim();return 'NOTE_TEXT';}
|
||||||
<NOTE_TEXT>\s*[^:;]+"end note" { this.popState();/*console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.slice(0,-8).trim();return 'NOTE_TEXT';}
|
<NOTE_TEXT>[\s\S]*?"end note" { this.popState();/*console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.slice(0,-8).trim();return 'NOTE_TEXT';}
|
||||||
|
|
||||||
"stateDiagram"\s+ { /*console.log('Got state diagram', yytext,'#');*/return 'SD'; }
|
"stateDiagram"\s+ { /*console.log('Got state diagram', yytext,'#');*/return 'SD'; }
|
||||||
"stateDiagram-v2"\s+ { /*console.log('Got state diagram', yytext,'#');*/return 'SD'; }
|
"stateDiagram-v2"\s+ { /*console.log('Got state diagram', yytext,'#');*/return 'SD'; }
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
const getStyles = options =>
|
const getStyles = options =>
|
||||||
`.label {
|
`.label {
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||||
font-family: var(--mermaid-font-family);
|
font-family: var(--mermaid-font-family);
|
||||||
color: ${options.textColor};
|
color: ${options.textColor};
|
||||||
}
|
}
|
||||||
|
@ -79,7 +79,7 @@ const getStyles = options =>
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
font-family: 'trebuchet ms', verdana, arial;
|
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||||
font-family: var(--mermaid-font-family);
|
font-family: var(--mermaid-font-family);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
background: ${options.tertiaryColor};
|
background: ${options.tertiaryColor};
|
||||||
|
|
|
@ -4,8 +4,8 @@
|
||||||
*/
|
*/
|
||||||
// import { decode } from 'he';
|
// import { decode } from 'he';
|
||||||
import decode from 'entity-decode/browser';
|
import decode from 'entity-decode/browser';
|
||||||
import mermaidAPI from './mermaidAPI';
|
|
||||||
import { logger } from './logger';
|
import { logger } from './logger';
|
||||||
|
import mermaidAPI from './mermaidAPI';
|
||||||
import utils from './utils';
|
import utils from './utils';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -78,6 +78,8 @@ const init = function() {
|
||||||
mermaidAPI.updateSiteConfig({ gantt: mermaid.ganttConfig });
|
mermaidAPI.updateSiteConfig({ gantt: mermaid.ganttConfig });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const nextId = utils.initIdGeneratior(conf.deterministicIds, conf.deterministicIDSeed).next;
|
||||||
|
|
||||||
let txt;
|
let txt;
|
||||||
|
|
||||||
for (let i = 0; i < nodes.length; i++) {
|
for (let i = 0; i < nodes.length; i++) {
|
||||||
|
@ -90,7 +92,7 @@ const init = function() {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
const id = `mermaid-${Date.now()}`;
|
const id = `mermaid-${nextId()}`;
|
||||||
|
|
||||||
// Fetch the graph definition including tags
|
// Fetch the graph definition including tags
|
||||||
txt = element.innerHTML;
|
txt = element.innerHTML;
|
||||||
|
|
|
@ -31,7 +31,7 @@ class Theme {
|
||||||
// this.secondaryColor = '#dfdfde';
|
// this.secondaryColor = '#dfdfde';
|
||||||
// this.tertiaryColor = '#CCCCFF';
|
// this.tertiaryColor = '#CCCCFF';
|
||||||
|
|
||||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||||
this.fontSize = '16px';
|
this.fontSize = '16px';
|
||||||
// this.updateColors();
|
// this.updateColors();
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,7 +24,7 @@ class Theme {
|
||||||
this.border1 = '#81B1DB';
|
this.border1 = '#81B1DB';
|
||||||
this.border2 = rgba(255, 255, 255, 0.25);
|
this.border2 = rgba(255, 255, 255, 0.25);
|
||||||
this.arrowheadColor = 'calculated';
|
this.arrowheadColor = 'calculated';
|
||||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||||
this.fontSize = '16px';
|
this.fontSize = '16px';
|
||||||
this.labelBackground = '#181818';
|
this.labelBackground = '#181818';
|
||||||
this.textColor = '#ccc';
|
this.textColor = '#ccc';
|
||||||
|
|
|
@ -28,7 +28,7 @@ class Theme {
|
||||||
this.border1 = '#9370DB';
|
this.border1 = '#9370DB';
|
||||||
this.border2 = '#aaaa33';
|
this.border2 = '#aaaa33';
|
||||||
this.arrowheadColor = '#333333';
|
this.arrowheadColor = '#333333';
|
||||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||||
this.fontSize = '16px';
|
this.fontSize = '16px';
|
||||||
this.labelBackground = '#e8e8e8';
|
this.labelBackground = '#e8e8e8';
|
||||||
this.textColor = '#333';
|
this.textColor = '#333';
|
||||||
|
|
|
@ -13,7 +13,7 @@ class Theme {
|
||||||
this.border1 = '#13540c';
|
this.border1 = '#13540c';
|
||||||
this.border2 = '#6eaa49';
|
this.border2 = '#6eaa49';
|
||||||
this.arrowheadColor = 'green';
|
this.arrowheadColor = 'green';
|
||||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||||
this.fontSize = '16px';
|
this.fontSize = '16px';
|
||||||
|
|
||||||
this.tertiaryColor = lighten('#cde498', 10);
|
this.tertiaryColor = lighten('#cde498', 10);
|
||||||
|
|
|
@ -35,7 +35,7 @@ class Theme {
|
||||||
this.critical = '#d42';
|
this.critical = '#d42';
|
||||||
this.done = '#bbb';
|
this.done = '#bbb';
|
||||||
this.arrowheadColor = '#333333';
|
this.arrowheadColor = '#333333';
|
||||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||||
this.fontSize = '16px';
|
this.fontSize = '16px';
|
||||||
|
|
||||||
/* Flowchart variables */
|
/* Flowchart variables */
|
||||||
|
|
20
src/utils.js
|
@ -1,3 +1,4 @@
|
||||||
|
import { sanitizeUrl } from '@braintree/sanitize-url';
|
||||||
import {
|
import {
|
||||||
curveBasis,
|
curveBasis,
|
||||||
curveBasisClosed,
|
curveBasisClosed,
|
||||||
|
@ -12,9 +13,8 @@ import {
|
||||||
curveStepBefore,
|
curveStepBefore,
|
||||||
select
|
select
|
||||||
} from 'd3';
|
} from 'd3';
|
||||||
import { logger } from './logger';
|
|
||||||
import { sanitizeUrl } from '@braintree/sanitize-url';
|
|
||||||
import common from './diagrams/common/common';
|
import common from './diagrams/common/common';
|
||||||
|
import { logger } from './logger';
|
||||||
// import cryptoRandomString from 'crypto-random-string';
|
// import cryptoRandomString from 'crypto-random-string';
|
||||||
|
|
||||||
// Effectively an enum of the supported curve types, accessible by name
|
// Effectively an enum of the supported curve types, accessible by name
|
||||||
|
@ -790,6 +790,19 @@ export const configureSvgSize = function(svgElem, height, width, useMaxWidth) {
|
||||||
d3Attrs(svgElem, attrs);
|
d3Attrs(svgElem, attrs);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const initIdGeneratior = function(deterministic, seed) {
|
||||||
|
if (!deterministic) return { next: () => Date.now() };
|
||||||
|
class iterator {
|
||||||
|
constructor() {
|
||||||
|
return (this.count = seed ? seed.length : 0);
|
||||||
|
}
|
||||||
|
next() {
|
||||||
|
return this.count++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return new iterator();
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
assignWithDepth,
|
assignWithDepth,
|
||||||
wrapLabel,
|
wrapLabel,
|
||||||
|
@ -811,5 +824,6 @@ export default {
|
||||||
generateId,
|
generateId,
|
||||||
random,
|
random,
|
||||||
memoize,
|
memoize,
|
||||||
runFunc
|
runFunc,
|
||||||
|
initIdGeneratior
|
||||||
};
|
};
|
||||||
|
|
|
@ -253,3 +253,34 @@ describe('when calculating SVG size', function() {
|
||||||
expect(attrs.get('width')).toEqual(200);
|
expect(attrs.get('width')).toEqual(200);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('when initializing the id generator', function () {
|
||||||
|
it('should return a random number generator based on Date', function (done) {
|
||||||
|
const idGenerator = utils.initIdGeneratior(false)
|
||||||
|
expect(typeof idGenerator.next).toEqual('function')
|
||||||
|
const lastId = idGenerator.next()
|
||||||
|
setTimeout(() => {
|
||||||
|
expect(idGenerator.next() > lastId).toBe(true)
|
||||||
|
done()
|
||||||
|
}, 5)
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return a non random number generator', function () {
|
||||||
|
const idGenerator = utils.initIdGeneratior(true)
|
||||||
|
expect(typeof idGenerator.next).toEqual('function')
|
||||||
|
const start = 0
|
||||||
|
const lastId = idGenerator.next()
|
||||||
|
expect(start).toEqual(lastId)
|
||||||
|
expect(idGenerator.next()).toEqual(lastId +1)
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return a non random number generator based on seed', function () {
|
||||||
|
const idGenerator = utils.initIdGeneratior(true, 'thisIsASeed')
|
||||||
|
expect(typeof idGenerator.next).toEqual('function')
|
||||||
|
const start = 11
|
||||||
|
const lastId = idGenerator.next()
|
||||||
|
expect(start).toEqual(lastId)
|
||||||
|
expect(idGenerator.next()).toEqual(lastId +1)
|
||||||
|
});
|
||||||
|
|
||||||
|
})
|
||||||
|
|
|
@ -5449,9 +5449,9 @@ he@^1.1.0, he@^1.1.1, he@^1.2.0:
|
||||||
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
|
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
|
||||||
|
|
||||||
highlight.js@^9.15.5:
|
highlight.js@^9.15.5:
|
||||||
version "9.18.1"
|
version "9.18.5"
|
||||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c"
|
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
|
||||||
integrity sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==
|
integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
|
||||||
|
|
||||||
hmac-drbg@^1.0.0:
|
hmac-drbg@^1.0.0:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
|
|