GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' into feature/Issue-1465_Class_migration

Browse Source
This commit is contained in:
Ashish Jain 2020-07-22 19:33:20 +02:00
commit c9d4cac3ff
12 changed files with 24774 additions and 5458 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
cypress/platform/current.html
View File

@ -17,110 +17,70 @@
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.someClass > * {
/* fill: red !important; */
}
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="flex flex-wrap"> <div class="flex">
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 0, 'theme': 'forest'} }%% flowchart BT
pie title Sports in Sweden subgraph two
"Bandy" : 40 b1
"Ice-Hockey" : 80 end
"Football" : 90 subgraph three
c1-->c2
end
c1 --apa apa apa--> b1
two --> c2
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 200px;">
%%{init: { 'logLevel': 0, 'theme': 'default'} }%% sequenceDiagram
graph TD Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
A[Christmas] -->|Get money| B(Go shopping) Bob->>Alice: I'm short though
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 200px;">
%%{init: { 'logLevel': 1, 'theme': 'forest'} }%% %%{init: {'securityLevel': 'loose'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} 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?}}
B --> G[/Another/] C -->|One| D[Laptop]
C ==>|One| D[Laptop] C -->|Two| E[iPhone]
C -->|Two| E[iPhone] C -->|Three| F[Car]
C -->|Three| F[fa:fa-car Car] click A "index.html#link-clicked" "link test"
subgraph section click B callback "click test"
C classDef someclass fill:#f96;
D class A someclass;
E class C someclass;
F </div>
G <div class="mermaid2" style="width: 50%; height: 200px;">
end
flowchart BT
subgraph a
b1 -- ok --> b2
end
a -- sert --> c
c --> d
b1 --> d
a --asd123 --> d
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
stateDiagram-v2
state A {
B1 --> B2: ok
}
A --> C: sert
C --> D
B1 --> D
A --> D: asd123
</div>
</div> </div>
<div class="mermaid" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
graph TD classDiagram
A[Christmas] -->|Get money| B(Go shopping) Customer "1" --> "*" Ticket
B --> C{Let me think} Student "1" --> "1..*" Course
B --> G[/Another/] Galaxy --> "many" Star : Contains
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div> </div>
<div class="mermaid2" style="background: #3f3f3f; width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid2" style="background: #3f3f3f; width: 50%; height: 20%;">
%%{init: { 'logLevel': 1} }%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
</div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
@ -128,20 +88,17 @@ graph TD
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
theme: 'forest',
// theme: 'dark',
// theme: 'dark', // theme: 'dark',
// arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0, logLevel: 0,
flowchart: { useMaxWidth: true }, flowchart: { curve: 'cardinal', "htmlLabels": false },
graph: { curve: 'cardinal', "htmlLabels": false },
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true }, sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif', fontFamily: '"arial", sans-serif',
curve: 'cardinal', curve: 'cardinal',
securityLevel: 'strict', securityLevel: 'strict'
}); });
function callback(){alert('It worked');} function callback(){alert('It worked');}
</script> </script>

1420
dist/mermaid.core.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.core.js.map vendored
View File

File diff suppressed because one or more lines are too long

28604
dist/mermaid.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.js.map vendored
View File

File diff suppressed because one or more lines are too long

27
dist/mermaid.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
docs/index.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, 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="//unpkg.com/docsify/lib/themes/vue.css"> -->
<link rel="stylesheet" href="theme.css"> <link rel="stylesheet" href="theme.css">
<script src="//cdn.jsdelivr.net/npm/mermaid@8.5.2/dist/mermaid.min.js"></script> <script src="//cdn.jsdelivr.net/npm/mermaid@8.6.2/dist/mermaid.min.js"></script>
<!-- <script src="http://localhost:9000/mermaid.js"></script> --> <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@ -58,7 +58,7 @@
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
const conf = { logLevel:4, startOnLoad: false, themeCSS:'.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }' }; const conf = { logLevel:4, startOnLoad: false, themeCSS:'.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }' };
if(isDarkMode) conf.theme = 'dark'; if(isDarkMode && false) conf.theme = 'dark';
mermaid.initialize(conf); mermaid.initialize(conf);
</script> </script>

6
docs/theme.css
View File

File diff suppressed because one or more lines are too long

10
docs/theme_themed.css Normal file
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "mermaid", "name": "mermaid",
"version": "8.6.0", "version": "8.6.2",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js", "main": "dist/mermaid.core.js",
"keywords": [ "keywords": [

2
src/utils.js
View File

@ -346,7 +346,7 @@ const calcCardinalityPosition = (isRelationTypePresent, points, initialPosition)
const distanceToCardinalityPoint = 25; const distanceToCardinalityPoint = 25;
let remainingDistance = distanceToCardinalityPoint; let remainingDistance = distanceToCardinalityPoint;
let center = { x: 0, y: 0 }; let center;
prevPoint = undefined; prevPoint = undefined;
points.forEach(point => { points.forEach(point => {
if (prevPoint && !center) { if (prevPoint && !center) {