Merge pull request #2094 from alixander/connection-style-fill

d2render: connection style fill
This commit is contained in:
Alexander Wang 2024-09-14 17:46:52 -06:00 committed by GitHub
commit 3da25c79b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 2152 additions and 8 deletions

View file

@ -12,6 +12,7 @@
- Compiler: Error on multi-line labels in `sql_table` shapes [#2057](https://github.com/terrastruct/d2/pull/2057)
- Sequence diagram: Image shape actors can use spans and notes [#2056](https://github.com/terrastruct/d2/issues/2056)
- Globs: Filters work with default values (e.g. `&opacity: 1` will capture everything without opacity explicitly set) [#2090](https://github.com/terrastruct/d2/pull/2090)
- Render: connection label fills have a bit of padding and border-radius for better aesthetics [#2094](https://github.com/terrastruct/d2/pull/2094)
#### Bugfixes ⛑️

View file

@ -1323,6 +1323,27 @@ C <-> D: triangle {
}
}`,
},
{
name: "connection-style-fill",
script: `
shape: sequence_diagram
customer
employee
rental
item
(* -> *)[*].style.fill: black
(* -> *)[*].style.font-color: white
customer -> employee: "rent(this, i, p)"
employee -> rental: "new(this, i, p)"
rental -> employee
employee -> rental: isValid()
rental -> item: isRentable(c)
item -> customer: is(Adult)
customer -> item: true
`,
},
}
runa(t, tcs)
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 81 KiB

View file

@ -623,8 +623,9 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
}
if connection.Fill != color.Empty {
rectEl := d2themes.NewThemableElement("rect")
rectEl.X, rectEl.Y = labelTL.X, labelTL.Y
rectEl.Width, rectEl.Height = float64(connection.LabelWidth), float64(connection.LabelHeight)
rectEl.Rx = 10
rectEl.X, rectEl.Y = labelTL.X-4, labelTL.Y-3
rectEl.Width, rectEl.Height = float64(connection.LabelWidth)+8, float64(connection.LabelHeight)+6
rectEl.Fill = connection.Fill
fmt.Fprint(writer, rectEl.Render())
}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 116 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 116 KiB

View file

@ -106,7 +106,7 @@
</filter>
</defs><g id="x" style='opacity:0.600000'><g class="shape" filter="url(#shadow-filter)" ><rect x="1.000000" y="0.000000" width="53.000000" height="66.000000" stroke="#53C0D8" fill="orange" style="stroke-width:5;" /></g><text x="27.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y" style='opacity:0.600000'><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="0" y="172" width="69" height="81">
<rect x="0" y="172" width="69" height="81" fill="white"></rect>
<path d="M0,187L15,172L69,172L69,238L54,253L0,253L0,187L54,187L54,253M54,187L69,172" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0.000000" y="187.000000" width="54.000000" height="66.000000" mask="url(#border-mask-y)" stroke="none" fill="red" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /><polygon mask="url(#border-mask-y)" points="0,187 15,172 69,172 69,238 54,253 54,187" fill="#cc0000" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /><path d="M0,187 L15,172 L69,172 L69,238 L54,253 L0,253 L0,187 L54,187 L54,253 M54,187 L69,172" stroke="black" fill="none" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text x="27.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]" style='opacity:0.500000'><marker id="mk-1457214650" 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" fill="green" class="connection" stroke-width="2" /> </marker><path d="M 27.000000 69.000000 C 27.000000 114.300003 27.000000 135.699997 27.000000 168.500000" stroke="green" fill="none" class="connection" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#d2-2923702954)" /><rect x="4.000000" y="109.000000" width="47.000000" height="21.000000" fill="lavender" /><text x="27.500000" y="125.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">in style</text></g><mask id="d2-2923702954" maskUnits="userSpaceOnUse" x="-2" y="-3" width="73" height="257">
<path d="M0,187L15,172L69,172L69,238L54,253L0,253L0,187L54,187L54,253M54,187L69,172" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="0.000000" y="187.000000" width="54.000000" height="66.000000" mask="url(#border-mask-y)" stroke="none" fill="red" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /><polygon mask="url(#border-mask-y)" points="0,187 15,172 69,172 69,238 54,253 54,187" fill="#cc0000" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /><path d="M0,187 L15,172 L69,172 L69,238 L54,253 L0,253 L0,187 L54,187 L54,253 M54,187 L69,172" stroke="black" fill="none" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text x="27.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]" style='opacity:0.500000'><marker id="mk-1457214650" 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" fill="green" class="connection" stroke-width="2" /> </marker><path d="M 27.000000 69.000000 C 27.000000 114.300003 27.000000 135.699997 27.000000 168.500000" stroke="green" fill="none" class="connection" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#d2-2923702954)" /><rect x="0.000000" y="106.000000" width="55.000000" height="27.000000" rx="10.000000" fill="lavender" /><text x="27.500000" y="125.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">in style</text></g><mask id="d2-2923702954" maskUnits="userSpaceOnUse" x="-2" y="-3" width="73" height="257">
<rect x="-2" y="-3" width="73" height="257" fill="white"></rect>
<rect x="23.500000" y="22.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="22.500000" y="209.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -106,7 +106,7 @@
</filter>
</defs><g id="x" style='opacity:0.600000'><g class="shape" filter="url(#shadow-filter)" ><rect x="20.000000" y="12.000000" width="53.000000" height="66.000000" stroke="#53C0D8" fill="orange" style="stroke-width:5;" /></g><text x="46.500000" y="50.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">x</text></g><g id="y" style='opacity:0.600000'><g class="shape" ><defs><mask id="border-mask-y" maskUnits="userSpaceOnUse" x="12" y="239" width="69" height="81">
<rect x="12" y="239" width="69" height="81" fill="white"></rect>
<path d="M12,254L27,239L81,239L81,305L66,320L12,320L12,254L66,254L66,320M66,254L81,239" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12.000000" y="254.000000" width="54.000000" height="66.000000" mask="url(#border-mask-y)" stroke="none" fill="red" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /><polygon mask="url(#border-mask-y)" points="12,254 27,239 81,239 81,305 66,320 66,254" fill="#cc0000" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /><path d="M12,254 L27,239 L81,239 L81,305 L66,320 L12,320 L12,254 L66,254 L66,320 M66,254 L81,239" stroke="black" fill="none" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text x="39.000000" y="292.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]" style='opacity:0.500000'><marker id="mk-1457214650" 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" fill="green" class="connection" stroke-width="2" /> </marker><path d="M 46.500000 81.500000 L 46.500000 235.000000" stroke="green" fill="none" class="connection" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#d2-2497092455)" /><rect x="23.000000" y="148.000000" width="47.000000" height="21.000000" fill="lavender" /><text x="46.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">in style</text></g><mask id="d2-2497092455" maskUnits="userSpaceOnUse" x="11" y="9" width="72" height="312">
<path d="M12,254L27,239L81,239L81,305L66,320L12,320L12,254L66,254L66,320M66,254L81,239" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;;stroke:#000;fill:none;opacity:1;"/></mask></defs><rect x="12.000000" y="254.000000" width="54.000000" height="66.000000" mask="url(#border-mask-y)" stroke="none" fill="red" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /><polygon mask="url(#border-mask-y)" points="12,254 27,239 81,239 81,305 66,320 66,254" fill="#cc0000" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /><path d="M12,254 L27,239 L81,239 L81,305 L66,320 L12,320 L12,254 L66,254 L66,320 M66,254 L81,239" stroke="black" fill="none" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" /></g><text x="39.000000" y="292.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">y</text></g><g id="(x -&gt; y)[0]" style='opacity:0.500000'><marker id="mk-1457214650" 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" fill="green" class="connection" stroke-width="2" /> </marker><path d="M 46.500000 81.500000 L 46.500000 235.000000" stroke="green" fill="none" class="connection" style="stroke-width:2;stroke-dasharray:10.000000,9.865639;" marker-end="url(#mk-1457214650)" mask="url(#d2-2497092455)" /><rect x="19.000000" y="145.000000" width="55.000000" height="27.000000" rx="10.000000" fill="lavender" /><text x="46.500000" y="164.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">in style</text></g><mask id="d2-2497092455" maskUnits="userSpaceOnUse" x="11" y="9" width="72" height="312">
<rect x="11" y="9" width="72" height="312" fill="white"></rect>
<rect x="42.500000" y="34.500000" width="8" height="21" fill="rgba(0,0,0,0.75)"></rect>
<rect x="34.500000" y="276.500000" width="9" height="21" fill="rgba(0,0,0,0.75)"></rect>

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -0,0 +1,874 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "customer",
"type": "rectangle",
"pos": {
"x": 12,
"y": 52
},
"width": 109,
"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": "customer",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 64,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "employee",
"type": "rectangle",
"pos": {
"x": 161,
"y": 52
},
"width": 112,
"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": "employee",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 67,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "rental",
"type": "rectangle",
"pos": {
"x": 317,
"y": 52
},
"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": "rental",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 39,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "item",
"type": "rectangle",
"pos": {
"x": 467,
"y": 52
},
"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": "item",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 30,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "alice",
"type": "rectangle",
"pos": {
"x": 617,
"y": 52
},
"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": "alice",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 32,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "bob",
"type": "rectangle",
"pos": {
"x": 838,
"y": 52
},
"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": "bob",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 26,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "(customer -> employee)[0]",
"src": "customer",
"srcArrow": "none",
"dst": "employee",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "rent(this, i, p)",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 86,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 66.5,
"y": 198
},
{
"x": 217,
"y": 198
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(employee -> rental)[0]",
"src": "employee",
"srcArrow": "none",
"dst": "rental",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "new(this, i, p)",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 87,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 217,
"y": 288
},
{
"x": 367,
"y": 288
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(rental -> employee)[0]",
"src": "rental",
"srcArrow": "none",
"dst": "employee",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 367,
"y": 368
},
{
"x": 217,
"y": 368
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(employee -> rental)[1]",
"src": "employee",
"srcArrow": "none",
"dst": "rental",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "isValid()",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 52,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 217,
"y": 448
},
{
"x": 367,
"y": 448
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(rental -> item)[0]",
"src": "rental",
"srcArrow": "none",
"dst": "item",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "isRentable(c)",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 85,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 367,
"y": 538
},
{
"x": 517,
"y": 538
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(item -> customer)[0]",
"src": "item",
"srcArrow": "none",
"dst": "customer",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "is(Adult)",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 54,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 517,
"y": 628
},
{
"x": 66.5,
"y": 628
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(customer -> item)[0]",
"src": "customer",
"srcArrow": "none",
"dst": "item",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "true",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 28,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 66.5,
"y": 718
},
{
"x": 517,
"y": 718
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(alice -> bob)[0]",
"src": "alice",
"srcArrow": "none",
"dst": "bob",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "What does it mean\nto be well-adjusted?",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 133,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 667,
"y": 816
},
{
"x": 888,
"y": 816
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(bob -> alice)[0]",
"src": "bob",
"srcArrow": "none",
"dst": "alice",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "The ability to play bridge or\ngolf as if they were games.",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 181,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 888,
"y": 922
},
{
"x": 667,
"y": 922
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(customer -- )[0]",
"src": "customer",
"srcArrow": "none",
"dst": "customer-lifeline-end-1038758816",
"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": 66.5,
"y": 118
},
{
"x": 66.5,
"y": 992
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
},
{
"id": "(employee -- )[0]",
"src": "employee",
"srcArrow": "none",
"dst": "employee-lifeline-end-1493022808",
"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": 217,
"y": 118
},
{
"x": 217,
"y": 992
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
},
{
"id": "(rental -- )[0]",
"src": "rental",
"srcArrow": "none",
"dst": "rental-lifeline-end-580282478",
"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": 367,
"y": 118
},
{
"x": 367,
"y": 992
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
},
{
"id": "(item -- )[0]",
"src": "item",
"srcArrow": "none",
"dst": "item-lifeline-end-4102336625",
"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": 517,
"y": 118
},
{
"x": 517,
"y": 992
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
},
{
"id": "(alice -- )[0]",
"src": "alice",
"srcArrow": "none",
"dst": "alice-lifeline-end-3851299086",
"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": 667,
"y": 118
},
{
"x": 667,
"y": 992
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
},
{
"id": "(bob -- )[0]",
"src": "bob",
"srcArrow": "none",
"dst": "bob-lifeline-end-3036726343",
"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": 888,
"y": 118
},
{
"x": 888,
"y": 992
}
],
"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
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 24 KiB

View file

@ -0,0 +1,874 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "customer",
"type": "rectangle",
"pos": {
"x": 12,
"y": 52
},
"width": 109,
"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": "customer",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 64,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "employee",
"type": "rectangle",
"pos": {
"x": 161,
"y": 52
},
"width": 112,
"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": "employee",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 67,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "rental",
"type": "rectangle",
"pos": {
"x": 317,
"y": 52
},
"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": "rental",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 39,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "item",
"type": "rectangle",
"pos": {
"x": 467,
"y": 52
},
"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": "item",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 30,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "alice",
"type": "rectangle",
"pos": {
"x": 617,
"y": 52
},
"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": "alice",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 32,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "bob",
"type": "rectangle",
"pos": {
"x": 838,
"y": 52
},
"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": "bob",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 26,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "(customer -> employee)[0]",
"src": "customer",
"srcArrow": "none",
"dst": "employee",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "rent(this, i, p)",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 86,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 66.5,
"y": 198
},
{
"x": 217,
"y": 198
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(employee -> rental)[0]",
"src": "employee",
"srcArrow": "none",
"dst": "rental",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "new(this, i, p)",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 87,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 217,
"y": 288
},
{
"x": 367,
"y": 288
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(rental -> employee)[0]",
"src": "rental",
"srcArrow": "none",
"dst": "employee",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 367,
"y": 368
},
{
"x": 217,
"y": 368
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(employee -> rental)[1]",
"src": "employee",
"srcArrow": "none",
"dst": "rental",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "isValid()",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 52,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 217,
"y": 448
},
{
"x": 367,
"y": 448
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(rental -> item)[0]",
"src": "rental",
"srcArrow": "none",
"dst": "item",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "isRentable(c)",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 85,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 367,
"y": 538
},
{
"x": 517,
"y": 538
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(item -> customer)[0]",
"src": "item",
"srcArrow": "none",
"dst": "customer",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "is(Adult)",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 54,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 517,
"y": 628
},
{
"x": 66.5,
"y": 628
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(customer -> item)[0]",
"src": "customer",
"srcArrow": "none",
"dst": "item",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "true",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 28,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 66.5,
"y": 718
},
{
"x": 517,
"y": 718
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(alice -> bob)[0]",
"src": "alice",
"srcArrow": "none",
"dst": "bob",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "What does it mean\nto be well-adjusted?",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 133,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 667,
"y": 816
},
{
"x": 888,
"y": 816
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(bob -> alice)[0]",
"src": "bob",
"srcArrow": "none",
"dst": "alice",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"fill": "black",
"borderRadius": 10,
"label": "The ability to play bridge or\ngolf as if they were games.",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "white",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 181,
"labelHeight": 37,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 888,
"y": 922
},
{
"x": 667,
"y": 922
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 4
},
{
"id": "(customer -- )[0]",
"src": "customer",
"srcArrow": "none",
"dst": "customer-lifeline-end-1038758816",
"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": 66.5,
"y": 118
},
{
"x": 66.5,
"y": 992
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
},
{
"id": "(employee -- )[0]",
"src": "employee",
"srcArrow": "none",
"dst": "employee-lifeline-end-1493022808",
"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": 217,
"y": 118
},
{
"x": 217,
"y": 992
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
},
{
"id": "(rental -- )[0]",
"src": "rental",
"srcArrow": "none",
"dst": "rental-lifeline-end-580282478",
"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": 367,
"y": 118
},
{
"x": 367,
"y": 992
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
},
{
"id": "(item -- )[0]",
"src": "item",
"srcArrow": "none",
"dst": "item-lifeline-end-4102336625",
"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": 517,
"y": 118
},
{
"x": 517,
"y": 992
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
},
{
"id": "(alice -- )[0]",
"src": "alice",
"srcArrow": "none",
"dst": "alice-lifeline-end-3851299086",
"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": 667,
"y": 118
},
{
"x": 667,
"y": 992
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 1
},
{
"id": "(bob -- )[0]",
"src": "bob",
"srcArrow": "none",
"dst": "bob-lifeline-end-3036726343",
"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": 888,
"y": 118
},
{
"x": 888,
"y": 992
}
],
"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
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 24 KiB

View file

@ -378,3 +378,27 @@ D: "Alignment\nOf\nAlignment\nOf"{
RightAligned
Justified
}
-- connection-style-fill --
shape: sequence_diagram
customer
employee
rental
item
alice
bob
(* -> *)[*].style.fill: black
(* -> *)[*].style.font-color: white
customer -> employee: "rent(this, i, p)"
employee -> rental: "new(this, i, p)"
rental -> employee
employee -> rental: isValid()
rental -> item: isRentable(c)
item -> customer: is(Adult)
customer -> item: true
alice -> bob: What does it mean\nto be well-adjusted?
bob -> alice: The ability to play bridge or\ngolf as if they were games.