mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/develop' into lazy-load-import

This commit is contained in:
Knut Sveidqvist 2022-10-07 10:46:16 +02:00
parent 439274c5ae 931120f73c
commit 802407c8ae
23 changed files with 295 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
CODE_OF_CONDUCT.md Normal file
View File

@ -0,0 +1,128 @@
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
- Demonstrating empathy and kindness toward other people
- Being respectful of differing opinions, viewpoints, and experiences
- Giving and gracefully accepting constructive feedback
- Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
- Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
- The use of sexualized language or imagery, and sexual attention or
advances of any kind
- Trolling, insulting or derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or email
address, without their explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at security@mermaid.live
.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.

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

@ -14,15 +14,16 @@
mermaid.init({ startOnLoad: false });
mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
(async () => {
try {
console.log('rendering');
await mermaid.mermaidAPI.render('graphDiv', `>`);
} catch (e) {}
try {
console.log('rendering');
mermaid.mermaidAPI.render('graphDiv', `>`);
} catch (e) {}
mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
document.getElementById('graph').innerHTML = html;
});
await mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
document.getElementById('graph').innerHTML = html;
});
})();
</script>
</body>
</html>

8
demos/c4context.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
</head>
<body>
<h1>C4 context diagram demos</h1>
<pre class="mermaid">
C4Context
accTitle: C4 context demo
@ -62,6 +63,7 @@
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
</pre>
<hr />
<pre class="mermaid">
C4Container
@ -101,6 +103,7 @@
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
</pre>
<hr />
<pre class="mermaid">
C4Component
@ -140,6 +143,7 @@
UpdateRelStyle(security, db, $offsetY="-40")
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
</pre>
<hr />
<pre class="mermaid">
C4Dynamic
@ -159,6 +163,7 @@
UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
</pre>
<hr />
<pre class="mermaid">
C4Deployment
@ -210,7 +215,6 @@
UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
UpdateRelStyle(db, db2, $offsetY="-10")
</pre>
<hr />
<script src="./mermaid.js"></script>

11
demos/classchart.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,8 @@
</head>
<body>
<h1>Class diagram demos</h1>
<pre class="mermaid">
classDiagram
accTitle: Demo Class Diagram
@ -42,8 +44,8 @@
}
</pre>
<hr />
<pre class="mermaid">
classDiagram
Class01 <|-- AveryLongClass : Cool
@ -68,6 +70,7 @@
}
</pre>
<hr />
<pre class="mermaid">
classDiagram
class Class01~T~
@ -81,6 +84,7 @@
}
</pre>
<hr />
<pre class="mermaid">
classDiagram
Class01~T~ <|-- AveryLongClass : Cool
@ -104,11 +108,13 @@
}
</pre>
<hr />
<pre class="mermaid">
classDiagram
Interface1 ()-- Interface1Impl
</pre>
<hr />
<pre class="mermaid">
classDiagram
direction LR
@ -117,6 +123,7 @@
Dog : species()
</pre>
<hr />
<pre class="mermaid">
classDiagram
direction RL

8
demos/dataflowchart.html
View File

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<title>Data Flow Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
@ -13,7 +13,7 @@
</style>
</head>
<body>
<h2>Data Flow Diagram Example</h2>
<h1>Data Flow Diagram demos</h1>
<pre class="mermaid">
flowchart LR
accTitle: A simple linear flowchart.
@ -21,6 +21,8 @@
DataStore[|borders:tb|Database] -->|input| Process((System)) -->|output| Entity[Customer];
</pre>
<hr />
<h2>Borders Example</h2>
<pre class="mermaid">
flowchart TD

