mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge branch 'release/8.8.4'
This commit is contained in:
Knut Sveidqvist
commit
f8a45e4963
3
.gitignore
vendored
3
.gitignore
vendored
@ -4,6 +4,9 @@ node_modules/
|
||||
coverage/
|
||||
.idea/
|
||||
|
||||
dist/*.js
|
||||
dist/*.map
|
||||
|
||||
yarn-error.log
|
||||
.npmrc
|
||||
token
|
||||
|
||||
2
LICENSE
2
LICENSE
@ -1,6 +1,6 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 - 2018 Knut Sveidqvist
|
||||
Copyright (c) 2014 - 2020 Knut Sveidqvist
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
# mermaid [](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://percy.io/Mermaid/mermaid)
|
||||
|
||||
|
||||
**Edit this Page** [](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"!!!**
|
||||
|
||||
|
||||
@ -157,5 +157,33 @@ describe('Entity Relationship Diagram', () => {
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render entities with and without attributes', () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
BOOK { string title }
|
||||
AUTHOR }|..|{ BOOK : writes
|
||||
BOOK { float price }
|
||||
`,
|
||||
{ logLevel : 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
it('should render entities and attributes with big and small entity names', () => {
|
||||
renderGraph(
|
||||
`
|
||||
erDiagram
|
||||
PRIVATE_FINANCIAL_INSTITUTION {
|
||||
string name
|
||||
int turnover
|
||||
}
|
||||
PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
|
||||
EMPLOYEE { bool officer_of_firm }
|
||||
`,
|
||||
{ logLevel : 1 }
|
||||
);
|
||||
cy.get('svg');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@ -371,6 +371,38 @@ flowchart TD
|
||||
{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
|
||||
G-->D
|
||||
|
||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0
|
||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||
`,
|
||||
{ fontFamily: 'courier' }
|
||||
);
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
907
dist/flowchart.html
vendored
Normal file
907
dist/flowchart.html
vendored
Normal file
@ -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>
|
||||
4
dist/index.html
vendored
4
dist/index.html
vendored
@ -293,8 +293,8 @@ graph TB
|
||||
B-->G
|
||||
G-->D
|
||||
|
||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0
|
||||
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
|
||||
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
|
||||
</div>
|
||||
<div class="mermaid">
|
||||
graph LR
|
||||
|
||||
430
dist/mermaid.core.js
vendored
430
dist/mermaid.core.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mermaid.core.js.map
vendored
2
dist/mermaid.core.js.map
vendored
File diff suppressed because one or more lines are too long
428
dist/mermaid.js
vendored
428
dist/mermaid.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mermaid.js.map
vendored
2
dist/mermaid.js.map
vendored
File diff suppressed because one or more lines are too long
10
dist/mermaid.min.js
vendored
10
dist/mermaid.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mermaid.min.js.map
vendored
2
dist/mermaid.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@
|
||||
# Version 8.6.0 Changes
|
||||
**Edit this Page** [](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)
|
||||
|
||||
## [CDN](https://unpkg.com/mermaid/)
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
# Change Log
|
||||
|
||||
**Edit this Page** [](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.
|
||||
|
||||
## Unreleased
|
||||
|
||||
@ -8,7 +8,6 @@ Many editors, wikis and other tools have mermaid integrations already making it
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/README.md)
|
||||
|
||||
|
||||
[](https://travis-ci.org/mermaid-js/mermaid) [](https://www.npmjs.com/package/mermaid) [](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [](https://percy.io/Mermaid/mermaid)
|
||||
|
||||
<!-- <Main description> -->
|
||||
@ -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)
|
||||
|
||||
# Sibling projects
|
||||
|
||||
- [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
|
||||
- [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
|
||||
- [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
|
||||
|
||||
@ -2,10 +2,12 @@
|
||||
|
||||
## mermaidAPI
|
||||
|
||||
This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
|
||||
Edit this Page[![N|Solid][2]][1]
|
||||
|
||||
The core of this api is the [**render**][1] function which, given a graph
|
||||
definition, renders a graph/diagram and returns it as an svg element.
|
||||
This is the API to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
|
||||
|
||||
The core of this api is the [**render**][3] function which, given a graph
|
||||
definition as text, renders the graph/diagram and returns an svg element for the graph.
|
||||
|
||||
It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.
|
||||
|
||||
@ -111,15 +113,9 @@ Note: modifies options in-place
|
||||
|
||||
- `conf` the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
|
||||
|
||||
## mermaid.API Functions
|
||||
## render
|
||||
|
||||
- `mermaidAPI.initialize` is a call to the mermaid API, that targets `config` and changes the before the diagram is rendered.
|
||||
|
||||
**Notes**: `Config` is a variable that contains various configurable elements that can alter how the rendered SVG Diagram/Chart will look like.
|
||||
|
||||
- `mermaidAPI.render` is function that renders a graph/diagram in svg format, from a chart definition inside `<div>` tags.
|
||||
|
||||
Usage example below.
|
||||
Function that renders an svg with a graph from a chart definition. Usage example below.
|
||||
|
||||
```js
|
||||
mermaidAPI.initialize({
|
||||
@ -133,6 +129,7 @@ mermaidAPI.initialize({
|
||||
mermaidAPI.render('id1',graphDefinition,cb);
|
||||
});
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
- `id` the id of the element to be rendered
|
||||
@ -142,8 +139,9 @@ mermaidAPI.initialize({
|
||||
provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
|
||||
completed.
|
||||
|
||||
##
|
||||
|
||||
## mermaidAPI config Default Values:
|
||||
## mermaidAPI configuration defaults
|
||||
|
||||
```html
|
||||
<script>
|
||||
@ -204,4 +202,8 @@ mermaidAPI.initialize({
|
||||
</script>
|
||||
```
|
||||
|
||||
[1]: Setup.md?id=render
|
||||
[1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js
|
||||
|
||||
[2]: img/GitHub-Mark-32px.png
|
||||
|
||||
[3]: Setup.md?id=render
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
# Tutorials
|
||||
|
||||
**Edit this Page** [](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.
|
||||
|
||||
|
||||
## Live-Editor Tutorials
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
# Breaking changes
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/breakingChanges.md)
|
||||
|
||||
### Breaking changes from history version to latest version:
|
||||
|
||||
## #1
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
# Class diagrams
|
||||
|
||||
**Edit this Page** [](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."
|
||||
> Wikipedia
|
||||
|
||||
@ -338,7 +336,6 @@ Multiplicity notations are placed near the ends of an association.
|
||||
|
||||
The different cardinality options are :
|
||||
|
||||
- `0..1` Zero or one
|
||||
- `1` Only 1
|
||||
- `0..1` Zero or One
|
||||
- `1..*` One or more
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
# Development 🙌
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md)
|
||||
|
||||
|
||||
So you want to help? That's great!
|
||||
|
||||
|
||||
@ -10,18 +7,18 @@ So you want to help? That's great!
|
||||
Here are a few things to know to get you started on the right path.
|
||||
|
||||
**All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md)**
|
||||
|
||||
|
||||
**Note: You will have to edit the document to see its contents. Commits and PR's should be directed to the develop branch.**
|
||||
|
||||
## Branching
|
||||
|
||||
Going forward we will use a **Git Flow** inspired approach to branching. So development is done in the `develop` branch.
|
||||
Going forward we will use a **Git Flow** inspired approach to branching. So development is done in the `develop` branch.
|
||||
|
||||
Once development is done we branch a release branch from develop for testing.
|
||||
|
||||
Once the release happens we merge the release branch to master and kill the release branch.
|
||||
|
||||
This means... **you should branch off your pull request from develop** and direct all Pull Requests to it.
|
||||
This means... **you should branch off your pull request from develop** and direct all Pull Requests to it.
|
||||
|
||||
## Contributing Code
|
||||
|
||||
@ -31,7 +28,7 @@ We make all changes via pull requests. As we have many pull requests from develo
|
||||
* Smaller low-risk changes like dependecies, documentation etc can be merged by active collaborators
|
||||
* documentation (updates to the docs folder are enocouraged and also allowed via direct commits)
|
||||
|
||||
When you commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and text that describes the issue.
|
||||
When you commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and text that describes the issue.
|
||||
|
||||
|
||||
**One example:**
|
||||
@ -46,17 +43,17 @@ When you commit code, create a branch, let it start with the type like feature o
|
||||
## Contributing to documentation
|
||||
If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
|
||||
|
||||
The docs are located in the `docs` folder and are written in MarkDown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation:
|
||||
The docs are located in the `docs` folder and are written in MarkDown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation:
|
||||
|
||||
**All the documents displayed in the github.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/docs/_sidebar.md). Click edit it to see them.**
|
||||
|
||||
The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from **Master** Branch.
|
||||
The contents of [https://mermaid-js.github.io/mermaid/](https://mermaid-js.github.io/mermaid/) are based on the docs from **Master** Branch.
|
||||
|
||||
## How to Contribute to Docs
|
||||
|
||||
We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
|
||||
|
||||
The documentation is located in the `docs` directory and organized according to relevant subfolder.
|
||||
The documentation is located in the `docs` directory and organized according to relevant subfolder.
|
||||
|
||||
We encourage contributions to the documentation at [mermaid-js/mermaid/docs](https://github.com/mermaid-js/mermaid/tree/develop/docs). We publish documentation using GitHub Pages with [jekyll-rtd-theme](https://github.com/rundocs/jekyll-rtd-theme).
|
||||
|
||||
|
||||
@ -25,9 +25,49 @@ Entity names are often capitalised, although there is no accepted standard on th
|
||||
|
||||
Relationships between entities are represented by lines with end markers representing cardinality. Mermaid uses the most popular crow's foot notation. The crow's foot intuitively conveys the possibility of many instances of the entity that it connects to.
|
||||
|
||||
## Status
|
||||
ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables. It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities. These do not necessarily need to be exhaustive; often a small subset of attributes is enough. Mermaid allows to be defined in terms of their *type* and *name*.
|
||||
|
||||
ER diagrams are a relatively new feature in Mermaid, so there are likely to be a few bugs and constraints, and enhancements will be made in due course. Currently you can only define entities and relationships, but not attributes. Inclusion of attributes is now actively being worked on.
|
||||
```markdown
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
LINE-ITEM {
|
||||
string productCode
|
||||
int quantity
|
||||
float pricePerUnit
|
||||
}
|
||||
```
|
||||
|
||||
```mermaid
|
||||
erDiagram
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER {
|
||||
string name
|
||||
string custNumber
|
||||
string sector
|
||||
}
|
||||
ORDER ||--|{ LINE-ITEM : contains
|
||||
ORDER {
|
||||
int orderNumber
|
||||
string deliveryAddress
|
||||
}
|
||||
LINE-ITEM {
|
||||
string productCode
|
||||
int quantity
|
||||
float pricePerUnit
|
||||
}
|
||||
```
|
||||
|
||||
When including attributes on ER diagrams, you must decide whether to include foreign keys as attributes. This probably depends on how closely you are trying to represent relational table structures. If your diagram is a *logical* model which is not meant to imply a relational implementation, then it is better to leave these out because the associative relationships already convey the way that entities are associated. For example, a JSON data structure can implement a one-to-many relationship without the need for foreign key properties, using arrays. Similarly an object-oriented programming language may use pointers or references to collections. Even for models that are intended for relational implementation, you might decide that inclusion of foreign key attributes duplicates information already portrayed by the relationships, and does not add meaning to entities. Ultimately, it's your choice.
|
||||
|
||||
## Syntax
|
||||
|
||||
@ -68,10 +108,10 @@ Cardinality is a property that describes how many elements of another entity can
|
||||
|
||||
| Value (left) | Value (right) | Meaning |
|
||||
|:------------:|:-------------:|--------------------------------------------------------|
|
||||
| `|o` | `o|` | Zero or one |
|
||||
| `||` | `||` | Exactly one |
|
||||
| `\|o` | `o\|` | Zero or one |
|
||||
| `\|\|` | `\|\|` | Exactly one |
|
||||
| `}o` | `o{` | Zero or more (no upper limit) |
|
||||
| `}|` | `|{` | One or more (no upper limit) |
|
||||
| `}\|` | `\|{` | One or more (no upper limit) |
|
||||
|
||||
### Identification
|
||||
|
||||
@ -82,6 +122,43 @@ Relationships may be classified as either *identifying* or *non-identifying* and
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
```
|
||||
|
||||
### Attributes
|
||||
|
||||
Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`. For example:
|
||||
|
||||
```markdown
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
```
|
||||
The attributes are rendered inside the entity boxes:
|
||||
|
||||
```mermaid
|
||||
CAR ||--o{ NAMED-DRIVER : allows
|
||||
CAR {
|
||||
string registrationNumber
|
||||
string make
|
||||
string model
|
||||
}
|
||||
PERSON ||--o{ NAMED-DRIVER : is
|
||||
PERSON {
|
||||
string firstName
|
||||
string lastName
|
||||
int age
|
||||
}
|
||||
```
|
||||
|
||||
The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens or underscores. Other than that, there are no restrictions, and there is no implicit set of valid data types.
|
||||
|
||||
### Other Things
|
||||
|
||||
- If you want the relationship label to be more than one word, you must use double quotes around the phrase
|
||||
@ -93,10 +170,10 @@ Relationships may be classified as either *identifying* or *non-identifying* and
|
||||
|
||||
For simple color customization:
|
||||
|
||||
| Name | Used as |
|
||||
| :------- | :------------------------------------------------------ |
|
||||
| `fill` | Background color of an entity |
|
||||
| `stroke` | Border color of an entity, line color of a relationship |
|
||||
| Name | Used as |
|
||||
| :------- | :------------------------------------------------------------------- |
|
||||
| `fill` | Background color of an entity or attribute |
|
||||
| `stroke` | Border color of an entity or attribute, line color of a relationship |
|
||||
|
||||
### Classes used
|
||||
|
||||
@ -104,6 +181,8 @@ The following CSS class selectors are available for richer styling:
|
||||
|
||||
| Selector | Description |
|
||||
| :------------------------- | :---------------------------------------------------- |
|
||||
| `.er.attributeBoxEven` | The box containing attributes on even-numbered rows |
|
||||
| `.er.attributeBoxOdd` | The box containing attributes on odd-numbered rows |
|
||||
| `.er.entityBox` | The box representing an entity |
|
||||
| `.er.entityLabel` | The label for an entity |
|
||||
| `.er.relationshipLabel` | The label for a relationship |
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
# Examples
|
||||
|
||||
**Edit this Page** [](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.
|
||||
|
||||
**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
|
||||
|
||||
**Edit this Page** [](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 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,7 +1,6 @@
|
||||
# Flowcharts - Basic Syntax
|
||||
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/flowchart.md)
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/flowchart.md)
|
||||
|
||||
## Graph
|
||||
|
||||
@ -361,7 +360,7 @@ graph TB
|
||||
```
|
||||
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
|
||||
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.
|
||||
```
|
||||
graph TB
|
||||
|
||||
@ -1,18 +1,16 @@
|
||||
# Gantt diagrams
|
||||
|
||||
**Edit this Page** [](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 note to users
|
||||
Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.
|
||||
Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.
|
||||
|
||||
|
||||
It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accomodate those changes by extending an equal number of day, towards the right, not by creating a gap inside the task.
|
||||
As shown here 
|
||||
|
||||
|
||||
However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.
|
||||
However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.
|
||||
As shown here 
|
||||
|
||||
A Gantt chart is useful for tracking the amount of time it would take before a project is finished, but it can also be used to graphically represent "non-working days", with a few tweaks.
|
||||
@ -148,26 +146,26 @@ dateFormat YYYY-MM-DD
|
||||
The following formating options are supported:
|
||||
|
||||
```
|
||||
Input Example Description:
|
||||
YYYY 2014 4 digit year
|
||||
YY 14 2 digit year
|
||||
Q 1..4 Quarter of year. Sets month to first month in quarter.
|
||||
M MM 1..12 Month number
|
||||
MMM MMMM January..Dec Month name in locale set by moment.locale()
|
||||
D DD 1..31 Day of month
|
||||
Do 1st..31st Day of month with ordinal
|
||||
DDD DDDD 1..365 Day of year
|
||||
X 1410715640.579 Unix timestamp
|
||||
x 1410715640579 Unix ms timestamp
|
||||
H HH 0..23 24 hour time
|
||||
h hh 1..12 12 hour time used with a A.
|
||||
a A am pm Post or ante meridiem
|
||||
m mm 0..59 Minutes
|
||||
s ss 0..59 Seconds
|
||||
S 0..9 Tenths of a second
|
||||
SS 0..99 Hundreds of a second
|
||||
SSS 0..999 Thousandths of a second
|
||||
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z
|
||||
Input Example Description:
|
||||
YYYY 2014 4 digit year
|
||||
YY 14 2 digit year
|
||||
Q 1..4 Quarter of year. Sets month to first month in quarter.
|
||||
M MM 1..12 Month number
|
||||
MMM MMMM January..Dec Month name in locale set by moment.locale()
|
||||
D DD 1..31 Day of month
|
||||
Do 1st..31st Day of month with ordinal
|
||||
DDD DDDD 1..365 Day of year
|
||||
X 1410715640.579 Unix timestamp
|
||||
x 1410715640579 Unix ms timestamp
|
||||
H HH 0..23 24 hour time
|
||||
h hh 1..12 12 hour time used with a A.
|
||||
a A am pm Post or ante meridiem
|
||||
m mm 0..59 Minutes
|
||||
s ss 0..59 Seconds
|
||||
S 0..9 Tenths of a second
|
||||
SS 0..99 Hundreds of a second
|
||||
SSS 0..999 Thousandths of a second
|
||||
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z
|
||||
```
|
||||
|
||||
More info in: http://momentjs.com/docs/#/parsing/string-format/
|
||||
@ -213,7 +211,7 @@ More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
|
||||
|
||||
## Comments
|
||||
|
||||
Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
|
||||
Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
|
||||
|
||||
```
|
||||
gantt
|
||||
@ -231,7 +229,7 @@ gantt
|
||||
|
||||
## Styling
|
||||
|
||||
Styling of the a gantt diagram is done by defining a number of css classes. During rendering these classes are extracted from the
|
||||
Styling of the a gantt diagram is done by defining a number of css classes. During rendering, these classes are extracted from the file located at src/themes/sequence.scss
|
||||
|
||||
### Classes used
|
||||
|
||||
@ -316,7 +314,7 @@ todayMarker off
|
||||
|
||||
## Configuration
|
||||
|
||||
Is it possible to adjust the margins for rendering the gantt diagram.
|
||||
It is possible to adjust the margins for rendering the gantt diagram.
|
||||
|
||||
This is done by defining the `ganttConfig` part of the configuration object.
|
||||
How to use the CLI is described in the [mermaidCLI](mermaidCLI.html) page.
|
||||
@ -333,7 +331,7 @@ mermaid.ganttConfig = {
|
||||
}
|
||||
```
|
||||
|
||||
### Possible configration params:
|
||||
### Possible configuration params:
|
||||
|
||||
Param | Descriotion | Default value
|
||||
--- | --- | ---
|
||||
@ -342,7 +340,7 @@ bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with c
|
||||
|
||||
## Interaction
|
||||
|
||||
It is possible to bind a click event to a task, the click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
|
||||
It is possible to bind a click event to a task. The click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
|
||||
|
||||
```
|
||||
click taskId call callback(arguments)
|
||||
@ -350,7 +348,7 @@ click taskId href URL
|
||||
```
|
||||
|
||||
* taskId is the id of the task
|
||||
* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified..
|
||||
* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
|
||||
|
||||
Beginners tip, a full example using interactive links in an html context:
|
||||
```html
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
@ -7,7 +7,7 @@
|
||||
<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">
|
||||
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
|
||||
<link rel="stylesheet" href="theme.css"> <script src="//cdn.jsdelivr.net/npm/mermaid@8.8.3/dist/mermaid.min.js"></script>
|
||||
<link rel="stylesheet" href="theme.css"> <script src="//cdn.jsdelivr.net/npm/mermaid@8.8.4/dist/mermaid.min.js"></script>
|
||||
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
@ -34,7 +34,7 @@
|
||||
window.$docsify = {
|
||||
search: 'auto',
|
||||
name: 'mermaid',
|
||||
repo: 'https://github.com/knsv/mermaid',
|
||||
repo: 'https://github.com/mermaid-js/mermaid',
|
||||
loadSidebar: true,
|
||||
mergeNavbar: true,
|
||||
maxLevel: 4,
|
||||
@ -50,7 +50,16 @@
|
||||
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;
|
||||
@ -69,9 +78,9 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/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/docsify.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!-- -->
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
# Integrations
|
||||
|
||||
**Edit this Page** [](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
|
||||
|
||||
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)
|
||||
- [Type Doc](https://typedoc.org/)
|
||||
- [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
|
||||
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
# A basic mermaid User-Guide for Beginners
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/n00b-gettingStarted.md)
|
||||
|
||||
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.
|
||||
|
||||
@ -168,7 +166,7 @@ This method is similar to 3, if only a little more involved. The difference may
|
||||
8. Add the graph and diagram definitions as you would in number 3.
|
||||
a. be mindful of the `div` tags.
|
||||
|
||||
9. Save, load/edit your HTML file to your liking.
|
||||
9. Save, load/edit your HTML file to your liking.
|
||||
|
||||
|
||||
**Note** placing the HTML file on the same folder the `mermaid` file you've downloaded is a good practice and allows you to shorten the address on the `src` section.
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
# Overview for Beginners
|
||||
|
||||
|
||||
**Edit this Page** [](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.
|
||||
|
||||
@ -18,7 +15,7 @@ In an environment of constantly changing information , diagrams/charts are both
|
||||
|
||||
Doc-Rot is quite quick on diagrams makes, after a change is made, it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts and the people who make them.
|
||||
|
||||
mermaid seeks to change that. mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than most traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams.
|
||||
mermaid seeks to change that. mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than most traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams.
|
||||
|
||||
# Definition of Terms/ Dictionary
|
||||
|
||||
|
||||
@ -1,16 +1,13 @@
|
||||
## Diagram syntax
|
||||
|
||||
|
||||
**Edit this Page** [](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.
|
||||
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.
|
||||
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.
|
||||
|
||||
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
|
||||
These Diagram Definitions can be entered within a \<div class=mermaid> tag.
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
# Adding a New Diagram/Chart 📊
|
||||
|
||||
|
||||
**Edit this Page** [](https://github.com/mermaid-js/mermaid/blob/develop/docs/newDiagram.md)
|
||||
|
||||
### Step 1: Grammar & Parsing
|
||||
|
||||
|
||||
|
||||
12
docs/pie.md
12
docs/pie.md
@ -1,7 +1,5 @@
|
||||
# Pie chart diagrams
|
||||
|
||||
**Edit this Page** [](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
|
||||
-Wikipedia
|
||||
|
||||
@ -31,11 +29,11 @@ Drawing a pie chart is really simple in mermaid.
|
||||
- Followed by `positive numeric value` (supported upto two decimal places)
|
||||
|
||||
[pie]
|
||||
[title] [titlevalue] (OPTIONAL)
|
||||
"[datakey1]" : [dataValue1]
|
||||
"[datakey2]" : [dataValue2]
|
||||
"[datakey3]" : [dataValue3]
|
||||
.
|
||||
[title] [titlevalue] (OPTIONAL)
|
||||
"[datakey1]" : [dataValue1]
|
||||
"[datakey2]" : [dataValue2]
|
||||
"[datakey3]" : [dataValue3]
|
||||
.
|
||||
.
|
||||
|
||||
## Example
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
# State diagrams
|
||||
|
||||
**Edit this Page** [](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
|
||||
|
||||
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,8 +1,5 @@
|
||||
# User Journey Diagram
|
||||
|
||||
|
||||
**Edit this Page** [](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)
|
||||
|
||||
Mermaid can render user journey diagrams:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mermaid",
|
||||
"version": "8.8.3",
|
||||
"version": "8.8.4",
|
||||
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
|
||||
"main": "dist/mermaid.core.js",
|
||||
"keywords": [
|
||||
@ -49,7 +49,6 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@braintree/sanitize-url": "^3.1.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"d3": "^5.7.0",
|
||||
"dagre": "^0.8.4",
|
||||
"dagre-d3": "^0.6.4",
|
||||
@ -67,6 +66,7 @@
|
||||
"@babel/register": "^7.0.0",
|
||||
"@percy/cypress": "*",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-jest": "^24.9.0",
|
||||
"babel-loader": "^8.0.4",
|
||||
"coveralls": "^3.0.2",
|
||||
|
||||
@ -40,6 +40,7 @@ const rect = (parent, node) => {
|
||||
log.trace('Data ', node, JSON.stringify(node));
|
||||
// center the rect around its coordinate
|
||||
rect
|
||||
.attr('style', node.style)
|
||||
.attr('rx', node.rx)
|
||||
.attr('ry', node.ry)
|
||||
.attr('x', node.x - node.width / 2 - halfPadding)
|
||||
@ -53,7 +54,7 @@ const rect = (parent, node) => {
|
||||
'translate(' +
|
||||
(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|
|
||||
*| --- | --- | --- | --- | --- |
|
||||
*|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\\".
|
||||
*/
|
||||
fontFamily: '"trebuchet ms", verdana, arial;',
|
||||
fontFamily: '"trebuchet ms", verdana, arial, sans-serif;',
|
||||
|
||||
/**
|
||||
*| Parameter | Description |Type | Required | Values|
|
||||
@ -119,6 +119,21 @@ const config = {
|
||||
*/
|
||||
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
|
||||
*/
|
||||
@ -391,12 +406,12 @@ const config = {
|
||||
/**
|
||||
*| 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:**
|
||||
***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
|
||||
* **Default value 400.
|
||||
@ -423,12 +438,12 @@ const config = {
|
||||
/**
|
||||
*| 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:**
|
||||
***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
|
||||
* **Default value 400.
|
||||
|
||||
@ -27,13 +27,26 @@ export const parseDirective = function(statement, context, type) {
|
||||
|
||||
const addEntity = function(name) {
|
||||
if (typeof entities[name] === 'undefined') {
|
||||
entities[name] = name;
|
||||
logger.debug('Added new entity :', name);
|
||||
entities[name] = { attributes: [] };
|
||||
logger.info('Added new entity :', name);
|
||||
}
|
||||
|
||||
return entities[name];
|
||||
};
|
||||
|
||||
const getEntities = () => entities;
|
||||
|
||||
const addAttributes = function(entityName, attribs) {
|
||||
let entity = addEntity(entityName); // May do nothing (if entity has already been added)
|
||||
|
||||
// Process attribs in reverse order due to effect of recursive construction (last attribute is first)
|
||||
let i;
|
||||
for (i = attribs.length - 1; i >= 0; i--) {
|
||||
entity.attributes.push(attribs[i]);
|
||||
logger.debug('Added attribute ', attribs[i].attributeName);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Add a relationship
|
||||
* @param entA The first entity in the relationship
|
||||
@ -76,6 +89,7 @@ export default {
|
||||
parseDirective,
|
||||
getConfig: () => configApi.getConfig().er,
|
||||
addEntity,
|
||||
addAttributes,
|
||||
getEntities,
|
||||
addRelationship,
|
||||
getRelationships,
|
||||
|
||||
@ -22,6 +22,159 @@ export const setConf = function(cnf) {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Draw attributes for an entity
|
||||
* @param groupNode the svg group node for the entity
|
||||
* @param entityTextNode the svg node for the entity label text
|
||||
* @param attributes an array of attributes defined for the entity (each attribute has a type and a name)
|
||||
* @return the bounding box of the entity, after attributes have been added
|
||||
*/
|
||||
const drawAttributes = (groupNode, entityTextNode, attributes) => {
|
||||
const heightPadding = conf.entityPadding / 3; // Padding internal to attribute boxes
|
||||
const widthPadding = conf.entityPadding / 3; // Ditto
|
||||
const attrFontSize = conf.fontSize * 0.85;
|
||||
const labelBBox = entityTextNode.node().getBBox();
|
||||
const attributeNodes = []; // Intermediate storage for attribute nodes created so that we can do a second pass
|
||||
let maxTypeWidth = 0;
|
||||
let maxNameWidth = 0;
|
||||
let cumulativeHeight = labelBBox.height + heightPadding * 2;
|
||||
let attrNum = 1;
|
||||
|
||||
attributes.forEach(item => {
|
||||
const attrPrefix = `${entityTextNode.node().id}-attr-${attrNum}`;
|
||||
|
||||
// Add a text node for the attribute type
|
||||
const typeNode = groupNode
|
||||
.append('text')
|
||||
.attr('class', 'er entityLabel')
|
||||
.attr('id', `${attrPrefix}-type`)
|
||||
.attr('x', 0)
|
||||
.attr('y', 0)
|
||||
.attr('dominant-baseline', 'middle')
|
||||
.attr('text-anchor', 'left')
|
||||
.attr(
|
||||
'style',
|
||||
'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px'
|
||||
)
|
||||
.text(item.attributeType);
|
||||
|
||||
// Add a text node for the attribute name
|
||||
const nameNode = groupNode
|
||||
.append('text')
|
||||
.attr('class', 'er entityLabel')
|
||||
.attr('id', `${attrPrefix}-name`)
|
||||
.attr('x', 0)
|
||||
.attr('y', 0)
|
||||
.attr('dominant-baseline', 'middle')
|
||||
.attr('text-anchor', 'left')
|
||||
.attr(
|
||||
'style',
|
||||
'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px'
|
||||
)
|
||||
.text(item.attributeName);
|
||||
|
||||
// Keep a reference to the nodes so that we can iterate through them later
|
||||
attributeNodes.push({ tn: typeNode, nn: nameNode });
|
||||
|
||||
const typeBBox = typeNode.node().getBBox();
|
||||
const nameBBox = nameNode.node().getBBox();
|
||||
|
||||
maxTypeWidth = Math.max(maxTypeWidth, typeBBox.width);
|
||||
maxNameWidth = Math.max(maxNameWidth, nameBBox.width);
|
||||
|
||||
cumulativeHeight += Math.max(typeBBox.height, nameBBox.height) + heightPadding * 2;
|
||||
attrNum += 1;
|
||||
});
|
||||
|
||||
// Calculate the new bounding box of the overall entity, now that attributes have been added
|
||||
const bBox = {
|
||||
width: Math.max(
|
||||
conf.minEntityWidth,
|
||||
Math.max(
|
||||
labelBBox.width + conf.entityPadding * 2,
|
||||
maxTypeWidth + maxNameWidth + widthPadding * 4
|
||||
)
|
||||
),
|
||||
height:
|
||||
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
|
||||
const spareWidth = Math.max(0, bBox.width - (maxTypeWidth + maxNameWidth) - widthPadding * 4);
|
||||
|
||||
if (attributes.length > 0) {
|
||||
// Position the entity label near the top of the entity bounding box
|
||||
entityTextNode.attr(
|
||||
'transform',
|
||||
'translate(' + bBox.width / 2 + ',' + (heightPadding + labelBBox.height / 2) + ')'
|
||||
);
|
||||
|
||||
// Add rectangular boxes for the attribute types/names
|
||||
let heightOffset = labelBBox.height + heightPadding * 2; // Start at the bottom of the entity label
|
||||
let attribStyle = 'attributeBoxOdd'; // We will flip the style on alternate rows to achieve a banded effect
|
||||
|
||||
attributeNodes.forEach(nodePair => {
|
||||
// Calculate the alignment y co-ordinate for the type/name of the attribute
|
||||
const alignY =
|
||||
heightOffset +
|
||||
heightPadding +
|
||||
Math.max(nodePair.tn.node().getBBox().height, nodePair.nn.node().getBBox().height) / 2;
|
||||
|
||||
// Position the type of the attribute
|
||||
nodePair.tn.attr('transform', 'translate(' + widthPadding + ',' + alignY + ')');
|
||||
|
||||
// Insert a rectangle for the type
|
||||
const typeRect = groupNode
|
||||
.insert('rect', '#' + nodePair.tn.node().id)
|
||||
.attr('class', `er ${attribStyle}`)
|
||||
.attr('fill', conf.fill)
|
||||
.attr('fill-opacity', '100%')
|
||||
.attr('stroke', conf.stroke)
|
||||
.attr('x', 0)
|
||||
.attr('y', heightOffset)
|
||||
.attr('width', maxTypeWidth + widthPadding * 2 + spareWidth / 2)
|
||||
.attr('height', nodePair.tn.node().getBBox().height + heightPadding * 2);
|
||||
|
||||
// Position the name of the attribute
|
||||
nodePair.nn.attr(
|
||||
'transform',
|
||||
'translate(' + (parseFloat(typeRect.attr('width')) + widthPadding) + ',' + alignY + ')'
|
||||
);
|
||||
|
||||
// Insert a rectangle for the name
|
||||
groupNode
|
||||
.insert('rect', '#' + nodePair.nn.node().id)
|
||||
.attr('class', `er ${attribStyle}`)
|
||||
.attr('fill', conf.fill)
|
||||
.attr('fill-opacity', '100%')
|
||||
.attr('stroke', conf.stroke)
|
||||
.attr('x', `${typeRect.attr('x') + typeRect.attr('width')}`)
|
||||
//.attr('x', maxTypeWidth + (widthPadding * 2))
|
||||
.attr('y', heightOffset)
|
||||
.attr('width', maxNameWidth + widthPadding * 2 + spareWidth / 2)
|
||||
.attr('height', nodePair.nn.node().getBBox().height + heightPadding * 2);
|
||||
|
||||
// Increment the height offset to move to the next row
|
||||
heightOffset +=
|
||||
Math.max(nodePair.tn.node().getBBox().height, nodePair.nn.node().getBBox().height) +
|
||||
heightPadding * 2;
|
||||
|
||||
// Flip the attribute style for row banding
|
||||
attribStyle = attribStyle == 'attributeBoxOdd' ? 'attributeBoxEven' : 'attributeBoxOdd';
|
||||
});
|
||||
} else {
|
||||
// Ensure the entity box is a decent size without any attributes
|
||||
bBox.height = Math.max(conf.minEntityHeight, cumulativeHeight);
|
||||
|
||||
// Position the entity label in the middle of the box
|
||||
entityTextNode.attr('transform', 'translate(' + bBox.width / 2 + ',' + bBox.height / 2 + ')');
|
||||
}
|
||||
|
||||
return bBox;
|
||||
};
|
||||
|
||||
/**
|
||||
* Use D3 to construct the svg elements for the entities
|
||||
* @param svgNode the svg node that contains the diagram
|
||||
@ -56,13 +209,11 @@ const drawEntities = function(svgNode, entities, graph) {
|
||||
)
|
||||
.text(id);
|
||||
|
||||
// Calculate the width and height of the entity
|
||||
const textBBox = textNode.node().getBBox();
|
||||
const entityWidth = Math.max(conf.minEntityWidth, textBBox.width + conf.entityPadding * 2);
|
||||
const entityHeight = Math.max(conf.minEntityHeight, textBBox.height + conf.entityPadding * 2);
|
||||
|
||||
// Make sure the text gets centred relative to the entity box
|
||||
textNode.attr('transform', 'translate(' + entityWidth / 2 + ',' + entityHeight / 2 + ')');
|
||||
const { width: entityWidth, height: entityHeight } = drawAttributes(
|
||||
groupNode,
|
||||
textNode,
|
||||
entities[id].attributes
|
||||
);
|
||||
|
||||
// Draw the rectangle - insert it before the text so that the text is not obscured
|
||||
const rectNode = groupNode
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
%lex
|
||||
|
||||
%options case-insensitive
|
||||
%x open_directive type_directive arg_directive
|
||||
%x open_directive type_directive arg_directive block
|
||||
|
||||
%%
|
||||
\%\%\{ { this.begin('open_directive'); return 'open_directive'; }
|
||||
@ -11,25 +11,31 @@
|
||||
<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive';
|
||||
\%%(?!\{)[^\n]* /* skip comments */
|
||||
[^\}]\%\%[^\n]* /* skip comments */
|
||||
[\n]+ return 'NEWLINE';
|
||||
\s+ /* skip whitespace */
|
||||
[\s]+ return 'SPACE';
|
||||
\"[^"]*\" return 'WORD';
|
||||
"erDiagram" return 'ER_DIAGRAM';
|
||||
\|o return 'ZERO_OR_ONE';
|
||||
\}o return 'ZERO_OR_MORE';
|
||||
\}\| return 'ONE_OR_MORE';
|
||||
\|\| return 'ONLY_ONE';
|
||||
o\| return 'ZERO_OR_ONE';
|
||||
o\{ return 'ZERO_OR_MORE';
|
||||
\|\{ return 'ONE_OR_MORE';
|
||||
\.\. return 'NON_IDENTIFYING';
|
||||
\-\- return 'IDENTIFYING';
|
||||
\.\- return 'NON_IDENTIFYING';
|
||||
\-\. return 'NON_IDENTIFYING';
|
||||
[A-Za-z][A-Za-z0-9\-_]* return 'ALPHANUM';
|
||||
. return yytext[0];
|
||||
<<EOF>> return 'EOF';
|
||||
[\n]+ return 'NEWLINE';
|
||||
\s+ /* skip whitespace */
|
||||
[\s]+ return 'SPACE';
|
||||
\"[^"]*\" return 'WORD';
|
||||
"erDiagram" return 'ER_DIAGRAM';
|
||||
"{" { this.begin("block"); return 'BLOCK_START'; }
|
||||
<block>\s+ /* skip whitespace in block */
|
||||
<block>[A-Za-z][A-Za-z0-9\-_]* { return 'ATTRIBUTE_WORD'; }
|
||||
<block>[\n]+ /* nothing */
|
||||
<block>"}" { this.popState(); return 'BLOCK_STOP'; }
|
||||
<block>. return yytext[0];
|
||||
\|o return 'ZERO_OR_ONE';
|
||||
\}o return 'ZERO_OR_MORE';
|
||||
\}\| return 'ONE_OR_MORE';
|
||||
\|\| return 'ONLY_ONE';
|
||||
o\| return 'ZERO_OR_ONE';
|
||||
o\{ return 'ZERO_OR_MORE';
|
||||
\|\{ return 'ONE_OR_MORE';
|
||||
\.\. return 'NON_IDENTIFYING';
|
||||
\-\- return 'IDENTIFYING';
|
||||
\.\- return 'NON_IDENTIFYING';
|
||||
\-\. return 'NON_IDENTIFYING';
|
||||
[A-Za-z][A-Za-z0-9\-_]* return 'ALPHANUM';
|
||||
. return yytext[0];
|
||||
<<EOF>> return 'EOF';
|
||||
|
||||
/lex
|
||||
|
||||
@ -67,6 +73,14 @@ statement
|
||||
yy.addRelationship($1, $5, $3, $2);
|
||||
/*console.log($1 + $2 + $3 + ':' + $5);*/
|
||||
}
|
||||
| entityName BLOCK_START attributes BLOCK_STOP
|
||||
{
|
||||
/* console.log('detected block'); */
|
||||
yy.addEntity($1);
|
||||
yy.addAttributes($1, $3);
|
||||
/* console.log('handled block'); */
|
||||
}
|
||||
| entityName BLOCK_START BLOCK_STOP { yy.addEntity($1); }
|
||||
| entityName { yy.addEntity($1); }
|
||||
;
|
||||
|
||||
@ -74,6 +88,23 @@ entityName
|
||||
: 'ALPHANUM' { $$ = $1; /*console.log('Entity: ' + $1);*/ }
|
||||
;
|
||||
|
||||
attributes
|
||||
: attribute { $$ = [$1]; }
|
||||
| attribute attributes { $2.push($1); $$=$2; }
|
||||
;
|
||||
|
||||
attribute
|
||||
: attributeType attributeName { $$ = { attributeType: $1, attributeName: $2 }; }
|
||||
;
|
||||
|
||||
attributeType
|
||||
: ATTRIBUTE_WORD { $$=$1; }
|
||||
;
|
||||
|
||||
attributeName
|
||||
: ATTRIBUTE_WORD { $$=$1; }
|
||||
;
|
||||
|
||||
relSpec
|
||||
: cardinality relType cardinality
|
||||
{
|
||||
|
||||
@ -20,7 +20,7 @@ describe('when parsing ER diagram it...', function() {
|
||||
erDiagram.parser.parse(`erDiagram\n${line1}\n${line2}`);
|
||||
|
||||
expect(Object.keys(erDb.getEntities()).length).toBe(2);
|
||||
expect (erDb.getRelationships().length).toBe(0);
|
||||
expect(erDb.getRelationships().length).toBe(0);
|
||||
});
|
||||
|
||||
it ('should allow hyphens and underscores in entity names', function() {
|
||||
@ -29,19 +29,96 @@ describe('when parsing ER diagram it...', function() {
|
||||
erDiagram.parser.parse(`erDiagram\n${line1}\n${line2}`);
|
||||
|
||||
const entities = erDb.getEntities();
|
||||
expect (entities["DUCK-BILLED-PLATYPUS"]).toBe('DUCK-BILLED-PLATYPUS');
|
||||
expect (entities.CHARACTER_SET).toBe('CHARACTER_SET');
|
||||
expect(entities.hasOwnProperty('DUCK-BILLED-PLATYPUS')).toBe(true);
|
||||
expect(entities.hasOwnProperty('CHARACTER_SET')).toBe(true);
|
||||
});
|
||||
|
||||
it('should allow an entity with a single attribute to be defined', function() {
|
||||
const entity = 'BOOK';
|
||||
const attribute = 'string title';
|
||||
|
||||
erDiagram.parser.parse(`erDiagram\n${entity} {\n${attribute}\n}`);
|
||||
const entities = erDb.getEntities();
|
||||
expect(Object.keys(entities).length).toBe(1);
|
||||
expect(entities[entity].attributes.length).toBe(1);
|
||||
});
|
||||
|
||||
it('should allow an entity with multiple attributes to be defined', function() {
|
||||
const entity = 'BOOK';
|
||||
const attribute1 = 'string title';
|
||||
const attribute2 = 'string author';
|
||||
const attribute3 = 'float price';
|
||||
|
||||
erDiagram.parser.parse(`erDiagram\n${entity} {\n${attribute1}\n${attribute2}\n${attribute3}\n}`);
|
||||
const entities = erDb.getEntities();
|
||||
expect(entities[entity].attributes.length).toBe(3);
|
||||
});
|
||||
|
||||
it('should allow attribute definitions to be split into multiple blocks', function() {
|
||||
const entity = 'BOOK';
|
||||
const attribute1 = 'string title';
|
||||
const attribute2 = 'string author';
|
||||
const attribute3 = 'float price';
|
||||
|
||||
erDiagram.parser.parse(`erDiagram\n${entity} {\n${attribute1}\n}\n${entity} {\n${attribute2}\n${attribute3}\n}`);
|
||||
const entities = erDb.getEntities();
|
||||
expect(entities[entity].attributes.length).toBe(3);
|
||||
});
|
||||
|
||||
it('should allow an empty attribute block', function() {
|
||||
const entity = 'BOOK';
|
||||
|
||||
erDiagram.parser.parse(`erDiagram\n${entity} {}`);
|
||||
const entities = erDb.getEntities();
|
||||
expect(entities.hasOwnProperty('BOOK')).toBe(true);
|
||||
expect(entities[entity].attributes.length).toBe(0);
|
||||
});
|
||||
|
||||
it('should allow an attribute block to start immediately after the entity name', function() {
|
||||
const entity = 'BOOK';
|
||||
|
||||
erDiagram.parser.parse(`erDiagram\n${entity}{}`);
|
||||
const entities = erDb.getEntities();
|
||||
expect(entities.hasOwnProperty('BOOK')).toBe(true);
|
||||
expect(entities[entity].attributes.length).toBe(0);
|
||||
});
|
||||
|
||||
it('should allow an attribute block to be separated from the entity name by spaces', function() {
|
||||
const entity = 'BOOK';
|
||||
|
||||
erDiagram.parser.parse(`erDiagram\n${entity} {}`);
|
||||
const entities = erDb.getEntities();
|
||||
expect(entities.hasOwnProperty('BOOK')).toBe(true);
|
||||
expect(entities[entity].attributes.length).toBe(0);
|
||||
});
|
||||
|
||||
it('should allow whitespace before and after attribute definitions', function() {
|
||||
const entity = 'BOOK';
|
||||
const attribute = 'string title';
|
||||
|
||||
erDiagram.parser.parse(`erDiagram\n${entity} {\n \n\n ${attribute}\n\n \n}`);
|
||||
const entities = erDb.getEntities();
|
||||
expect(Object.keys(entities).length).toBe(1);
|
||||
expect(entities[entity].attributes.length).toBe(1);
|
||||
});
|
||||
|
||||
it('should allow no whitespace before and after attribute definitions', function() {
|
||||
const entity = 'BOOK';
|
||||
const attribute = 'string title';
|
||||
|
||||
erDiagram.parser.parse(`erDiagram\n${entity}{${attribute}}`);
|
||||
const entities = erDb.getEntities();
|
||||
expect(Object.keys(entities).length).toBe(1);
|
||||
expect(entities[entity].attributes.length).toBe(1);
|
||||
});
|
||||
|
||||
it('should associate two entities correctly', function() {
|
||||
erDiagram.parser.parse('erDiagram\nCAR ||--o{ DRIVER : "insured for"');
|
||||
const entities = erDb.getEntities();
|
||||
const relationships = erDb.getRelationships();
|
||||
const carEntity = entities.CAR;
|
||||
const driverEntity = entities.DRIVER;
|
||||
|
||||
expect(carEntity).toBe('CAR');
|
||||
expect(driverEntity).toBe('DRIVER');
|
||||
expect(entities.hasOwnProperty('CAR')).toBe(true);
|
||||
expect(entities.hasOwnProperty('DRIVER')).toBe(true);
|
||||
expect(relationships.length).toBe(1);
|
||||
expect(relationships[0].relSpec.cardA).toBe(erDb.Cardinality.ZERO_OR_MORE);
|
||||
expect(relationships[0].relSpec.cardB).toBe(erDb.Cardinality.ONLY_ONE);
|
||||
|
||||
@ -5,6 +5,16 @@ const getStyles = options =>
|
||||
stroke: ${options.nodeBorder};
|
||||
}
|
||||
|
||||
.attributeBoxOdd {
|
||||
fill: #ffffff;
|
||||
stroke: ${options.nodeBorder};
|
||||
}
|
||||
|
||||
.attributeBoxEven {
|
||||
fill: #f2f2f2;
|
||||
stroke: ${options.nodeBorder};
|
||||
}
|
||||
|
||||
.relationshipLabelBox {
|
||||
fill: ${options.tertiaryColor};
|
||||
opacity: 0.7;
|
||||
|
||||
@ -453,7 +453,7 @@ export const addSubGraph = function(_id, list, _title) {
|
||||
subCount = subCount + 1;
|
||||
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
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
const getStyles = options =>
|
||||
`
|
||||
.mermaid-main-font {
|
||||
font-family: "trebuchet ms", verdana, arial;
|
||||
font-family: "trebuchet ms", verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@ const getStyles = options =>
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
text-height: 14px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
|
||||
}
|
||||
@ -86,7 +86,7 @@ const getStyles = options =>
|
||||
|
||||
.taskText {
|
||||
text-anchor: middle;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
@ -98,7 +98,7 @@ const getStyles = options =>
|
||||
fill: ${options.taskTextDarkColor};
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
|
||||
}
|
||||
@ -253,7 +253,7 @@ const getStyles = options =>
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
fill: ${options.textColor} ;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -5,7 +5,7 @@ const getStyles = () =>
|
||||
.branch-label {
|
||||
fill: lightgrey;
|
||||
color: lightgrey;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
<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_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-v2"\s+ { /*console.log('Got state diagram', yytext,'#');*/return 'SD'; }
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
const getStyles = options =>
|
||||
`.label {
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
color: ${options.textColor};
|
||||
}
|
||||
@ -79,7 +79,7 @@ const getStyles = options =>
|
||||
text-align: center;
|
||||
max-width: 200px;
|
||||
padding: 2px;
|
||||
font-family: 'trebuchet ms', verdana, arial;
|
||||
font-family: 'trebuchet ms', verdana, arial, sans-serif;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 12px;
|
||||
background: ${options.tertiaryColor};
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
*/
|
||||
// import { decode } from 'he';
|
||||
import decode from 'entity-decode/browser';
|
||||
import mermaidAPI from './mermaidAPI';
|
||||
import { logger } from './logger';
|
||||
import mermaidAPI from './mermaidAPI';
|
||||
import utils from './utils';
|
||||
|
||||
/**
|
||||
@ -78,6 +78,8 @@ const init = function() {
|
||||
mermaidAPI.updateSiteConfig({ gantt: mermaid.ganttConfig });
|
||||
}
|
||||
|
||||
const nextId = utils.initIdGeneratior(conf.deterministicIds, conf.deterministicIDSeed).next;
|
||||
|
||||
let txt;
|
||||
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
@ -90,7 +92,7 @@ const init = function() {
|
||||
continue;
|
||||
}
|
||||
|
||||
const id = `mermaid-${Date.now()}`;
|
||||
const id = `mermaid-${nextId()}`;
|
||||
|
||||
// Fetch the graph definition including tags
|
||||
txt = element.innerHTML;
|
||||
|
||||
@ -31,7 +31,7 @@ class Theme {
|
||||
// this.secondaryColor = '#dfdfde';
|
||||
// this.tertiaryColor = '#CCCCFF';
|
||||
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '16px';
|
||||
// this.updateColors();
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ class Theme {
|
||||
this.border1 = '#81B1DB';
|
||||
this.border2 = rgba(255, 255, 255, 0.25);
|
||||
this.arrowheadColor = 'calculated';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '16px';
|
||||
this.labelBackground = '#181818';
|
||||
this.textColor = '#ccc';
|
||||
|
||||
@ -28,7 +28,7 @@ class Theme {
|
||||
this.border1 = '#9370DB';
|
||||
this.border2 = '#aaaa33';
|
||||
this.arrowheadColor = '#333333';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '16px';
|
||||
this.labelBackground = '#e8e8e8';
|
||||
this.textColor = '#333';
|
||||
|
||||
@ -13,7 +13,7 @@ class Theme {
|
||||
this.border1 = '#13540c';
|
||||
this.border2 = '#6eaa49';
|
||||
this.arrowheadColor = 'green';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '16px';
|
||||
|
||||
this.tertiaryColor = lighten('#cde498', 10);
|
||||
|
||||
@ -35,7 +35,7 @@ class Theme {
|
||||
this.critical = '#d42';
|
||||
this.done = '#bbb';
|
||||
this.arrowheadColor = '#333333';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial';
|
||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||
this.fontSize = '16px';
|
||||
|
||||
/* Flowchart variables */
|
||||
|
||||
20
src/utils.js
20
src/utils.js
@ -1,3 +1,4 @@
|
||||
import { sanitizeUrl } from '@braintree/sanitize-url';
|
||||
import {
|
||||
curveBasis,
|
||||
curveBasisClosed,
|
||||
@ -12,9 +13,8 @@ import {
|
||||
curveStepBefore,
|
||||
select
|
||||
} from 'd3';
|
||||
import { logger } from './logger';
|
||||
import { sanitizeUrl } from '@braintree/sanitize-url';
|
||||
import common from './diagrams/common/common';
|
||||
import { logger } from './logger';
|
||||
// import cryptoRandomString from 'crypto-random-string';
|
||||
|
||||
// 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);
|
||||
};
|
||||
|
||||
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 {
|
||||
assignWithDepth,
|
||||
wrapLabel,
|
||||
@ -811,5 +824,6 @@ export default {
|
||||
generateId,
|
||||
random,
|
||||
memoize,
|
||||
runFunc
|
||||
runFunc,
|
||||
initIdGeneratior
|
||||
};
|
||||
|
||||
@ -253,3 +253,34 @@ describe('when calculating SVG size', function() {
|
||||
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==
|
||||
|
||||
highlight.js@^9.15.5:
|
||||
version "9.18.1"
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c"
|
||||
integrity sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==
|
||||
version "9.18.5"
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
|
||||
integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
|
||||
|
||||
hmac-drbg@^1.0.0:
|
||||
version "1.0.1"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user