luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2041 from alixander/seq-bounding-box-improve

Browse source 
d2sequence: fix bounding box of sequence diagrams
This commit is contained in:
Alexander Wang 2024-08-03 14:07:08 -06:00 committed by GitHub
commit 9b83a0f0d9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 741 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
d2layouts/d2sequence/sequence_diagram.go
View file

@ -646,7 +646,19 @@ func (sd *sequenceDiagram) isActor(obj *d2graph.Object) bool {
func (sd *sequenceDiagram) getWidth() float64 { func (sd *sequenceDiagram) getWidth() float64 {
// the layout is always placed starting at 0, so the width is just the last actor // the layout is always placed starting at 0, so the width is just the last actor
lastActor := sd.actors[len(sd.actors)-1] lastActor := sd.actors[len(sd.actors)-1]
return lastActor.TopLeft.X + lastActor.Width rightmost := lastActor.TopLeft.X + lastActor.Width
for _, m := range sd.messages {
for _, p := range m.Route {
rightmost = math.Max(rightmost, p.X)
}
// Self referential messages may have labels that extend further
if m.Src == m.Dst {
rightmost = math.Max(rightmost, m.Route[1].X+float64(m.LabelDimensions.Width)/2.)
}
}
return rightmost
} }
func (sd *sequenceDiagram) getHeight() float64 { func (sd *sequenceDiagram) getHeight() float64 {

256
e2etests/testdata/txtar/sequence-bounding-box/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,256 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "backend",
"type": "rectangle",
"pos": {
"x": 10,
"y": 20
},
"width": 263,
"height": 406,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B4",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "backend",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 98,
"labelHeight": 36,
"labelPosition": "OUTSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "backend.client",
"type": "sequence_diagram",
"pos": {
"x": 40,
"y": 50
},
"width": 203,
"height": 346,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "client",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 55,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "backend.client.client",
"type": "rectangle",
"pos": {
"x": 52,
"y": 133
},
"width": 100,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "client",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 38,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 3
}
],
"connections": [
{
"id": "backend.client.(client -> client)[0]",
"src": "backend.client.client",
"srcArrow": "none",
"dst": "backend.client.client",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "BO_ID -> D2_ID",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 99,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 102,
"y": 269
},
{
"x": 182,
"y": 269
},
{
"x": 182,
"y": 314
},
{
"x": 102,
"y": 314
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(backend.client.client -- )[0]",
"src": "backend.client.client",
"srcArrow": "none",
"dst": "client-lifeline-end-2119091193",
"dstArrow": "none",
"opacity": 1,
"strokeDash": 6,
"strokeWidth": 2,
"stroke": "B2",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 102,
"y": 199
},
{
"x": 102,
"y": 384
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
}
],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

105
e2etests/testdata/txtar/sequence-bounding-box/dagre/sketch.exp.svg vendored Normal file
View file

@ -0,0 +1,105 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.6-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 265 448"><svg id="d2-svg" class="d2-1129939561" width="265" height="448" viewBox="9 -21 265 448"><rect x="9.000000" y="-21.000000" width="265.000000" height="448.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-1129939561 .text {
font-family: "d2-1129939561-font-regular";
}
@font-face {
font-family: d2-1129939561-font-regular;
src: url("data:application/font-woff;base64,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");
}
.d2-1129939561 .text-italic {
font-family: "d2-1129939561-font-italic";
}
@font-face {
font-family: d2-1129939561-font-italic;
src: url("data:application/font-woff;base64,d09GRgABAAAAAArQAAoAAAAAERAAARhRAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAGAAAABgW1SVeGNtYXAAAAFUAAAAkAAAALwDPwNwZ2x5ZgAAAeQAAASgAAAF8HlSq9BoZWFkAAAGhAAAADYAAAA2G7Ur2mhoZWEAAAa8AAAAJAAAACQLeAi6aG10eAAABuAAAABYAAAAWCP0AtBsb2NhAAAHOAAAAC4AAAAuE0wR8m1heHAAAAdoAAAAIAAAACAALgD2bmFtZQAAB4gAAAMmAAAIMgntVzNwb3N0AAAKsAAAACAAAAAg/8YAMgADAeEBkAAFAAACigJY//EASwKKAlgARAFeADIBIwAAAgsFAwMEAwkCBCAAAHcAAAADAAAAAAAAAABBREJPAAEAIP//Au7/BgAAA9gBESAAAZMAAAAAAeYClAAAACAAA3icfM0/TsIAAEfhr7b+r7XqbryAiwdwMC5OHsE4ODQaJ2/jAiTsJCQsDHAJVhIS7vEjgZXw1m94KJQK1Coj3GuVGg8ePXn24tWbdx++dH78+kvY45863zvPKusss8g8s0wzyTjDDNJPL//b26EKN1p3jpQqx26dOHXm3IVLtSuNazYAAAD//wEAAP//LAkml3icfJRdbFNlHMb/73u6vvs4G7SnH1vddtqetoeVs647704P+2pXuu+uAwYr46NlnU6DIC5IUVwJCgbURFISotGQ6J0aLzTTmHiDieGiKt4ajIYrwQQkMUtjhGQ95px9MLnw5pw3eZPn93+e98kfqsAHgE/gq8BADWwBK9gBKOdhGKqqgpOhoigQooocR3znUen8B6bEwTvbPnoo8aaR1z9N/jn7Gb66chy9ljl3rnLozfn5/ffvV4Lo5/sAAAwIANiNi2ABl36mHJUddpvZTIjD+AsMlSNKV0B4fBAufH7k+PaED9HhkcJkTzZ7cGj80LGT2ROpsVO4OD4iDUrVJja+YywjodMjaru8cm9oQu7XedjgRXARaoDbRBNEKkfW1V99653pD19Mp6cLieeejuDipTMvfzU/sO/dXOaoroF0DSjjIjCGAiNcmLyAiysLhn6fVsZZfA22ghugyhtQuqKYyrqXBizKUawzvA3YbnMg/kQ+lM4Pj893hdKnEsr+qHd8Uv+Ose8VksX80ODi3uSV/FCiby7fncv3zuV7Zk8bDFEro3/QMtj0SZwbDCdVKSOogtksyhFVDayDvhyYkMazVOy3mLhoLlZtEmasgV0+yS43+xIK38kemh4+c5hu8/RXXKP+joFQxy8Bb3AsI8fWMuO1MvoLl8CuN8HpDYgCEThKCI1EjPw2OTPe7Z7Yb2Fsscsp0YF9+9oNvOJLKK3hNu8eIWSj7DZPPy5dn23ZfjCtoweCYxka7Q/6/wh4AYFfK6MltAzN/3FHdENms93moHJEdZrNt3Y9I6VyitTnaOcCLeF0pLvHHXF4XSn22czgS9Md3qaw0z64kNg57LLINj+sZ4fFTV4eZ/f/4fVYma2BVHEtvUn/k+mJ7iPXV3Y8GR82vHyLlsEF/s08vXXEY3ase2GoUT/d4e/po+3Jw2E13spWVW7UuBPBlm5na8ue9zXMWNsEJcs+nxtamJJCu+Vm2hDb7W+yUDuP/HWN9c2d/LSmAQ8Aj/ASDoANAMxgH13tLQ+AHuASsKu9pRwlnCASwl9OzeKHM9/lJzMLLlyqtCD0Y+XOg5OLgEDSyvAIl8CqT690qRxl9DdYG/uFuHkxdRYhC2MmqNbBxixN+NjKFVLDWBHuNZkec2+hZWg0uBu1IYzA6a711jB8LkZMbVOhqFIdnegzmUabR0ND6O6YrzO+g/dVfkCSrbE+GQxVPlnV7NPKaAYf3+hIROWEGKaEEoHZ1JFvBrpMqHukbsIXf2qRPdvNNHsbXHWWrR1srH2Lqx5Zu6suXoxW7lmtra21VSrZAoC0vwHQDfw2uAAENcqsFVvcaDvxkNrq2cvZDqq4415R2h+emglOFfYiGxvaszh3ICT1efhwoO3AoJKdXRjdubozbqNa1KTvDFWlRGB/rb/d22t40X7T3kBfaF/rd0T1EF8d+r62IMuGzzBcQjdxA9QAqIqqKqKoVNnDNwuFm+japZ27Ok3h3fGPezZyhp/Q3fW9xOdSc+huxWXcjeAkLOElqAPgjLxWN98rXKvgtLUIOOl0NHkaHU3ufwEAAP//AQAA//9s5DxpAAEAAAABGFElLooLXw889QABA+gAAAAA2F2gzAAAAADdZi83/r3+3QgdA8kAAgADAAIAAAAAAAAAAQAAA9j+7wAACED+vf28CB0D6ADC/9EAAAAAAAAAAAAAABYCdAAkAMgAAAJHACMCUAAjAPwAIwJ5ADwCGQAnAhgAHwGzACUCFwAnAeEAJQDtAB8B3AAfAPgALAINAB8BRQA8AeD/9gErACMB4//cAeAAMADtAB8AAABHAAAALgAuAGYAiACWAMgBAAE4AWYBngHYAeQB/gIgAkoCeAKiArACvgLUAuIC+AAAAAEAAAAWAIwADABmAAcAAQAAAAAAAAAAAAAAAAAEAAN4nJyU204bVxSGPwfbbXq6qFBEbtC+TKVkTKMQJeHKlKCMinDqcXqQqkqDPT6I8czIM5iSJ+h136Jvkas+Rp+i6nW1fy+DHUVBIAT8e/Y6/Gutf21gk//YoFa/C/zdnBuusd382fAdvmgeGd5gv/mZ4ToPG/8YbjBovDXc5EGja/gT3tX/NPwpT+q/Gb7LVv3Q8Oc8rm8a/nLD8a/hr3jCuwWuwTP+MFxji8LwHTb51fAG97CYtTr32DHc4Gu2DTfZBnpMqEiZkDHCMWTCiDNmJJREJMyYMCRhgCOkTUqlrxmxkGP0wa8xERUzYkUcU+FIiUiJKRlbxLfyynmtjEOdZnbXpmJMzIk8TonJcOSMyMlIOFWcioqCF7RoUdIX34KKkoCSCSkBOTNGtOhwyBE9xkwocRwqkmcWkTOk4pxY+Z1Z+M70ScgojdUZGQPxdOKXyDvkCEeHQrarkY/WIjzE8aO8Pbdctt8S6NetMFvPu2QTM1c/U3Ul1c25JjjWrc/b5gfhihe4W/Vnncn1PRrof6XIJ5xp/gNNKhOTDOe2aBNJQZG7j2Nf55BIHfmJkB6v6PCGns5tunRpc0yPkJfy7dDF8R0djjmQRyi8uDuUYo75Bcf3hLLxsRPrz2JiCb9TmLpLcZypjimFeu6ZB6o1UYU3n7DfoXxNHaV8+tojb+k0v0x7FjMyVRRiOFUvl9oorX8DU8RUtfjZXt37bZjb7i23+IJcO+zVuuDkJ7dgdN1Ug/c0c66fgJgBOSey6JMzpUXFhXi/JuaMFMeBuvdKW1LRvvTxeS6kkoSpGIRkijOj0N/YdBMZ9/6a7p29JQP5e6anl1XdJotTr65m9EbdW95F1uVkZQItm2q+oqa+uGam/UQ7tco/km+p1y3nEaHiLnb7Q6/ADs/ZZY+xsvR1M7+886+Et9hTB05JZDWUpn0NjwnYJeApu+zynKfv9XLJxhkft8ZnNX+bA/bpsHdtNQvbDvu8XIv28cx/ie2O6nE8ujw9u/U0H9xAtd9o367eza4m56cxt2hX23FMzNRzcVurNbn7BP8DAAD//wEAAP//cqFRQAAAAAMAAP/1AAD/zgAyAAAAAAAAAAAAAAAAAAAAAAAAAAA=");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-1129939561 .fill-N1{fill:#0A0F25;}
.d2-1129939561 .fill-N2{fill:#676C7E;}
.d2-1129939561 .fill-N3{fill:#9499AB;}
.d2-1129939561 .fill-N4{fill:#CFD2DD;}
.d2-1129939561 .fill-N5{fill:#DEE1EB;}
.d2-1129939561 .fill-N6{fill:#EEF1F8;}
.d2-1129939561 .fill-N7{fill:#FFFFFF;}
.d2-1129939561 .fill-B1{fill:#0D32B2;}
.d2-1129939561 .fill-B2{fill:#0D32B2;}
.d2-1129939561 .fill-B3{fill:#E3E9FD;}
.d2-1129939561 .fill-B4{fill:#E3E9FD;}
.d2-1129939561 .fill-B5{fill:#EDF0FD;}
.d2-1129939561 .fill-B6{fill:#F7F8FE;}
.d2-1129939561 .fill-AA2{fill:#4A6FF3;}
.d2-1129939561 .fill-AA4{fill:#EDF0FD;}
.d2-1129939561 .fill-AA5{fill:#F7F8FE;}
.d2-1129939561 .fill-AB4{fill:#EDF0FD;}
.d2-1129939561 .fill-AB5{fill:#F7F8FE;}
.d2-1129939561 .stroke-N1{stroke:#0A0F25;}
.d2-1129939561 .stroke-N2{stroke:#676C7E;}
.d2-1129939561 .stroke-N3{stroke:#9499AB;}
.d2-1129939561 .stroke-N4{stroke:#CFD2DD;}
.d2-1129939561 .stroke-N5{stroke:#DEE1EB;}
.d2-1129939561 .stroke-N6{stroke:#EEF1F8;}
.d2-1129939561 .stroke-N7{stroke:#FFFFFF;}
.d2-1129939561 .stroke-B1{stroke:#0D32B2;}
.d2-1129939561 .stroke-B2{stroke:#0D32B2;}
.d2-1129939561 .stroke-B3{stroke:#E3E9FD;}
.d2-1129939561 .stroke-B4{stroke:#E3E9FD;}
.d2-1129939561 .stroke-B5{stroke:#EDF0FD;}
.d2-1129939561 .stroke-B6{stroke:#F7F8FE;}
.d2-1129939561 .stroke-AA2{stroke:#4A6FF3;}
.d2-1129939561 .stroke-AA4{stroke:#EDF0FD;}
.d2-1129939561 .stroke-AA5{stroke:#F7F8FE;}
.d2-1129939561 .stroke-AB4{stroke:#EDF0FD;}
.d2-1129939561 .stroke-AB5{stroke:#F7F8FE;}
.d2-1129939561 .background-color-N1{background-color:#0A0F25;}
.d2-1129939561 .background-color-N2{background-color:#676C7E;}
.d2-1129939561 .background-color-N3{background-color:#9499AB;}
.d2-1129939561 .background-color-N4{background-color:#CFD2DD;}
.d2-1129939561 .background-color-N5{background-color:#DEE1EB;}
.d2-1129939561 .background-color-N6{background-color:#EEF1F8;}
.d2-1129939561 .background-color-N7{background-color:#FFFFFF;}
.d2-1129939561 .background-color-B1{background-color:#0D32B2;}
.d2-1129939561 .background-color-B2{background-color:#0D32B2;}
.d2-1129939561 .background-color-B3{background-color:#E3E9FD;}
.d2-1129939561 .background-color-B4{background-color:#E3E9FD;}
.d2-1129939561 .background-color-B5{background-color:#EDF0FD;}
.d2-1129939561 .background-color-B6{background-color:#F7F8FE;}
.d2-1129939561 .background-color-AA2{background-color:#4A6FF3;}
.d2-1129939561 .background-color-AA4{background-color:#EDF0FD;}
.d2-1129939561 .background-color-AA5{background-color:#F7F8FE;}
.d2-1129939561 .background-color-AB4{background-color:#EDF0FD;}
.d2-1129939561 .background-color-AB5{background-color:#F7F8FE;}
.d2-1129939561 .color-N1{color:#0A0F25;}
.d2-1129939561 .color-N2{color:#676C7E;}
.d2-1129939561 .color-N3{color:#9499AB;}
.d2-1129939561 .color-N4{color:#CFD2DD;}
.d2-1129939561 .color-N5{color:#DEE1EB;}
.d2-1129939561 .color-N6{color:#EEF1F8;}
.d2-1129939561 .color-N7{color:#FFFFFF;}
.d2-1129939561 .color-B1{color:#0D32B2;}
.d2-1129939561 .color-B2{color:#0D32B2;}
.d2-1129939561 .color-B3{color:#E3E9FD;}
.d2-1129939561 .color-B4{color:#E3E9FD;}
.d2-1129939561 .color-B5{color:#EDF0FD;}
.d2-1129939561 .color-B6{color:#F7F8FE;}
.d2-1129939561 .color-AA2{color:#4A6FF3;}
.d2-1129939561 .color-AA4{color:#EDF0FD;}
.d2-1129939561 .color-AA5{color:#F7F8FE;}
.d2-1129939561 .color-AB4{color:#EDF0FD;}
.d2-1129939561 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="backend"><g class="shape" ><rect x="10.000000" y="20.000000" width="263.000000" height="406.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="141.500000" y="7.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">backend</text></g><g id="backend.client"><g class="shape" ><rect x="40.000000" y="50.000000" width="203.000000" height="346.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="141.500000" y="79.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">client</text></g><g id="backend.client.client"><g class="shape" ><rect x="52.000000" y="133.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="102.000000" y="171.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">client</text></g><g id="(backend.client.client -- )[0]"><path d="M 102.000000 201.000000 L 102.000000 383.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-1129939561)" /></g><g id="backend.client.(client -&gt; client)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 104.000000 269.000000 L 172.000000 269.000000 S 182.000000 269.000000 182.000000 279.000000 L 182.000000 304.000000 S 182.000000 314.000000 172.000000 314.000000 L 106.000000 314.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1129939561)" /><text x="182.500000" y="297.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">BO_ID -&gt; D2_ID</text></g><mask id="d2-1129939561" maskUnits="userSpaceOnUse" x="9" y="-21" width="265" height="448">
<rect x="9" y="-21" width="265" height="448" fill="white"></rect>
<rect x="92.500000" y="-21.000000" width="98" height="36" fill="rgba(0,0,0,0.75)"></rect>
<rect x="114.000000" y="55.000000" width="55" height="31" fill="rgba(0,0,0,0.75)"></rect>
<rect x="83.000000" y="155.500000" width="38" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="133.000000" y="281.000000" width="99" height="21" fill="black"></rect>
</mask></svg></svg>
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

256
e2etests/testdata/txtar/sequence-bounding-box/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,256 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "backend",
"type": "rectangle",
"pos": {
"x": 12,
"y": 12
},
"width": 304,
"height": 446,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B4",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "backend",
"fontSize": 28,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 98,
"labelHeight": 36,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "backend.client",
"type": "sequence_diagram",
"pos": {
"x": 62,
"y": 62
},
"width": 204,
"height": 346,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "client",
"fontSize": 24,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 55,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "backend.client.client",
"type": "rectangle",
"pos": {
"x": 74,
"y": 145
},
"width": 100,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"stroke": "B1",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "client",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 38,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 3
}
],
"connections": [
{
"id": "backend.client.(client -> client)[0]",
"src": "backend.client.client",
"srcArrow": "none",
"dst": "backend.client.client",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"borderRadius": 10,
"label": "BO_ID -> D2_ID",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 99,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 124,
"y": 281
},
{
"x": 204,
"y": 281
},
{
"x": 204,
"y": 326
},
{
"x": 124,
"y": 326
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(backend.client.client -- )[0]",
"src": "backend.client.client",
"srcArrow": "none",
"dst": "client-lifeline-end-2119091193",
"dstArrow": "none",
"opacity": 1,
"strokeDash": 6,
"strokeWidth": 2,
"stroke": "B2",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 124,
"y": 211
},
{
"x": 124,
"y": 396
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
}
],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

105
e2etests/testdata/txtar/sequence-bounding-box/elk/sketch.exp.svg vendored Normal file
View file

@ -0,0 +1,105 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.6-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 306 448"><svg id="d2-svg" class="d2-9807582" width="306" height="448" viewBox="11 11 306 448"><rect x="11.000000" y="11.000000" width="306.000000" height="448.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
.d2-9807582 .text {
font-family: "d2-9807582-font-regular";
}
@font-face {
font-family: d2-9807582-font-regular;
src: url("data:application/font-woff;base64,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");
}
.d2-9807582 .text-italic {
font-family: "d2-9807582-font-italic";
}
@font-face {
font-family: d2-9807582-font-italic;
src: url("data:application/font-woff;base64,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");
}]]></style><style type="text/css"><![CDATA[.shape {
shape-rendering: geometricPrecision;
stroke-linejoin: round;
}
.connection {
stroke-linecap: round;
stroke-linejoin: round;
}
.blend {
mix-blend-mode: multiply;
opacity: 0.5;
}
.d2-9807582 .fill-N1{fill:#0A0F25;}
.d2-9807582 .fill-N2{fill:#676C7E;}
.d2-9807582 .fill-N3{fill:#9499AB;}
.d2-9807582 .fill-N4{fill:#CFD2DD;}
.d2-9807582 .fill-N5{fill:#DEE1EB;}
.d2-9807582 .fill-N6{fill:#EEF1F8;}
.d2-9807582 .fill-N7{fill:#FFFFFF;}
.d2-9807582 .fill-B1{fill:#0D32B2;}
.d2-9807582 .fill-B2{fill:#0D32B2;}
.d2-9807582 .fill-B3{fill:#E3E9FD;}
.d2-9807582 .fill-B4{fill:#E3E9FD;}
.d2-9807582 .fill-B5{fill:#EDF0FD;}
.d2-9807582 .fill-B6{fill:#F7F8FE;}
.d2-9807582 .fill-AA2{fill:#4A6FF3;}
.d2-9807582 .fill-AA4{fill:#EDF0FD;}
.d2-9807582 .fill-AA5{fill:#F7F8FE;}
.d2-9807582 .fill-AB4{fill:#EDF0FD;}
.d2-9807582 .fill-AB5{fill:#F7F8FE;}
.d2-9807582 .stroke-N1{stroke:#0A0F25;}
.d2-9807582 .stroke-N2{stroke:#676C7E;}
.d2-9807582 .stroke-N3{stroke:#9499AB;}
.d2-9807582 .stroke-N4{stroke:#CFD2DD;}
.d2-9807582 .stroke-N5{stroke:#DEE1EB;}
.d2-9807582 .stroke-N6{stroke:#EEF1F8;}
.d2-9807582 .stroke-N7{stroke:#FFFFFF;}
.d2-9807582 .stroke-B1{stroke:#0D32B2;}
.d2-9807582 .stroke-B2{stroke:#0D32B2;}
.d2-9807582 .stroke-B3{stroke:#E3E9FD;}
.d2-9807582 .stroke-B4{stroke:#E3E9FD;}
.d2-9807582 .stroke-B5{stroke:#EDF0FD;}
.d2-9807582 .stroke-B6{stroke:#F7F8FE;}
.d2-9807582 .stroke-AA2{stroke:#4A6FF3;}
.d2-9807582 .stroke-AA4{stroke:#EDF0FD;}
.d2-9807582 .stroke-AA5{stroke:#F7F8FE;}
.d2-9807582 .stroke-AB4{stroke:#EDF0FD;}
.d2-9807582 .stroke-AB5{stroke:#F7F8FE;}
.d2-9807582 .background-color-N1{background-color:#0A0F25;}
.d2-9807582 .background-color-N2{background-color:#676C7E;}
.d2-9807582 .background-color-N3{background-color:#9499AB;}
.d2-9807582 .background-color-N4{background-color:#CFD2DD;}
.d2-9807582 .background-color-N5{background-color:#DEE1EB;}
.d2-9807582 .background-color-N6{background-color:#EEF1F8;}
.d2-9807582 .background-color-N7{background-color:#FFFFFF;}
.d2-9807582 .background-color-B1{background-color:#0D32B2;}
.d2-9807582 .background-color-B2{background-color:#0D32B2;}
.d2-9807582 .background-color-B3{background-color:#E3E9FD;}
.d2-9807582 .background-color-B4{background-color:#E3E9FD;}
.d2-9807582 .background-color-B5{background-color:#EDF0FD;}
.d2-9807582 .background-color-B6{background-color:#F7F8FE;}
.d2-9807582 .background-color-AA2{background-color:#4A6FF3;}
.d2-9807582 .background-color-AA4{background-color:#EDF0FD;}
.d2-9807582 .background-color-AA5{background-color:#F7F8FE;}
.d2-9807582 .background-color-AB4{background-color:#EDF0FD;}
.d2-9807582 .background-color-AB5{background-color:#F7F8FE;}
.d2-9807582 .color-N1{color:#0A0F25;}
.d2-9807582 .color-N2{color:#676C7E;}
.d2-9807582 .color-N3{color:#9499AB;}
.d2-9807582 .color-N4{color:#CFD2DD;}
.d2-9807582 .color-N5{color:#DEE1EB;}
.d2-9807582 .color-N6{color:#EEF1F8;}
.d2-9807582 .color-N7{color:#FFFFFF;}
.d2-9807582 .color-B1{color:#0D32B2;}
.d2-9807582 .color-B2{color:#0D32B2;}
.d2-9807582 .color-B3{color:#E3E9FD;}
.d2-9807582 .color-B4{color:#E3E9FD;}
.d2-9807582 .color-B5{color:#EDF0FD;}
.d2-9807582 .color-B6{color:#F7F8FE;}
.d2-9807582 .color-AA2{color:#4A6FF3;}
.d2-9807582 .color-AA4{color:#EDF0FD;}
.d2-9807582 .color-AA5{color:#F7F8FE;}
.d2-9807582 .color-AB4{color:#EDF0FD;}
.d2-9807582 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="backend"><g class="shape" ><rect x="12.000000" y="12.000000" width="304.000000" height="446.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="164.000000" y="45.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">backend</text></g><g id="backend.client"><g class="shape" ><rect x="62.000000" y="62.000000" width="204.000000" height="346.000000" class=" stroke-B1 fill-N7" style="stroke-width:0;" /></g><text x="164.000000" y="91.000000" class="text fill-N1" style="text-anchor:middle;font-size:24px">client</text></g><g id="backend.client.client"><g class="shape" ><rect x="74.000000" y="145.000000" width="100.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="124.000000" y="183.500000" class="text fill-N1" style="text-anchor:middle;font-size:16px">client</text></g><g id="(backend.client.client -- )[0]"><path d="M 124.000000 213.000000 L 124.000000 395.000000" fill="none" class="connection stroke-B2" style="stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#d2-9807582)" /></g><g id="backend.client.(client -&gt; client)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 126.000000 281.000000 L 194.000000 281.000000 S 204.000000 281.000000 204.000000 291.000000 L 204.000000 316.000000 S 204.000000 326.000000 194.000000 326.000000 L 128.000000 326.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-9807582)" /><text x="204.500000" y="309.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">BO_ID -&gt; D2_ID</text></g><mask id="d2-9807582" maskUnits="userSpaceOnUse" x="11" y="11" width="306" height="448">
<rect x="11" y="11" width="306" height="448" fill="white"></rect>
<rect x="115.000000" y="17.000000" width="98" height="36" fill="rgba(0,0,0,0.75)"></rect>
<rect x="136.500000" y="67.000000" width="55" height="31" fill="rgba(0,0,0,0.75)"></rect>
<rect x="105.000000" y="167.500000" width="38" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="155.000000" y="293.000000" width="99" height="21" fill="black"></rect>
</mask></svg></svg>
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

6
e2etests/txtar.txt
View file

@ -313,3 +313,9 @@ x -> x: self referential long description which is\nmultirow\n3 rows
x -> x: self referential long description which is\nmultirow x -> x: self referential long description which is\nmultirow
x -> y: normal x -> y: normal
y -> y: self referential long description which is\nmultirow\n3 rows y -> y: self referential long description which is\nmultirow\n3 rows
-- sequence-bounding-box --
backend.client: {
shape: sequence_diagram
client -> client: BO_ID -> D2_ID
}