Skip to content

Commit 5d30d46

Browse files
knsvknsv
authored
Merge pull request #3118 from mermaid-js/3116_paddings
Handle diagram paddings in a consistent way
2 parents 348fa33 + 4dd3d3b commit 5d30d46

File tree

7 files changed

+239
-225
lines changed

7 files changed

+239
-225
lines changed

‎cypress/platform/knsv.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@
230230
nodeSpacing: 10,
231231
curve: 'cardinal',
232232
htmlLabels: true,
233+
useMaxWidth: false,
233234
// defaultRenderer: 'dagre-d3',
234235
},
235236
class: {

‎cypress/platform/knsv3.html‎

Lines changed: 186 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -11,196 +11,224 @@
1111
body {
1212
/* background: rgb(221, 208, 208); */
1313
/* background:#333; */
14-
font-family: 'Arial';
14+
font-family: 'Courier New', Courier, monospace;
1515
/* font-size: 18px !important; */
1616
}
1717
h1 { color: grey;}
1818
.mermaid2 {
1919
display: none;
2020
}
21-
.mermaid svg {
21+
.mermaid {
22+
border: 1px solid red;
23+
font-family: 'Courier New', Courier, monospace;
2224
/* font-size: 18px !important; */
2325
}
2426
</style>
2527
</head>
2628
<body>
2729
<div>info below</div>
28-
<div class="flex">
29-
<div class="mermaid2" style="width: 100%; height: 400px;">
30-
%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%%
31-
erDiagram
32-
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
33-
CUSTOMER ||--o{ ORDER : places
34-
CUSTOMER ||--o{ INVOICE : "liable for"
35-
DELIVERY-ADDRESS ||--o{ ORDER : receives
36-
INVOICE ||--|{ ORDER : covers
37-
ORDER ||--|{ ORDER-ITEM : includes
38-
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
39-
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
30+
<div class="">
31+
<div class="mermaid" style="width: 100%; height: 400px;">
32+
flowchart TB;subgraph "number as labels";1;end;
4033
</div>
41-
<div class="mermaid2" style="width: 50%; height: 400px;">
42-
flowchart TD
43-
A[Christmas] ==> D
44-
A[Christmas] -->|Get money| B(Go shopping)
45-
A[Christmas] ==> C
46-
subgraph T ["Test"]
47-
A
48-
B
49-
C
50-
end
51-
52-
classDef Test fill:#F84E68,stroke:#333,color:white;
53-
class A,T Test
54-
classDef TestSub fill:green;
55-
class T TestSub
56-
linkStyle 0,1 color:orange, stroke: orange;
57-
</div>
58-
<div class="mermaid" style="width: 100%; height: 20%;">
59-
flowchart TB
60-
subgraph S1
61-
sub1 -->sub2
62-
end
63-
subgraph S2
64-
sub4
65-
end
66-
S1 --> S2
67-
sub1 --> sub4
68-
</div>
69-
<div class="mermaid2" style="width: 100%; height: 20%;">
70-
flowchart TB
71-
c1-->a2
72-
subgraph one
73-
a1-->a2
74-
end
75-
subgraph two
76-
b1-->b2
77-
end
78-
subgraph three
79-
c1-->c2
80-
end
81-
one --> two
82-
three --> two
83-
two --> c2
84-
</div>
85-
<div class="mermaid2" style="width: 100%; height: 20%;">
86-
stateDiagram-v2
87-
state S1 {
88-
sub1 -->sub2
89-
}
90-
state S2 {
91-
sub4
92-
}
93-
S1 --> S2
94-
sub1 --> sub4
95-
34+
<div class="mermaid" style="width: 100%; height: 400px;">
35+
flowchart TB;a[APA];
9636
</div>
97-
<div class="mermaid2" style="width: 100%; height: 20%;">
98-
requirementDiagram
99-
requirement test_req {
100-
id: 1
101-
text: the test text.
102-
risk: high
103-
verifymethod: test
104-
}
105-
106-
functionalRequirement test_req2 {
107-
id: 1.1
108-
text: the second test text.
109-
risk: low
110-
verifymethod: inspection
111-
}
112-
113-
performanceRequirement test_req3 {
114-
id: 1.2
115-
text: the third test text.
116-
risk: medium
117-
verifymethod: demonstration
118-
}
37+
<div class="mermaid" style="margin-left:100px;">
38+
graph TD
39+
work --> sleep
40+
sleep --> work
41+
eat --> sleep
42+
work --> eat
43+
</div>
44+
<div class="mermaid" style="margin-left:100px;">
45+
flowchart TD
46+
work --> sleep
47+
sleep --> work
48+
eat --> sleep
49+
work --> eat
50+
</div>
51+
<div class="mermaid" style="">
52+
graph TB
53+
A
54+
B
55+
subgraph foo[Foo SubGraph]
56+
C
57+
D
58+
end
59+
subgraph bar[Bar SubGraph]
60+
E
61+
F
62+
end
63+
G
11964

120-
element test_entity {
121-
type: simulation
122-
}
65+
A-->B
66+
B-->C
67+
C-->D
68+
B-->D
69+
D-->E
70+
E-->A
71+
E-->F
72+
F-->D
73+
F-->G
74+
B-->G
75+
G-->D
12376

124-
element test_entity2 {
125-
type: word doc
126-
docRef: reqs/test_entity
127-
}
77+
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
78+
style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
79+
</div>
80+
<div class="mermaid" style="">
81+
graph TB
82+
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
83+
A
84+
B
85+
subgraph foo[Foo SubGraph]
86+
C
87+
D
88+
end
89+
subgraph bar[Bar SubGraph]
90+
E
91+
F
92+
end
93+
G
12894

95+
A-->B
96+
B-->C
97+
C-->D
98+
B-->D
99+
D-->E
100+
E-->A
101+
E-->F
102+
F-->D
103+
F-->G
104+
B-->G
105+
G-->D
129106

130-
test_entity - satisfies -> test_req2
131-
test_req - traces -> test_req2
132-
test_req - contains -> test_req3
133-
test_req <- copies - test_entity2
134-
</div>
135-
<div class="mermaid2" style="width: 50%; height: 20%;">
107+
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
108+
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
109+
</div>
110+
<div class="mermaid" style="">
111+
graph TD
112+
A[Christmas] ==> D
113+
A[Christmas] -->|Get money| B(Go shopping)
114+
A[Christmas] ==> C
115+
</div>
116+
<div class="mermaid" style="">
117+
graph TD
118+
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
119+
A[Christmas] ==> D
120+
A[Christmas] -->|Get money| B(Go shopping)
121+
A[Christmas] ==> C
122+
</div>
123+
<div class="mermaid" style="">
124+
flowchart TD
125+
A[Christmas] ==> D
126+
A[Christmas] -->|Get money| B(Go shopping)
127+
A[Christmas] ==> C
128+
</div>
129+
<div class="mermaid" style="">
130+
flowchart TD
131+
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
132+
A[Christmas] ==> D
133+
A[Christmas] -->|Get money| B(Go shopping)
134+
A[Christmas] ==> C
135+
</div>
136+
<div class="mermaid" style="">
136137
flowchart LR
137-
classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
138-
Lorem --> Ipsum --> Dolor
139-
class Lorem,Dolor dark
140-
</div>
141-
<div class="mermaid2" style="width: 50%; height: 20%;">
142-
%%{init: {'theme': 'base' }}%%
143-
%%{init2: { 'logLevel': 0, 'theme': 'forest'} }%%
144-
flowchart TD
145-
L1 --- L2
146-
L2 --- C
147-
M1 ---> C
148-
R1 .-> R2
149-
R2 <.-> C
150-
C -->|Label 1| E1
151-
C <-- Label 2 ---> E2
152-
C ----> E3
153-
C <-...-> E4
154-
C ======> E5
155-
</div>
156-
<div class="mermaid2" style="width: 50%; height: 21%;">
138+
a["<strong>Haiya</strong>"]---->b
139+
</div>
140+
<div class="mermaid" style="">
157141
flowchart LR
158-
A[red text] -->|default style| B(blue text)
159-
C([red text]) -->|default style| D[[blue text]]
160-
E[(red text)] -->|default style| F((blue text))
161-
G>red text] -->|default style| H{blue text}
162-
I{{red text}} -->|default style| J[/blue text/]
163-
K[
164-
ed text] -->|default style| L[/blue text]
165-
M[
166-
ed text/] -->|default style| N[blue text]
167-
linkStyle default color:Sienna;
168-
style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
169-
style B stroke:#0000ff,fill:#ccccff,color:#0000ff
170-
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
171-
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
172-
style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
173-
style F stroke:#0000ff,fill:#ccccff,color:#0000ff
174-
style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
175-
style H stroke:#0000ff,fill:#ccccff,color:#0000ff
176-
style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
177-
style J stroke:#0000ff,fill:#ccccff,color:#0000ff
178-
style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
179-
style L stroke:#0000ff,fill:#ccccff,color:#0000ff
180-
style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
181-
style N stroke:#0000ff,fill:#ccccff,color:#0000ff
142+
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
143+
a["<strong>Haiya</strong>"]---->b
144+
</div>
145+
<div class="mermaid" style="">
146+
flowchart TD
147+
A[Christmas] ==> D
148+
A[Christmas] -->|Get money| B(Go shopping)
149+
A[Christmas] ==> C
150+
</div>
151+
<div class="mermaid" style="">
152+
flowchart TD
153+
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
154+
A[Christmas] ==> D
155+
A[Christmas] -->|Get money| B(Go shopping)
156+
A[Christmas] ==> C
157+
</div>
158+
<div class="mermaid" style="">
159+
%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
160+
classDiagram-v2
161+
Class01 <|-- AveryLongClass : Cool
162+
&lt;&lt;interface&gt;&gt; Class01
163+
Class03 *-- Class04
164+
Class05 o-- Class06
165+
Class07 .. Class08
166+
Class09 --> C2 : Where am i?
167+
Class09 --* C3
168+
Class09 --|> Class07
169+
Class12 <|.. Class08
170+
Class11 ..>Class12
171+
Class07 : equals()
172+
Class07 : Object[] elementData
173+
Class01 : size()
174+
Class01 : int chimp
175+
Class01 : int gorilla
176+
Class01 : -int privateChimp
177+
Class01 : +int publicGorilla
178+
Class01 : #int protectedMarmoset
179+
Class08 <--> C2: Cool label
180+
class Class10 {
181+
&lt;&lt;service&gt;&gt;
182+
int id
183+
test()
184+
}
185+
</div>
186+
<div class="mermaid" style="">
187+
classDiagram-v2
188+
Class01 <|-- AveryLongClass : Cool
189+
&lt;&lt;interface&gt;&gt; Class01
190+
Class03 *-- Class04
191+
Class05 o-- Class06
192+
Class07 .. Class08
193+
Class09 --> C2 : Where am i?
194+
Class09 --* C3
195+
Class09 --|> Class07
196+
Class12 <|.. Class08
197+
Class11 ..>Class12
198+
Class07 : equals()
199+
Class07 : Object[] elementData
200+
Class01 : size()
201+
Class01 : int chimp
202+
Class01 : int gorilla
203+
Class01 : -int privateChimp
204+
Class01 : +int publicGorilla
205+
Class01 : #int protectedMarmoset
206+
Class08 <--> C2: Cool label
207+
class Class10 {
208+
&lt;&lt;service&gt;&gt;
209+
int id
210+
test()
211+
}
182212
</div>
183-
184-
185213
<script src="./mermaid.js"></script>
186214
<script>
187215
mermaid.parseError = function (err, hash) {
188216
// console.error('Mermaid error: ', err);
189217
};
190218
mermaid.initialize({
191-
theme: 'neutral',
192-
arrowMarkerAbsolute: true,
219+
// theme: 'neutral',
220+
// arrowMarkerAbsolute: true,
193221
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
194222
logLevel: 0,
195-
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
196-
htmlLabels: true,
223+
flowchart: { curve: 'cardinal', htmlLabels: false },
224+
// htmlLabels: true,
197225
// gantt: { axisFormat: '%m/%d/%Y' },
198-
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
226+
// sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
199227
// sequenceDiagram: { actorMargin: 300 } // deprecated
200228
// fontFamily: '"times", sans-serif',
201-
// fontFamily: 'courier',
202-
fontSize: 18,
203-
curve: 'cardinal',
229+
fontFamily: 'courier',
230+
// fontSize: 18,
231+
// curve: 'cardinal',
204232
securityLevel: 'loose',
205233
// themeVariables: {relationLabelColor: 'red'}
206234
});

‎src/dagre-wrapper/clusters.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const rect = (parent, node) => {
4040

4141
const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width;
4242
if (node.width <= bbox.width + padding) {
43-
node.diff = (bbox.width - node.width) / 2;
43+
node.diff = (bbox.width - node.width) / 2 - node.padding / 2;
4444
} else {
4545
node.diff = -node.padding / 2;
4646
}

0 commit comments

Comments
 (0)