8
demos/er.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -10,6 +10,10 @@
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
.diagram-title {
fill: red;
font-size: 24pt;
}
</style>
</head>
@ -51,8 +55,8 @@ erDiagram
}
</pre>
<script src="./mermaid.js"></script>
<script type="module">
import mermaid from '../src/mermaid';
mermaid.initialize({
theme: 'default',

109
demos/flowchart.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -15,7 +15,6 @@
<body>
<h1>Comparison "graph vs. flowchart"</h1>
<h2>Sample 1</h2>
<h3>graph</h3>
<pre class="mermaid">
graph LR
@ -117,6 +116,7 @@
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -216,10 +216,9 @@
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</pre>
<hr />
<h2>Sample 2</h2>
<h3>graph</h3>
<pre class="mermaid">
graph TD
@ -231,6 +230,7 @@
C -->|Two| E[iPhone]
C -->|Three| F[Car]
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -243,10 +243,9 @@
C -->|Two| E[iPhone]
C -->|Three| F[Car]
</pre>
<hr />
<h2>Sample 3</h2>
<h3>graph</h3>
<pre class="mermaid">
graph TD
@ -257,6 +256,7 @@
C -->|Two| E[\iPhone\]
C -->|Three| F[Car]
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -268,10 +268,9 @@
C -->|Two| E[\iPhone\]
C -->|Three| F[Car]
</pre>
<hr />
<h2>Sample 4</h2>
<h3>graph</h3>
<pre class="mermaid">
graph LR
@ -296,6 +295,7 @@
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -321,10 +321,9 @@
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</pre>
<hr />
<h2>Sample 5</h2>
<h3>graph</h3>
<pre class="mermaid">
graph TD
@ -391,6 +390,7 @@
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -458,10 +458,9 @@
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</pre>
<hr />
<h2>Sample 6</h2>
<h3>graph</h3>
<pre class="mermaid">
graph TB
@ -469,6 +468,7 @@
a1-->a2
end
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -477,10 +477,9 @@
a1-->a2
end
</pre>
<hr />
<h2>Sample 7</h2>
<h3>graph</h3>
<pre class="mermaid">
graph TB
@ -511,6 +510,7 @@
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -542,10 +542,9 @@
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</pre>
<hr />
<h2>Sample 8</h2>
<h3>graph</h3>
<pre class="mermaid">
graph LR
@ -562,6 +561,7 @@
3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -579,10 +579,9 @@
3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<hr />
<h2>Sample 9</h2>
<h3>graph</h3>
<pre class="mermaid">
graph TD
@ -597,6 +596,7 @@
class A someclass;
class C someclass;
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -612,10 +612,9 @@
class A someclass;
class C someclass;
</pre>
<hr />
<h2>Sample 10</h2>
<h3>graph</h3>
<pre class="mermaid">
graph TD
@ -631,6 +630,7 @@
class A someclass;
class C someclass;
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -647,10 +647,9 @@
class A someclass;
class C someclass;
</pre>
<hr />
<h2>Sample 11</h2>
<h3>graph</h3>
<pre class="mermaid">
graph LR
@ -666,6 +665,7 @@
class A someclass;
class C someclass;
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -682,10 +682,9 @@
class A someclass;
class C someclass;
</pre>
<hr />
<h2>Sample 12</h2>
<h3>graph</h3>
<pre class="mermaid">
graph LR
@ -705,6 +704,7 @@
classDef someclass fill:#f96;
class A someclass;
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -725,10 +725,9 @@
classDef someclass fill:#f96;
class A someclass;
</pre>
<hr />
<h2>Sample 13</h2>
<h3>graph</h3>
<pre class="mermaid">
graph LR
@ -742,6 +741,7 @@
linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -756,10 +756,9 @@
linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px
</pre>
<hr />
<h2>Sample 14</h2>
<h3>graph</h3>
<pre class="mermaid">
graph LR
@ -769,6 +768,7 @@
linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -779,10 +779,9 @@
linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px
</pre>
<hr />
<h2>Sample 15</h2>
<h2>Sample 15</h2>
<h3>graph</h3>
<pre class="mermaid">
graph TB
@ -801,6 +800,7 @@
click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test"
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -820,10 +820,9 @@
click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test"
</pre>
<hr />
<h2>Sample 16</h2>
<h2>Sample 16</h2>
<h3>graph</h3>
<pre class="mermaid">
graph LR
@ -840,6 +839,7 @@
click B "flowchart.html#link-clicked" "link test"
click D testClick "click test"
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -857,10 +857,9 @@
click B "flowchart.html#link-clicked" "link test"
click D testClick "click test"
</pre>
<hr />
<h2>Sample 17</h2>
<h2>Sample 17</h2>
<h3>graph</h3>
<pre class="mermaid">
graph TD
@ -873,6 +872,7 @@
class A myClass1
class D myClass2
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -886,10 +886,9 @@
class A myClass1
class D myClass2
</pre>
<hr />
<h2>Sample 18</h2>
<h2>Sample 18</h2>
<h3>graph</h3>
<pre class="mermaid">
graph LR
@ -937,6 +936,7 @@
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -985,10 +985,9 @@
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</pre>
<hr />
<h2>Sample 19</h2>
<h2>Sample 19</h2>
<h3>graph</h3>
<pre class="mermaid">
graph TB
@ -1036,6 +1035,7 @@
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</pre>
<hr />
<h3>flowchart</h3>
<pre class="mermaid">
@ -1087,7 +1087,6 @@
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
style O2 stroke:#0000ff,fill:#ccccff,color:#0000ff
</pre>
<hr />
<hr />
@ -1189,6 +1188,8 @@
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
</pre>
<hr />
<pre class="mermaid">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
@ -1197,6 +1198,8 @@
C -->|Two| E[iPhone]
C -->|Three| F[Car]
</pre>
<hr />
<pre class="mermaid">
graph TD
A[/Christmas\]
@ -1206,6 +1209,8 @@
C -->|Two| E[\iPhone\]
C -->|Three| F[Car]
</pre>
<hr />
<pre class="mermaid">
graph LR
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
@ -1229,6 +1234,8 @@
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
</pre>
<hr />
<pre class="mermaid">
graph TD
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
@ -1294,12 +1301,16 @@
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
</pre>
<hr />
<pre class="mermaid">
graph TB
subgraph One
a1-->a2
end
</pre>
<hr />
<pre class="mermaid">
graph TB
A
@ -1329,6 +1340,8 @@
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
</pre>
<hr />
<pre class="mermaid">
graph LR
456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]
@ -1344,6 +1357,8 @@
3000"
style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
</pre>
<hr />
<pre class="mermaid">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
@ -1357,6 +1372,8 @@
class A someclass;
class C someclass;
</pre>
<hr />
<pre class="mermaid">
graph TD
A([stadium shape test])
@ -1371,6 +1388,8 @@
class A someclass;
class C someclass;
</pre>
<hr />
<pre class="mermaid">
graph LR
A[[subroutine shape test]]
@ -1385,6 +1404,8 @@
class A someclass;
class C someclass;
</pre>
<hr />
<pre class="mermaid">
graph LR
A[(cylindrical<br />shape<br />test)]
@ -1403,6 +1424,8 @@
classDef someclass fill:#f96;
class A someclass;
</pre>
<hr />
<pre class="mermaid">
graph LR
A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
@ -1415,6 +1438,8 @@
linkStyle 1 stroke:DarkGray,stroke-width:2px
linkStyle 2 stroke:DarkGray,stroke-width:2px
</pre>
<hr />
<pre class="mermaid">
graph LR
A(( )) -->|step 1| B(( ))
@ -1423,6 +1448,8 @@
linkStyle 1 stroke:greenyellow,stroke-width:2px
style C fill:greenyellow,stroke:green,stroke-width:4px
</pre>
<hr />
<pre class="mermaid">
graph TB
TITLE["Link Click Events<br>(click the nodes below)"]
@ -1441,6 +1468,7 @@
click F "javascript:alert('test')" "script test"
</pre>
<hr />
<pre class="mermaid">
graph LR
A[red<br>text] -->|red<br>text| B(blue<br>text)
@ -1456,6 +1484,8 @@
click B "index.html#link-clicked" "link test"
click D testClick "click test"
</pre>
<hr />
<pre class="mermaid">
graph TD
A[myClass1] --> B[default] & C[default]
@ -1467,6 +1497,7 @@
class A myClass1
class D myClass2
</pre>
<hr />
<h1 id="link-clicked">Anchor for "link-clicked" test</h1>

17
demos/gantt.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -13,6 +13,7 @@
</head>
<body>
<h1>Gantt chart diagram demos</h1>
<!-- accDescription Tasks for Q4 -->
<pre class="mermaid">
gantt
@ -27,6 +28,7 @@
Task in sec :2014-01-12 , 12d
another task : 24d
</pre>
<hr />
<pre class="mermaid">
gantt
@ -44,6 +46,8 @@
开发 :a, 2021-10-09, 4d
测试 :after a, 4d
</pre>
<hr />
<pre class="mermaid">
gantt
title Exclusive end dates (Manual date should end on 3d)
@ -53,6 +57,8 @@
2 Days: 1, 2019-01-01,2d
Manual Date: 2, 2019-01-01,2019-01-03
</pre>
<hr />
<pre class="mermaid">
gantt
title Inclusive end dates (Manual date should end on 4th)
@ -63,6 +69,8 @@
2 Days: 1, 2019-01-01,2d
Manual Date: 2, 2019-01-01,2019-01-03
</pre>
<hr />
<pre class="mermaid">
gantt
title Hide today marker (vertical line should not be visible)
@ -72,6 +80,8 @@
section Section1
Today: 1, -1h
</pre>
<hr />
<pre class="mermaid">
gantt
title Style today marker (vertical line should be 5px wide and half-transparent blue)
@ -81,6 +91,7 @@
section Section1
Today: 1, -1h
</pre>
<hr />
<pre class="mermaid">
gantt
@ -120,6 +131,8 @@
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
</pre>
<hr />
<pre class="mermaid">
gantt
dateFormat YYYY-MM-DD
@ -151,6 +164,7 @@
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
</pre>
<hr />
<script>
function ganttTestClick(a, b, c) {
@ -167,6 +181,7 @@
}, 100);
}
</script>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({

3
demos/git.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
</head>
<body>
<h1>Git diagram demo</h1>
<pre class="mermaid">
gitGraph:
options

100
demos/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -15,6 +15,13 @@
<body>
<h1>Mermaid quick test and demo pages</h1>
<p>
Some of these pages have duplicates; some are slow to load because they have so many graphs.
</p>
<p>
If you'd like to clean up one of the pages, please feel free to
<a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>
</p>
<ul>
<li>
@ -26,6 +33,9 @@
<li>
<h2><a href="./dataflowchart.html">Data flow charts</a></h2>
</li>
<li>
<h2><a href="./er.html">Entity Relation diagram</a></h2>
</li>
<li>
<h2><a href="./flowchart.html">Flow charts</a></h2>
</li>
@ -51,93 +61,5 @@
<h2><a href="./state.html">State</a></h2>
</li>
</ul>
<script src="./mermaid.js"></script>
<script>
const ALLOWED_TAGS = [
'a',
'b',
'blockquote',
'br',
'dd',
'div',
'dl',
'dt',
'em',
'foreignObject',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'h7',
'h8',
'hr',
'i',
'li',
'ul',
'ol',
'p',
'pre',
'span',
'strike',
'strong',
'table',
'tbody',
'td',
'tfoot',
'th',
'thead',
'tr',
];
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
dompurifyConfig: {
USE_PROFILES: {
svg: true,
},
ADD_TAGS: ALLOWED_TAGS,
ADD_ATTR: ['transform-origin'],
},
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
<script>
function ganttTestClick(a, b, c) {
console.log('a:', a);
console.log('b:', b);
console.log('c:', c);
}
function testClick(nodeId) {
console.log('clicked', nodeId);
var originalBgColor = document.querySelector('body').style.backgroundColor;
document.querySelector('body').style.backgroundColor = 'yellow';
setTimeout(function () {
document.querySelector('body').style.backgroundColor = originalBgColor;
}, 100);
}
</script>
<script>
const testLineEndings = (test, input) => {
try {
mermaid.render(test, input, () => {
//no-op
});
} catch (err) {
console.error('Error in %s:\n\n%s', test, err);
}
};
testLineEndings('CR', 'graph LR\rsubgraph CR\rA --> B\rend');
testLineEndings('LF', 'graph LR\nsubgraph LF\nA --> B\nend');
testLineEndings('CRLF', 'graph LR\r\nsubgraph CRLF\r\nA --> B\r\nend');
</script>
</body>
</html>

3
demos/journey.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
</head>
<body>
<h1>Journey diagram demo</h1>
<pre class="mermaid">
journey
title My working day

6
demos/pie.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
</head>
<body>
<h1>Pie chart demos</h1>
<pre class="mermaid">
pie title Pets adopted by volunteers
accTitle: simple pie char demo
@ -23,6 +24,7 @@
"Rats" : 15
</pre>
<hr />
<pre class="mermaid">
pie
title Key elements in Product X
@ -35,7 +37,7 @@
</pre>
<script type="module">
import mermaid from '../src/mermaid';
import mermaid from '../packages/mermaid';
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',

3
demos/requirements.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
</head>
<body>
<h1>Requirement diagram demos</h1>
<pre class="mermaid">
requirementDiagram
accTitle: Requirments demo in black and white

10
demos/sequence.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
</head>
<body>
<h1>Sequence diagram demos</h1>
<pre class="mermaid">
sequenceDiagram
accTitle: test the accTitle
@ -59,7 +60,7 @@
Alice -->> John: Parallel message 2
end
</pre>
<hr />
<pre class="mermaid">
sequenceDiagram
accTitle: Sequence diagram title is here
@ -96,6 +97,8 @@
Alice -->> John: Parallel message 2
end
</pre>
<hr />
<pre class="mermaid">
sequenceDiagram
participant 1 as multiline<br>using #lt;br#gt;
@ -111,6 +114,8 @@
4->>1: multiline<br />using #lt;br /#gt;
note right of 1: multiline<br />using #lt;br /#gt;
</pre>
<hr />
<pre class="mermaid">
sequenceDiagram
autonumber
@ -121,6 +126,7 @@
autonumber off
John-->>Alice: I feel great!
</pre>
<hr />
<script src="./mermaid.js"></script>
<script>

3
demos/state.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@ -14,6 +14,7 @@
</head>
<body>
<h1>State diagram demos</h1>
<pre class="mermaid">
stateDiagram
accTitle: This is the accessible title

9
package.json
View File

@ -7,7 +7,7 @@
"module": "dist/mermaid.core.mjs",
"types": "dist/mermaid.d.ts",
"type": "module",
"packageManager": "pnpm@7.12.2",
"packageManager": "pnpm@7.13.2",
"exports": {
".": {
"require": "./dist/mermaid.min.js",
@ -71,8 +71,8 @@
},
"dependencies": {
"@braintree/sanitize-url": "^6.0.0",
"@types/uuid": "^8.3.4",
"@types/node": "^18.8.1",
"@types/uuid": "^8.3.4",
"d3": "^7.0.0",
"dagre": "^0.8.5",
"dagre-d3": "^0.6.4",
@ -107,8 +107,8 @@
"coveralls": "^3.1.1",
"cypress": "^10.0.0",
"cypress-image-snapshot": "^4.0.1",
"esbuild": "^0.15.10",
"documentation": "13.2.0",
"esbuild": "^0.15.10",
"eslint": "^8.24.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-cypress": "^2.12.1",
@ -128,6 +128,7 @@
"markdown-it": "^13.0.1",
"moment": "^2.23.0",
"path-browserify": "^1.0.1",
"pnpm": "^7.13.2",
"prettier": "^2.7.1",
"prettier-plugin-jsdoc": "^0.4.2",
"remark": "^14.0.2",
@ -136,10 +137,10 @@
"ts-node": "^10.9.1",
"typescript": "^4.8.4",
"unist-util-flatmap": "^1.0.0",
"vite": "^3.1.4",
"vitepress": "^1.0.0-alpha.19",
"vitepress-plugin-mermaid": "^2.0.8",
"vitepress-plugin-search": "^1.0.4-alpha.11",
"vite": "^3.1.4",
"vitest": "^0.23.4"
},
"resolutions": {

4
packages/mermaid-example-diagram/package.json
View File

@ -29,10 +29,6 @@
"lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
"lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
"lint:jison": "ts-node-esm src/jison/lint.mts",
"ci": "vitest run",
"test": "yarn lint && vitest run",
"test:watch": "vitest --coverage --watch",
"todo-prepublishOnly": "yarn build && yarn test",
"todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
"todo-pre-commit": "lint-staged"
},

4
packages/mermaid-mindmap/package.json
View File

@ -29,10 +29,6 @@
"lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
"lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
"lint:jison": "ts-node-esm src/jison/lint.mts",
"ci": "vitest run",
"test": "yarn lint && vitest run",
"test:watch": "vitest --coverage --watch",
"todo-prepublishOnly": "yarn build && yarn test",
"todo-prepare": "concurrently \"husky install ../../.husky\" \"yarn build\"",
"todo-pre-commit": "lint-staged"
},

9
packages/mermaid/package.json
View File

@ -41,10 +41,6 @@
"cypress": "cypress run",
"cypress:open": "cypress open",
"e2e": "start-server-and-test dev http://localhost:9000/ cypress",
"ci": "vitest run",
"test": "yarn lint && vitest run",
"test:watch": "vitest --coverage --watch",
"prepublishOnly": "yarn build && yarn test",
"todo-prepare": "concurrently \"husky install\" \"yarn build\"",
"pre-commit": "lint-staged"
},
@ -92,8 +88,6 @@
"@types/stylis": "^4.0.2",
"@typescript-eslint/eslint-plugin": "^5.37.0",
"@typescript-eslint/parser": "^5.37.0",
"@vitest/coverage-c8": "^0.23.2",
"@vitest/ui": "^0.23.2",
"concurrently": "^7.4.0",
"coveralls": "^3.1.1",
"cypress": "^10.0.0",
@ -125,8 +119,7 @@
"start-server-and-test": "^1.12.6",
"ts-node": "^10.9.1",
"typescript": "^4.8.3",
"unist-util-flatmap": "^1.0.0",
"vitest": "^0.23.1"
"unist-util-flatmap": "^1.0.0"
},
"resolutions": {
"d3": "^7.0.0"

1
packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
View File

@ -1,7 +1,6 @@
// @ts-nocheck TODO: Fix TS
import moment from 'moment-mini';
import ganttDb from './ganttDb';
import { it, describe } from 'vitest';
import { convert } from '../../tests/util';
describe('when using the ganttDb', function () {

1
packages/mermaid/src/mermaid.spec.ts
View File

@ -1,7 +1,6 @@
import mermaid from './mermaid';
import { mermaidAPI } from './mermaidAPI';
import './diagram-api/diagram-orchestration';
import { vi, describe, it, beforeEach, afterEach, expect } from 'vitest';
const spyOn = vi.spyOn;
vi.mock('./mermaidAPI');

2
packages/mermaid/src/utils.spec.js
View File

@ -1,4 +1,4 @@
import { vi, describe, it, expect, beforeEach } from 'vitest';
import { vi } from 'vitest';
import utils from './utils';
import assignWithDepth from './assignWithDepth';
import { detectType } from './diagram-api/detectType';

75
pnpm-lock.yaml
View File

@ -60,6 +60,7 @@ importers:
moment-mini: ^2.24.0
non-layered-tidy-tree-layout: ^2.0.2
path-browserify: ^1.0.1
pnpm: ^7.13.2
prettier: ^2.7.1
prettier-plugin-jsdoc: ^0.4.2
remark: ^14.0.2
@ -134,6 +135,7 @@ importers:
markdown-it: 13.0.1
moment: 2.29.4
path-browserify: 1.0.1
pnpm: 7.13.2
prettier: 2.7.1
prettier-plugin-jsdoc: 0.4.2_prettier@2.7.1
remark: 14.0.2
@ -164,8 +166,6 @@ importers:
'@types/stylis': ^4.0.2
'@typescript-eslint/eslint-plugin': ^5.37.0
'@typescript-eslint/parser': ^5.37.0
'@vitest/coverage-c8': ^0.23.2
'@vitest/ui': ^0.23.2
concurrently: ^7.4.0
coveralls: ^3.1.1
cypress: ^10.0.0
@ -209,7 +209,6 @@ importers:
ts-node: ^10.9.1
typescript: ^4.8.3
unist-util-flatmap: ^1.0.0
vitest: ^0.23.1
dependencies:
'@braintree/sanitize-url': 6.0.0
d3: 7.6.1
@ -237,8 +236,6 @@ importers:
'@types/stylis': 4.0.2
'@typescript-eslint/eslint-plugin': 5.38.0_wsb62dxj2oqwgas4kadjymcmry
'@typescript-eslint/parser': 5.38.0_irgkl5vooow2ydyo6aokmferha
'@vitest/coverage-c8': 0.23.4_y2hohvmcqnhseytaw4yjcnsnkm
'@vitest/ui': 0.23.4
concurrently: 7.4.0
coveralls: 3.1.1
cypress: 10.8.0
@ -271,7 +268,6 @@ importers:
ts-node: 10.9.1_typescript@4.8.3
typescript: 4.8.3
unist-util-flatmap: 1.0.0
vitest: 0.23.4_y2hohvmcqnhseytaw4yjcnsnkm
packages/mermaid-example-diagram:
specifiers:
@ -3582,24 +3578,6 @@ packages:
- terser
dev: true
/@vitest/coverage-c8/0.23.4_y2hohvmcqnhseytaw4yjcnsnkm:
resolution: {integrity: sha512-jmD00a5DQH9gu9K+YdvVhcMuv2CzHvU4gCnySS40Ec5hKlXtlCzRfNHl00VnhfuBeaQUmaQYe60BLT413HyDdg==}
dependencies:
c8: 7.12.0
vitest: 0.23.4_y2hohvmcqnhseytaw4yjcnsnkm
transitivePeerDependencies:
- '@edge-runtime/vm'
- '@vitest/browser'
- '@vitest/ui'
- happy-dom
- jsdom
- less
- sass
- stylus
- supports-color
- terser
dev: true
/@vitest/ui/0.23.4:
resolution: {integrity: sha512-lNZVTTrkHThGAwNQ1ah1qCNnm70r7OLB5LCUdSqboStve/1eKTrtt27QfDSSUTG8AVJQzU0eaN/j8UocH+CqfA==}
dependencies:
@ -10753,6 +10731,12 @@ packages:
engines: {node: '>=12.13.0'}
dev: true
/pnpm/7.13.2:
resolution: {integrity: sha512-lOQRBcCWycLK1PB9KptqTd6iyiH7m4GRuS4G2j4b74yDx/XvRXtP/weYz8e0/ia7HX1pMF1vJCF48ssklq0TJQ==}
engines: {node: '>=14.6'}
hasBin: true
dev: true
/posix-character-classes/0.1.1:
resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
engines: {node: '>=0.10.0'}
@ -13187,49 +13171,6 @@ packages:
- terser
dev: true
/vitest/0.23.4_y2hohvmcqnhseytaw4yjcnsnkm:
resolution: {integrity: sha512-iukBNWqQAv8EKDBUNntspLp9SfpaVFbmzmM0sNcnTxASQZMzRw3PsM6DMlsHiI+I6GeO5/sYDg3ecpC+SNFLrQ==}
engines: {node: '>=v14.16.0'}
hasBin: true
peerDependencies:
'@edge-runtime/vm': '*'
'@vitest/browser': '*'
'@vitest/ui': '*'
happy-dom: '*'
jsdom: '*'
peerDependenciesMeta:
'@edge-runtime/vm':
optional: true
'@vitest/browser':
optional: true
'@vitest/ui':
optional: true
happy-dom:
optional: true
jsdom:
optional: true
dependencies:
'@types/chai': 4.3.3
'@types/chai-subset': 1.3.3
'@types/node': 18.7.21
'@vitest/ui': 0.23.4
chai: 4.3.6
debug: 4.3.4
jsdom: 20.0.0
local-pkg: 0.4.2
strip-literal: 0.4.2
tinybench: 2.1.5
tinypool: 0.3.0
tinyspy: 1.0.2
vite: 3.1.3
transitivePeerDependencies:
- less
- sass
- stylus
- supports-color
- terser
dev: true
/vm2/3.9.11:
resolution: {integrity: sha512-PFG8iJRSjvvBdisowQ7iVF580DXb1uCIiGaXgm7tynMR1uTBlv7UJlB1zdv5KJ+Tmq1f0Upnj3fayoEOPpCBKg==}
engines: {node: '>=6.0'}