-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSet Diagram.xml
568 lines (568 loc) · 55 KB
/
Set Diagram.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
<mxfile host="app.diagrams.net" modified="2022-07-04T01:43:11.892Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" etag="1H2Tuix9zbD8PhXy274L" version="20.0.4" type="github" pages="7">
<diagram id="fjEw_9uA4kzDT7V9iGNs" name="content-box">
<mxGraphModel dx="946" dy="589" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="lscd2eitOzsEYDgRIWih-26" value="" style="rounded=1;whiteSpace=wrap;html=1;arcSize=5;fillColor=#009DAE;strokeColor=#009DAE;" parent="1" vertex="1">
<mxGeometry x="320" y="360" width="718" height="440" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-27" value="" style="rounded=0;whiteSpace=wrap;html=1;arcSize=5;fillColor=#71DFE7;strokeColor=#71DFE7;" parent="1" vertex="1">
<mxGeometry x="389" y="410" width="580" height="350" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-28" value="margin-top" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="609.01" y="370" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-29" value="" style="rounded=0;whiteSpace=wrap;html=1;arcSize=5;fillColor=#C2FFF9;strokeColor=#C2FFF9;" parent="1" vertex="1">
<mxGeometry x="463.5" y="450" width="431" height="275" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-30" value="" style="rounded=0;whiteSpace=wrap;html=1;arcSize=5;fillColor=#FFE652;strokeColor=#FFE652;" parent="1" vertex="1">
<mxGeometry x="506.88" y="490" width="344.25" height="198.75" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-31" value="border-top" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="609" y="420" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-32" value="padding-top" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#004C99;labelBackgroundColor=none;" parent="1" vertex="1">
<mxGeometry x="609" y="460" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-33" value="content" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="609" y="570" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-34" value="padding-right" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#004C99;labelBackgroundColor=none;rotation=90;" parent="1" vertex="1">
<mxGeometry x="800" y="570" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-35" value="padding-left" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#004C99;labelBackgroundColor=none;rotation=-90;" parent="1" vertex="1">
<mxGeometry x="420" y="570" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-36" value="padding-bottom" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#004C99;labelBackgroundColor=none;" parent="1" vertex="1">
<mxGeometry x="603.5" y="700" width="151" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-37" value="border-right" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;rotation=90;" parent="1" vertex="1">
<mxGeometry x="860" y="570" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-38" value="border-bottom" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="609" y="730" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-39" value="border-left" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;rotation=-90;" parent="1" vertex="1">
<mxGeometry x="360" y="579.38" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-40" value="margin-bottom" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;" parent="1" vertex="1">
<mxGeometry x="609" y="770" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-41" value="margin-left" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;rotation=-90;" parent="1" vertex="1">
<mxGeometry x="290" y="579.38" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-42" value="margin-right" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;rotation=-90;" parent="1" vertex="1">
<mxGeometry x="930" y="570" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-43" value="" style="endArrow=none;dashed=1;html=1;fontSize=20;fontColor=#004C99;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="230" y="491" as="sourcePoint" />
<mxPoint x="505.88" y="491" as="targetPoint" />
<Array as="points" />
</mxGeometry>
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-44" value="" style="endArrow=none;dashed=1;html=1;fontSize=20;fontColor=#004C99;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="230" y="689" as="sourcePoint" />
<mxPoint x="506.88" y="688.75" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-45" value="" style="endArrow=classic;startArrow=classic;html=1;fontSize=20;fontColor=#004C99;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="250" y="690" as="sourcePoint" />
<mxPoint x="250" y="490" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-46" value="height" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;fontSize=20;fontColor=#004C99;" parent="1" vertex="1">
<mxGeometry x="200" y="579.38" width="40" height="20" as="geometry" />
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-47" value="" style="endArrow=none;dashed=1;html=1;fontSize=20;fontColor=#004C99;entryX=0;entryY=1;entryDx=0;entryDy=0;" parent="1" target="lscd2eitOzsEYDgRIWih-30" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="507" y="900" as="sourcePoint" />
<mxPoint x="390" y="760" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-48" value="" style="endArrow=none;dashed=1;html=1;fontSize=20;fontColor=#004C99;entryX=1;entryY=1;entryDx=0;entryDy=0;" parent="1" target="lscd2eitOzsEYDgRIWih-30" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="851" y="900" as="sourcePoint" />
<mxPoint x="869.63" y="700" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-49" value="" style="endArrow=classic;startArrow=classic;html=1;fontSize=20;fontColor=#004C99;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="508" y="870" as="sourcePoint" />
<mxPoint x="849" y="870" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="lscd2eitOzsEYDgRIWih-50" value="width" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;fontSize=20;fontColor=#004C99;" parent="1" vertex="1">
<mxGeometry x="659.01" y="880" width="40" height="20" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
<diagram id="ZXSmRgn5P0sur2Ndf5Bi" name="border-box">
<mxGraphModel dx="1426" dy="769" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="2" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-0" />
<mxCell id="vl2eBkoOd_O1jgmpDhsR-1" parent="vl2eBkoOd_O1jgmpDhsR-0" />
<mxCell id="vl2eBkoOd_O1jgmpDhsR-2" value="" style="rounded=1;whiteSpace=wrap;html=1;arcSize=5;fillColor=#009DAE;strokeColor=#009DAE;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="420" y="590" width="718" height="440" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-3" value="" style="rounded=0;whiteSpace=wrap;html=1;arcSize=5;fillColor=#71DFE7;strokeColor=#71DFE7;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="489" y="640" width="580" height="350" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-4" value="margin-top" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="709.01" y="600" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-6" value="" style="rounded=1;whiteSpace=wrap;html=1;arcSize=5;fillColor=#C2FFF9;strokeColor=#C2FFF9;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="563.5" y="680" width="431" height="275" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-7" value="" style="rounded=1;whiteSpace=wrap;html=1;arcSize=5;fillColor=#FFE652;strokeColor=#FFE652;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="606.88" y="720" width="344.25" height="198.75" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-9" value="border-top" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="709" y="650" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-10" value="padding-top" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#004C99;labelBackgroundColor=none;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="709" y="690" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-14" value="content" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="709" y="800" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-16" value="padding-right" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#004C99;labelBackgroundColor=none;rotation=90;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="900" y="800" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-17" value="padding-left" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#004C99;labelBackgroundColor=none;rotation=-90;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="520" y="800" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-18" value="padding-bottom" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#004C99;labelBackgroundColor=none;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="703.5" y="930" width="151" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-19" value="border-right" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;rotation=90;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="960" y="800" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-20" value="border-bottom" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="709" y="960" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-21" value="border-left" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;rotation=-90;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="460" y="809.38" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-22" value="margin-bottom" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="709" y="1000" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-23" value="margin-left" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;rotation=-90;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="390" y="809.38" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-24" value="margin-right" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontColor=#FFFFFF;rotation=-90;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="1030" y="800" width="140" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-25" value="" style="endArrow=none;dashed=1;html=1;fontSize=20;fontColor=#004C99;entryX=0;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="vl2eBkoOd_O1jgmpDhsR-1" target="vl2eBkoOd_O1jgmpDhsR-3">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="320" y="640" as="sourcePoint" />
<mxPoint x="550" y="690" as="targetPoint" />
<Array as="points" />
</mxGeometry>
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-26" value="" style="endArrow=none;dashed=1;html=1;fontSize=20;fontColor=#004C99;" edge="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="320" y="990" as="sourcePoint" />
<mxPoint x="490" y="991" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-27" value="" style="endArrow=classic;startArrow=classic;html=1;fontSize=20;fontColor=#004C99;" edge="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="350" y="980" as="sourcePoint" />
<mxPoint x="350" y="650" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-28" value="height" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;fontSize=20;fontColor=#004C99;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="290" y="807.5" width="40" height="20" as="geometry" />
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-30" value="" style="endArrow=none;dashed=1;html=1;fontSize=20;fontColor=#004C99;" edge="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="490" y="1120" as="sourcePoint" />
<mxPoint x="490" y="990" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-31" value="" style="endArrow=none;dashed=1;html=1;fontSize=20;fontColor=#004C99;" edge="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="1071" y="1110" as="sourcePoint" />
<mxPoint x="1071" y="990" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-32" value="" style="endArrow=classic;startArrow=classic;html=1;fontSize=20;fontColor=#004C99;" edge="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="489" y="1100" as="sourcePoint" />
<mxPoint x="1070" y="1100" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="vl2eBkoOd_O1jgmpDhsR-33" value="width" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;fontSize=20;fontColor=#004C99;" vertex="1" parent="vl2eBkoOd_O1jgmpDhsR-1">
<mxGeometry x="759" y="1110" width="40" height="20" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
<diagram id="LvpnSw728rtJbHh5pVcb" name="Page-3">
<mxGraphModel dx="1426" dy="769" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="eANexLvoJaMFXlaof0Jx-0" />
<mxCell id="eANexLvoJaMFXlaof0Jx-1" parent="eANexLvoJaMFXlaof0Jx-0" />
<mxCell id="eANexLvoJaMFXlaof0Jx-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;fontColor=#009900;" edge="1" parent="eANexLvoJaMFXlaof0Jx-1" source="eANexLvoJaMFXlaof0Jx-2" target="eANexLvoJaMFXlaof0Jx-3">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="eANexLvoJaMFXlaof0Jx-2" value="<b>vm.message = 'update'<br><br>Vue.nextTick(callback)<br><br><br><div style="text-align: left"><b><font color="#b3b3b3">// 还是更新前的数据</font></b></div>console.log(vm.$el.message)</b>" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="eANexLvoJaMFXlaof0Jx-1">
<mxGeometry x="320" y="30" width="180" height="130" as="geometry" />
</mxCell>
<mxCell id="eANexLvoJaMFXlaof0Jx-6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;fontColor=#000000;" edge="1" parent="eANexLvoJaMFXlaof0Jx-1" source="eANexLvoJaMFXlaof0Jx-3" target="eANexLvoJaMFXlaof0Jx-5">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="eANexLvoJaMFXlaof0Jx-3" value="<font color="#009900"><b>DOM 更新</b></font>" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="eANexLvoJaMFXlaof0Jx-1">
<mxGeometry x="320" y="220" width="180" height="60" as="geometry" />
</mxCell>
<mxCell id="eANexLvoJaMFXlaof0Jx-5" value="<font color="#000000"><b>在 callback 中<br>打印的 message 才是更新后的</b></font>" style="rounded=1;whiteSpace=wrap;html=1;fontColor=#009900;" vertex="1" parent="eANexLvoJaMFXlaof0Jx-1">
<mxGeometry x="320" y="320" width="180" height="50" as="geometry" />
</mxCell>
<mxCell id="eANexLvoJaMFXlaof0Jx-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;fontColor=#B3B3B3;" edge="1" parent="eANexLvoJaMFXlaof0Jx-1" source="eANexLvoJaMFXlaof0Jx-11" target="eANexLvoJaMFXlaof0Jx-5">
<mxGeometry relative="1" as="geometry">
<Array as="points">
<mxPoint x="540" y="81" />
<mxPoint x="540" y="345" />
</Array>
</mxGeometry>
</mxCell>
<mxCell id="eANexLvoJaMFXlaof0Jx-11" value="" style="rounded=0;whiteSpace=wrap;html=1;fontColor=#000000;fillOpacity=0;strokeColor=#FF0000;strokeWidth=2;" vertex="1" parent="eANexLvoJaMFXlaof0Jx-1">
<mxGeometry x="340" y="66" width="140" height="30" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
<diagram id="mbSOWGX5s0w1O19KPhhF" name="flex-axis">
<mxGraphModel dx="1426" dy="769" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-0" />
<mxCell id="-81jpVHZFn7-hZ7h6BDx-1" parent="-81jpVHZFn7-hZ7h6BDx-0" />
<mxCell id="-81jpVHZFn7-hZ7h6BDx-2" value="" style="rounded=1;whiteSpace=wrap;html=1;arcSize=7;labelBackgroundColor=#F7EFC0;labelBorderColor=none;textOpacity=0;fillColor=#F7EFC0;sketch=0;" parent="-81jpVHZFn7-hZ7h6BDx-1" vertex="1">
<mxGeometry x="70" y="160" width="700" height="400" as="geometry" />
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-3" value="flex item" style="rounded=1;whiteSpace=wrap;html=1;arcSize=7;fontStyle=1;fillColor=#D1E6FF;" parent="-81jpVHZFn7-hZ7h6BDx-1" vertex="1">
<mxGeometry x="100" y="310" width="160" height="140" as="geometry" />
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-4" value="flex item" style="rounded=1;whiteSpace=wrap;html=1;arcSize=7;fontStyle=1;fillColor=#D1E6FF;" parent="-81jpVHZFn7-hZ7h6BDx-1" vertex="1">
<mxGeometry x="570" y="310" width="160" height="140" as="geometry" />
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-5" value="flex item" style="rounded=1;whiteSpace=wrap;html=1;arcSize=7;fontStyle=1;fillColor=#D1E6FF;" parent="-81jpVHZFn7-hZ7h6BDx-1" vertex="1">
<mxGeometry x="333.5" y="310" width="160" height="140" as="geometry" />
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-6" value="" style="endArrow=classicThin;dashed=1;html=1;dashPattern=1 3;strokeWidth=2;rounded=0;strokeColor=#FF3333;startArrow=classicThin;startFill=1;endFill=1;" parent="-81jpVHZFn7-hZ7h6BDx-1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="90" y="230" as="sourcePoint" />
<mxPoint x="750" y="230" as="targetPoint" />
<Array as="points" />
</mxGeometry>
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-8" value="main axis" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontColor=#FF3333;labelBackgroundColor=none;fontStyle=1" parent="-81jpVHZFn7-hZ7h6BDx-6" vertex="1" connectable="0">
<mxGeometry x="0.1" y="1" relative="1" as="geometry">
<mxPoint x="-233" y="-9" as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-10" value="" style="endArrow=classicThin;dashed=1;html=1;dashPattern=1 3;strokeWidth=2;rounded=0;fontColor=#FF3333;strokeColor=#FF3333;startArrow=classicThin;startFill=1;endFill=1;" parent="-81jpVHZFn7-hZ7h6BDx-1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="530" y="520" as="sourcePoint" />
<mxPoint x="530" y="170" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-11" value="cross axis" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=12;fontFamily=Helvetica;fontColor=#FF3333;labelBackgroundColor=none;horizontal=1;fontStyle=1" parent="-81jpVHZFn7-hZ7h6BDx-10" vertex="1" connectable="0">
<mxGeometry x="0.1257" relative="1" as="geometry">
<mxPoint x="-36" y="-33" as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;dashed=1;fontFamily=Helvetica;fontSize=12;fontColor=#FF3333;startArrow=none;startFill=0;endArrow=oval;endFill=1;strokeColor=#FF3333;" parent="-81jpVHZFn7-hZ7h6BDx-1" source="-81jpVHZFn7-hZ7h6BDx-12" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="410" y="170" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-12" value="cross start" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;labelBorderColor=none;sketch=0;fontFamily=Helvetica;fontSize=12;fontColor=#FF3333;fontStyle=1" parent="-81jpVHZFn7-hZ7h6BDx-1" vertex="1">
<mxGeometry x="370" y="190" width="80" height="30" as="geometry" />
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;dashed=1;fontFamily=Helvetica;fontSize=12;fontColor=#FF3333;startArrow=none;startFill=0;endArrow=oval;endFill=1;strokeColor=#FF3333;" parent="-81jpVHZFn7-hZ7h6BDx-1" source="-81jpVHZFn7-hZ7h6BDx-13" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="410" y="550" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-13" value="cross end" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;labelBorderColor=none;sketch=0;fontFamily=Helvetica;fontSize=12;fontColor=#FF3333;fontStyle=1" parent="-81jpVHZFn7-hZ7h6BDx-1" vertex="1">
<mxGeometry x="380" y="490" width="60" height="30" as="geometry" />
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;dashed=1;fontFamily=Helvetica;fontSize=12;fontColor=#FF3333;startArrow=none;startFill=0;endArrow=oval;endFill=1;strokeColor=#FF3333;" parent="-81jpVHZFn7-hZ7h6BDx-1" source="-81jpVHZFn7-hZ7h6BDx-14" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="80" y="515" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-14" value="main start" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;labelBorderColor=none;sketch=0;fontFamily=Helvetica;fontSize=12;fontColor=#FF3333;fontStyle=1" parent="-81jpVHZFn7-hZ7h6BDx-1" vertex="1">
<mxGeometry x="130" y="500" width="60" height="30" as="geometry" />
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;fontFamily=Helvetica;fontSize=12;fontColor=#FF3333;startArrow=none;startFill=0;endArrow=oval;endFill=1;strokeColor=#FF3333;dashed=1;" parent="-81jpVHZFn7-hZ7h6BDx-1" source="-81jpVHZFn7-hZ7h6BDx-15" edge="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="760" y="515" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-15" value="main end" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;labelBorderColor=none;sketch=0;fontFamily=Helvetica;fontSize=12;fontColor=#FF3333;fontStyle=1" parent="-81jpVHZFn7-hZ7h6BDx-1" vertex="1">
<mxGeometry x="630" y="500" width="60" height="30" as="geometry" />
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-25" value="" style="endArrow=classicThin;dashed=1;html=1;dashPattern=1 3;strokeWidth=2;rounded=0;fontFamily=Helvetica;fontSize=12;fontColor=#FF3333;strokeColor=#FF3333;startArrow=classicThin;startFill=1;endFill=1;" parent="-81jpVHZFn7-hZ7h6BDx-1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="348.5" y="420" as="sourcePoint" />
<mxPoint x="478.5" y="420" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-26" value="main size" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=12;fontFamily=Helvetica;fontColor=#FF3333;labelBackgroundColor=none;fontStyle=1" parent="-81jpVHZFn7-hZ7h6BDx-25" vertex="1" connectable="0">
<mxGeometry x="-0.0923" y="2" relative="1" as="geometry">
<mxPoint x="5" y="-8" as="offset" />
</mxGeometry>
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-27" value="" style="endArrow=classicThin;dashed=1;html=1;dashPattern=1 3;strokeWidth=2;rounded=0;fontFamily=Helvetica;fontSize=12;fontColor=#FF3333;strokeColor=#FF3333;startArrow=classicThin;startFill=1;endFill=1;" parent="-81jpVHZFn7-hZ7h6BDx-1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="460" y="320" as="sourcePoint" />
<mxPoint x="460" y="440" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="-81jpVHZFn7-hZ7h6BDx-28" value="cross size" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];fontSize=12;fontFamily=Helvetica;fontColor=#FF3333;labelBackgroundColor=none;fontStyle=1" parent="-81jpVHZFn7-hZ7h6BDx-27" vertex="1" connectable="0">
<mxGeometry x="-0.0923" y="2" relative="1" as="geometry">
<mxPoint x="-48" y="-44" as="offset" />
</mxGeometry>
</mxCell>
</root>
</mxGraphModel>
</diagram>
<diagram id="anYLmDTqqL9Qvt3Xh4Nl" name="flex: justify-content">
<mxGraphModel dx="1426" dy="769" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="1654" math="0" shadow="0">
<root>
<mxCell id="pKMdbGygeFVv2uBguMwx-0" />
<mxCell id="pKMdbGygeFVv2uBguMwx-1" parent="pKMdbGygeFVv2uBguMwx-0" />
<mxCell id="pKMdbGygeFVv2uBguMwx-2" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#91CAEE;strokeColor=none;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="51" y="110" width="310" height="150" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-3" value="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="51" y="110" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-5" value="2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="110" y="110" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-6" value="3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="170" y="110" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-8" value="<h5 style="line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px; font-size: 15px; color: rgb(40, 45, 54);">&nbsp;justify-content：flex-start</h5>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="10" y="60" width="270" height="30" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-13" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#91CAEE;strokeColor=none;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="415" y="110" width="310" height="150" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-14" value="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="546" y="110" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-15" value="2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="606" y="110" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-16" value="3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="665" y="110" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-17" value="<h5 style="line-height: 1.5 ; margin-top: 35px ; margin-bottom: 10px ; padding-bottom: 5px ; font-size: 15px ; color: rgb(40 , 45 , 54)">&nbsp;justify-content：flex-end</h5>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="370" y="60" width="270" height="30" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-18" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#91CAEE;strokeColor=none;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="770" y="110" width="310" height="150" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-19" value="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="836" y="110" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-20" value="2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="895" y="110" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-21" value="3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="954" y="110" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-22" value="<h5 style="line-height: 1.5 ; margin-top: 35px ; margin-bottom: 10px ; padding-bottom: 5px ; font-size: 15px ; color: rgb(40 , 45 , 54)">&nbsp;justify-content：center</h5>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="720" y="60" width="270" height="30" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-23" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#91CAEE;strokeColor=none;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="50" y="360" width="310" height="150" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-24" value="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="80" y="360" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-25" value="2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="175" y="360" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-26" value="3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="280" y="360" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-27" value="<h5 style="line-height: 1.5 ; margin-top: 35px ; margin-bottom: 10px ; padding-bottom: 5px ; font-size: 15px ; color: rgb(40 , 45 , 54)">&nbsp;justify-content：space-around</h5>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="25" y="310" width="270" height="30" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-28" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#91CAEE;strokeColor=none;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="415" y="360" width="310" height="150" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-29" value="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="415" y="360" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-30" value="2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="545" y="360" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-31" value="3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="665" y="360" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-32" value="<h5 style="line-height: 1.5 ; margin-top: 35px ; margin-bottom: 10px ; padding-bottom: 5px ; font-size: 15px ; color: rgb(40 , 45 , 54)">&nbsp;justify-content：space-between</h5>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="390" y="310" width="270" height="30" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-33" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#91CAEE;strokeColor=none;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="775" y="360" width="310" height="150" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-34" value="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="809" y="360" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-35" value="2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="904" y="360" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-36" value="3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="999" y="360" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="pKMdbGygeFVv2uBguMwx-37" value="<h5 style="line-height: 1.5 ; margin-top: 35px ; margin-bottom: 10px ; padding-bottom: 5px ; font-size: 15px ; color: rgb(40 , 45 , 54)">&nbsp;justify-content：space-evenly</h5>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;" vertex="1" parent="pKMdbGygeFVv2uBguMwx-1">
<mxGeometry x="750" y="310" width="270" height="30" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
<diagram id="q4LpTS9AETot6nkvCV6K" name="flex: align-items">
<mxGraphModel dx="2115" dy="589" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="1654" math="0" shadow="0">
<root>
<mxCell id="aSeheieILH0j9mZPWe1s-0" />
<mxCell id="aSeheieILH0j9mZPWe1s-1" parent="aSeheieILH0j9mZPWe1s-0" />
<mxCell id="VkRSDyy8R5aDTrTgD8d8-0" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#91CAEE;strokeColor=none;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="51" y="110" width="310" height="150" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-1" value="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="51" y="110" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-2" value="2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="110" y="110" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-3" value="3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="169" y="110" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-4" value="<h5 style="line-height: 1.5 ; margin-top: 35px ; margin-bottom: 10px ; padding-bottom: 5px ; font-size: 15px ; color: rgb(40 , 45 , 54)">&nbsp;align-item：flex-start</h5>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="-10" y="60" width="270" height="30" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-5" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#91CAEE;strokeColor=none;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="415" y="110" width="310" height="150" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-6" value="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="415" y="200" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-7" value="2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="475" y="200" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-8" value="3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="534" y="200" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-9" value="<h5 style="line-height: 1.5 ; margin-top: 35px ; margin-bottom: 10px ; padding-bottom: 5px ; font-size: 15px ; color: rgb(40 , 45 , 54)">align-item：flex-end</h5>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="360" y="60" width="270" height="30" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-10" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#91CAEE;strokeColor=none;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="770" y="110" width="310" height="150" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-11" value="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="770" y="160" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-12" value="2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="830" y="160" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-13" value="3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="889" y="160" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-14" value="<h5 style="line-height: 1.5 ; margin-top: 35px ; margin-bottom: 10px ; padding-bottom: 5px ; font-size: 15px ; color: rgb(40 , 45 , 54)">align-item：center</h5>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="700" y="60" width="270" height="30" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-15" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#91CAEE;strokeColor=none;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="50" y="360" width="310" height="150" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-16" value="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="51" y="385" width="60" height="100" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-17" value="2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="111" y="385" width="60" height="60" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-18" value="<br>3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="169" y="370" width="61" height="75" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-19" value="<h5 style="line-height: 1.5 ; margin-top: 35px ; margin-bottom: 10px ; padding-bottom: 5px ; font-size: 15px ; color: rgb(40 , 45 , 54)">&nbsp;align-item：baseline</h5>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="-10" y="310" width="270" height="30" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-20" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#91CAEE;strokeColor=none;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="415" y="360" width="310" height="150" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-21" value="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="415" y="360" width="60" height="150" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-22" value="2" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="474" y="360" width="60" height="150" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-23" value="3" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#F8C0CE;strokeColor=none;verticalAlign=top;align=left;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="533" y="360" width="60" height="150" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-24" value="<h5 style="line-height: 1.5 ; margin-top: 35px ; margin-bottom: 10px ; padding-bottom: 5px ; font-size: 15px ; color: rgb(40 , 45 , 54)">&nbsp;align-item：stretch</h5>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;" parent="aSeheieILH0j9mZPWe1s-1" vertex="1">
<mxGeometry x="350" y="310" width="270" height="30" as="geometry" />
</mxCell>
<mxCell id="VkRSDyy8R5aDTrTgD8d8-31" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" parent="aSeheieILH0j9mZPWe1s-1" source="VkRSDyy8R5aDTrTgD8d8-14" target="VkRSDyy8R5aDTrTgD8d8-14" edge="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
<diagram id="efisXveMRmIB01Km6aW9" name="OCP">
<mxGraphModel dx="946" dy="589" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="legnGpFswzILwwjsHH3N-1" value="开闭原则" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#7F00FF;strokeColor=none;fontStyle=1;fontColor=#FFFFFF;" vertex="1" parent="1">
<mxGeometry x="320" y="170" width="100" height="100" as="geometry" />
</mxCell>
<mxCell id="legnGpFswzILwwjsHH3N-10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontColor=#FFFFFF;strokeColor=#CCCCFF;" edge="1" parent="1" source="legnGpFswzILwwjsHH3N-3" target="legnGpFswzILwwjsHH3N-1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="legnGpFswzILwwjsHH3N-3" value="里式替换原则" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#6666FF;strokeColor=none;fontStyle=1;fontColor=#FFFFFF;" vertex="1" parent="1">
<mxGeometry x="150" y="175" width="90" height="90" as="geometry" />
</mxCell>
<mxCell id="legnGpFswzILwwjsHH3N-15" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0;exitDx=0;exitDy=0;entryX=0;entryY=1;entryDx=0;entryDy=0;fontColor=#FFFFFF;strokeColor=#CCCCFF;" edge="1" parent="1" source="legnGpFswzILwwjsHH3N-5" target="legnGpFswzILwwjsHH3N-1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="legnGpFswzILwwjsHH3N-5" value="依赖倒置原则" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#6666FF;strokeColor=none;fontStyle=1;fontColor=#FFFFFF;" vertex="1" parent="1">
<mxGeometry x="230" y="320" width="90" height="90" as="geometry" />
</mxCell>
<mxCell id="legnGpFswzILwwjsHH3N-14" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0;exitDx=0;exitDy=0;entryX=1;entryY=1;entryDx=0;entryDy=0;fontColor=#FFFFFF;strokeColor=#CCCCFF;" edge="1" parent="1" source="legnGpFswzILwwjsHH3N-6" target="legnGpFswzILwwjsHH3N-1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="legnGpFswzILwwjsHH3N-6" value="单一职责原则" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#6666FF;strokeColor=none;fontStyle=1;fontColor=#FFFFFF;" vertex="1" parent="1">
<mxGeometry x="420" y="320" width="90" height="90" as="geometry" />
</mxCell>
<mxCell id="legnGpFswzILwwjsHH3N-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;fontColor=#FFFFFF;strokeColor=#CCCCFF;" edge="1" parent="1" source="legnGpFswzILwwjsHH3N-7" target="legnGpFswzILwwjsHH3N-1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="legnGpFswzILwwjsHH3N-7" value="接口隔离原则" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#6666FF;strokeColor=none;fontStyle=1;fontColor=#FFFFFF;" vertex="1" parent="1">
<mxGeometry x="500" y="175" width="90" height="90" as="geometry" />
</mxCell>
<mxCell id="legnGpFswzILwwjsHH3N-12" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=1;exitDx=0;exitDy=0;entryX=1;entryY=0;entryDx=0;entryDy=0;fontColor=#FFFFFF;strokeColor=#CCCCFF;" edge="1" parent="1" source="legnGpFswzILwwjsHH3N-8" target="legnGpFswzILwwjsHH3N-1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="legnGpFswzILwwjsHH3N-8" value="迪米特法则" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#6666FF;strokeColor=none;fontStyle=1;fontColor=#FFFFFF;" vertex="1" parent="1">
<mxGeometry x="420" y="50" width="90" height="90" as="geometry" />
</mxCell>
<mxCell id="legnGpFswzILwwjsHH3N-11" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0;entryDx=0;entryDy=0;fontColor=#FFFFFF;strokeColor=#CCCCFF;" edge="1" parent="1" source="legnGpFswzILwwjsHH3N-9" target="legnGpFswzILwwjsHH3N-1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="legnGpFswzILwwjsHH3N-9" value="合成复用原则" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#6666FF;strokeColor=none;fontStyle=1;fontColor=#FFFFFF;" vertex="1" parent="1">
<mxGeometry x="230" y="50" width="90" height="90" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>