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

#2315 Adding docs and integration tests

This commit is contained in:
Knut Sveidqvist 2021-09-18 08:03:34 +02:00
parent 9c511559ff
commit 9faa5acb21
11 changed files with 2711 additions and 62783 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
cypress/platform/knsv.html
View File

@ -13,6 +13,7 @@
/* background:#333; */
font-family: 'Arial';
/* font-size: 18px !important; */
width: 100%;
}
h1 { color: grey;}
.mermaid2,.mermaid3 {
@ -25,7 +26,7 @@
</head>
<body>
<div>info below</div>
<div class="flex">
<div class="flex flex-wrap">
<div class="mermaid2" style="width: 100%; height: 20%;">
classDiagram
@ -54,7 +55,8 @@ stateDiagram
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
sequenceDiagram
actor Alice as Alice2
%%{init: {'config': {'wrap': true }}}%%
actor Alice as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
actor Bob
participant John as John2
participant Mandy
@ -71,17 +73,20 @@ sequenceDiagram
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
</div>
<div class="mermaid2">
%%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
%%{init: { 'theme':'base', '__proto__': {'polluted': 'asdf'}} }%%
graph LR
A --> B
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
flowchart TD
Link --> b
click Link href "&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29" "Tooltip for
Amet"
<div class="mermaid">
sequenceDiagram
%%{init: {'config': {'wrap': true }}}%%
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
%%{init: {'config': {'wrap': true }}}%%
sequenceDiagram
participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
A->>Bob: Hola
Bob-->A: Pasten !
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
stateDiagram-v2

666
dist/mermaid.core.js vendored
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

64715
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

12
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

5
docs/index.html
View File

@ -7,8 +7,9 @@
<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.12.0/dist/mermaid.min.js"></script>
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<link rel="stylesheet" href="theme.css">
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.12.0/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(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

49
docs/sequenceDiagram.md
View File

@ -36,18 +36,53 @@ appearance by doing the following:
```
sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
participant Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
### Actors
If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
```
sequenceDiagram
participant John
participant Alice
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
```mermaid
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
```
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
```mermaid
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
```
### Aliases

1
src/diagrams/sequence/sequenceRenderer.js
View File

@ -689,6 +689,7 @@ export const draw = function (text, id) {
// Draw actors below diagram
bounds.bumpVerticalPos(conf.boxMargin * 2);
drawActors(diagram, actors, actorKeys, bounds.getVerticalPos());
bounds.bumpVerticalPos(conf.boxMargin*2);
fixLifeLineHeights(diagram, bounds.getVerticalPos());
}

9
src/diagrams/sequence/svgDraw.js
View File

@ -223,7 +223,7 @@ const drawActorTypeParticipant = function (elem, actor, conf) {
rect.class = 'actor';
rect.rx = 3;
rect.ry = 3;
drawRect(g, rect);
const rectElem = drawRect(g, rect);
_drawTextCandidateFunc(conf)(
actor.description,
@ -236,7 +236,10 @@ const drawActorTypeParticipant = function (elem, actor, conf) {
conf
);
return 75;
const bounds = rectElem.node().getBBox();
actor.height = bounds.height;
console.log('Height = ',bounds.height)
return bounds.height;
};
const drawActorTypeActor = function (elem, actor, conf) {
@ -318,7 +321,7 @@ const drawActorTypeActor = function (elem, actor, conf) {
conf
);
return 100;
return actor.height;
};
export const drawActor = function (elem, actor, conf) {