From 46921d6025d783b4be212fab312ddd24363c3b46 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Fri, 16 Dec 2022 15:43:03 -0800 Subject: [PATCH 01/56] add style fill to connection labels in e2e tests --- e2etests/stable_test.go | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/e2etests/stable_test.go b/e2etests/stable_test.go index 29eeb130b..be9381938 100644 --- a/e2etests/stable_test.go +++ b/e2etests/stable_test.go @@ -917,12 +917,13 @@ y: { } } -x -> y: { +x -> y: in style { style: { stroke: green opacity: 0.5 stroke-width: 2 stroke-dash: 5 + fill: lavender } } `, @@ -1041,6 +1042,7 @@ size S -> size M: custom 15 { } size XXXL -> custom 64: custom 48 { style.font-size: 48 + style.fill: lavender } `, }, { From 65dc45c119671146f4c8cf4ed0b153b6997df6df Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Fri, 16 Dec 2022 15:43:58 -0800 Subject: [PATCH 02/56] update tests --- .../stable/stylish/dagre/board.exp.json | 8 ++++---- .../stable/stylish/dagre/sketch.exp.svg | 12 +++++++++++- .../testdata/stable/stylish/elk/board.exp.json | 12 ++++++------ .../testdata/stable/stylish/elk/sketch.exp.svg | 18 ++++++++++++++---- 4 files changed, 35 insertions(+), 15 deletions(-) diff --git a/e2etests/testdata/stable/stylish/dagre/board.exp.json b/e2etests/testdata/stable/stylish/dagre/board.exp.json index d85374df4..10836e6e0 100644 --- a/e2etests/testdata/stable/stylish/dagre/board.exp.json +++ b/e2etests/testdata/stable/stylish/dagre/board.exp.json @@ -95,7 +95,7 @@ "strokeDash": 5, "strokeWidth": 2, "stroke": "green", - "label": "", + "label": "in style", "fontSize": 16, "fontFamily": "DEFAULT", "language": "", @@ -103,9 +103,9 @@ "italic": true, "bold": false, "underline": false, - "labelWidth": 0, - "labelHeight": 0, - "labelPosition": "", + "labelWidth": 47, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", "labelPercentage": 0, "route": [ { diff --git a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg index 1b54d4d17..f73951c97 100644 --- a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg @@ -28,11 +28,21 @@ width="314" height="552" viewBox="-100 -100 314 552"> \ No newline at end of file diff --git a/e2etests/testdata/stable/stylish/elk/board.exp.json b/e2etests/testdata/stable/stylish/elk/board.exp.json index 0cd252c22..89f1269bf 100644 --- a/e2etests/testdata/stable/stylish/elk/board.exp.json +++ b/e2etests/testdata/stable/stylish/elk/board.exp.json @@ -46,7 +46,7 @@ "type": "", "pos": { "x": 12, - "y": 238 + "y": 359 }, "width": 114, "height": 126, @@ -95,7 +95,7 @@ "strokeDash": 5, "strokeWidth": 2, "stroke": "green", - "label": "", + "label": "in style", "fontSize": 16, "fontFamily": "DEFAULT", "language": "", @@ -103,9 +103,9 @@ "italic": true, "bold": false, "underline": false, - "labelWidth": 0, - "labelHeight": 0, - "labelPosition": "", + "labelWidth": 47, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", "labelPercentage": 0, "route": [ { @@ -114,7 +114,7 @@ }, { "x": 69, - "y": 238 + "y": 359 } ], "animated": false, diff --git a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg index eff681d67..c472ba27b 100644 --- a/e2etests/testdata/stable/stylish/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/stylish/elk/sketch.exp.svg @@ -2,7 +2,7 @@ \ No newline at end of file From 412713e2b724d76223582e51bc3532a6782703bb Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Fri, 16 Dec 2022 15:44:26 -0800 Subject: [PATCH 03/56] render connection label background according to style.fill --- d2exporter/export.go | 4 ++++ d2renderers/d2svg/d2svg.go | 5 +++++ d2target/d2target.go | 1 + 3 files changed, 10 insertions(+) diff --git a/d2exporter/export.go b/d2exporter/export.go index 1f2a15b8d..96900ff01 100644 --- a/d2exporter/export.go +++ b/d2exporter/export.go @@ -200,6 +200,10 @@ func toConnection(edge *d2graph.Edge, theme *d2themes.Theme) d2target.Connection connection.StrokeWidth, _ = strconv.Atoi(edge.Attributes.Style.StrokeWidth.Value) } + if edge.Attributes.Style.Fill != nil { + connection.Fill = edge.Attributes.Style.Fill.Value + } + connection.FontSize = text.FontSize if edge.Attributes.Style.FontSize != nil { connection.FontSize, _ = strconv.Atoi(edge.Attributes.Style.FontSize.Value) diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index 022fcf66d..6e31221c8 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -432,6 +432,11 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co if connection.Color != "" { fontColor = connection.Color } + + if connection.Fill != "" { + fmt.Fprintf(writer, ``, + labelTL.X, labelTL.Y, connection.LabelWidth, connection.LabelHeight, connection.Fill) + } textStyle := fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "middle", connection.FontSize, fontColor) x := labelTL.X + float64(connection.LabelWidth)/2 y := labelTL.Y + float64(connection.FontSize) diff --git a/d2target/d2target.go b/d2target/d2target.go index 41dc4c718..ae098fd28 100644 --- a/d2target/d2target.go +++ b/d2target/d2target.go @@ -207,6 +207,7 @@ type Connection struct { StrokeDash float64 `json:"strokeDash"` StrokeWidth int `json:"strokeWidth"` Stroke string `json:"stroke"` + Fill string `json:"fill,omitempty"` Text LabelPosition string `json:"labelPosition"` From 73a4ac1a6e8d4deba36e9c8b41587bda55c74c59 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Fri, 16 Dec 2022 15:48:24 -0800 Subject: [PATCH 04/56] update tests --- e2etests/testdata/stable/font_sizes/dagre/board.exp.json | 1 + e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg | 2 +- e2etests/testdata/stable/font_sizes/elk/board.exp.json | 1 + e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg | 2 +- e2etests/testdata/stable/stylish/dagre/board.exp.json | 1 + e2etests/testdata/stable/stylish/dagre/sketch.exp.svg | 2 +- e2etests/testdata/stable/stylish/elk/board.exp.json | 1 + e2etests/testdata/stable/stylish/elk/sketch.exp.svg | 2 +- 8 files changed, 8 insertions(+), 4 deletions(-) diff --git a/e2etests/testdata/stable/font_sizes/dagre/board.exp.json b/e2etests/testdata/stable/font_sizes/dagre/board.exp.json index 3a91ea14e..0579a08d9 100644 --- a/e2etests/testdata/stable/font_sizes/dagre/board.exp.json +++ b/e2etests/testdata/stable/font_sizes/dagre/board.exp.json @@ -591,6 +591,7 @@ "strokeDash": 0, "strokeWidth": 2, "stroke": "#0D32B2", + "fill": "lavender", "label": "custom 48", "fontSize": 48, "fontFamily": "DEFAULT", diff --git a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg index 578b7397c..0d98903f7 100644 --- a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg @@ -18,7 +18,7 @@ width="2360" height="632" viewBox="-100 -100 2360 632">size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 custom 10custom 15custom 48 +size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 custom 10custom 15custom 48 diff --git a/e2etests/testdata/stable/font_sizes/elk/board.exp.json b/e2etests/testdata/stable/font_sizes/elk/board.exp.json index 2d5446e61..9658ee501 100644 --- a/e2etests/testdata/stable/font_sizes/elk/board.exp.json +++ b/e2etests/testdata/stable/font_sizes/elk/board.exp.json @@ -573,6 +573,7 @@ "strokeDash": 0, "strokeWidth": 2, "stroke": "#0D32B2", + "fill": "lavender", "label": "custom 48", "fontSize": 48, "fontFamily": "DEFAULT", diff --git a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg index cb9321042..9c69d48ce 100644 --- a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg @@ -18,7 +18,7 @@ width="1965" height="793" viewBox="-88 -88 1965 793">size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 custom 10custom 15custom 48 +size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 custom 10custom 15custom 48 diff --git a/e2etests/testdata/stable/stylish/dagre/board.exp.json b/e2etests/testdata/stable/stylish/dagre/board.exp.json index 10836e6e0..7dce7c5ce 100644 --- a/e2etests/testdata/stable/stylish/dagre/board.exp.json +++ b/e2etests/testdata/stable/stylish/dagre/board.exp.json @@ -95,6 +95,7 @@ "strokeDash": 5, "strokeWidth": 2, "stroke": "green", + "fill": "lavender", "label": "in style", "fontSize": 16, "fontFamily": "DEFAULT", diff --git a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg index f73951c97..8283749e7 100644 --- a/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/stylish/dagre/sketch.exp.svg @@ -28,7 +28,7 @@ width="314" height="552" viewBox="-100 -100 314 552">ninetynineeighty eightseventy sevena\yodetherea\"odea\node ninetynineeighty eightseventy sevena\yodetherea\"odea\node + + +ninetynineeighty eightseventy sevena\yodetherea\"odea\node ninetynineeighty eightseventy sevena\yodetherea\"odea\node + + +hellogoodbye hellogoodbye + + +hellogoodbye hellogoodbye + + +ABAB + + +ABAB + + +b b + + +b b + + +abc abc + + +abc abc + + +ab ab + + +ab ab + + +acbd acbd + + +acbd acbd + + + \ No newline at end of file + + + + \ No newline at end of file diff --git a/e2etests/testdata/sanity/empty/elk/sketch.exp.svg b/e2etests/testdata/sanity/empty/elk/sketch.exp.svg index 9563e1411..20d55bdc1 100644 --- a/e2etests/testdata/sanity/empty/elk/sketch.exp.svg +++ b/e2etests/testdata/sanity/empty/elk/sketch.exp.svg @@ -18,4 +18,7 @@ width="200" height="200" viewBox="-100 -100 200 200"> \ No newline at end of file + + + + \ No newline at end of file diff --git a/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg b/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg index 864693eac..095790f60 100644 --- a/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg @@ -18,7 +18,10 @@ width="1539" height="824" viewBox="-100 -100 1539 824">rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud + + +rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud + + +rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud + + +rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud + + +cba * cba * + + +cba * cba * + + +abcdefghijklmno abcdefghijklmno + + +abcdefghijklmno abcdefghijklmno + + +abcd abcd + + +abcd abcd + + +abc abc + + +abc abc + + +acfbdhg acfbdhg + + +acfbdhg acfbdhg + + +agdfbhec agdfbhec + + +agdfbhec agdfbhec + + +abcdefghijklmnopq abcdefghijklmnopq + + +abcdefghijklmnopq abcdefghijklmnopq + + +finallyatreeandnodessomemoremanythenhereyouhavehierarchyanotherofnestingtreesatreeinsidehierarchyroot finallyatreeandnodessomemoremanythenhereyouhavehierarchyanotherofnestingtreesatreeinsidehierarchyroot + + +finallyatreeandnodessomemoremanythenhereyouhavehierarchyanotherofnestingtreesatreeinsidehierarchyroot finallyatreeandnodessomemoremanythenhereyouhavehierarchyanotherofnestingtreesatreeinsidehierarchyroot + + +bacde21345abcde bacde21345abcde + + +bacde21345abcde bacde21345abcde + + +hellohello + + +hellohello + + +ab ab + + +ab ab + + +abcdefghiqrjmnoszaabbeeffggklptuwxyccddv abcdefghiqrjmnoszaabbeeffggklptuwxyccddv + + +abcdefghiqrjmnoszaabbeeffggklptuwxyccddv abcdefghiqrjmnoszaabbeeffggklptuwxyccddv + + +

Markdown: Syntax

-
ab

Markdown: Syntax

-
ab markdown

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
markdown

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
markdown

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
markdown

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-

code

-
ab

code

-
ab thisgoesmultiple linesthisgoesmultiple lines + + +thisgoesmultiple linesthisgoesmultiple lines + + +abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw + + +abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw + + +abcdefghijklmnopqrstu abcdefghijklmnopqrstu + + +abcdefghijklmnopqrstu abcdefghijklmnopqrstu + + +Foo Baz12hello Foo Baz12hello + + +Foo Baz12hello Foo Baz12hello + + +acdefgbh acdefgbh + + +acdefgbh acdefgbh + + +topabcbottomstartend topabcbottomstartend + + +topabcbottomstartend topabcbottomstartend + + +ba a note here to remember that padding must consider notes toojustalongnotehereba a note here to remember that padding must consider notes toojustalongnotehere + + +ba a note here to remember that padding must consider notes toojustalongnotehereba a note here to remember that padding must consider notes toojustalongnotehere + + +scoreritemResponseitemessayRubricconceptitemOutcome scoreritemResponseitemessayRubricconceptitemOutcome + + +scoreritemResponseitemessayRubricconceptitemOutcome scoreritemResponseitemessayRubricconceptitemOutcome + + +acbl1l2c1l2c3l2c2l3c1l3c2l4bacacbabcc1c2c3abc acbl1l2c1l2c3l2c2l3c1l3c2l4bacacbabcc1c2c3abc + + +acbl1l2c1l2c3l2c2l3c1l3c2l4bacacbabcc1c2c3abc acbl1l2c1l2c3l2c2l3c1l3c2l4bacacbabcc1c2c3abc + + + -cube -cubeAKHIALFLGAMSTNAZCANVNMUTARLAMOOKTXORCOKSNEWYCTMANYRIDEMDNJPANCSCIDMTWAILINIAMIKYWIOHMNSDVAWVMENHVTNDAKHIALFLGAMSTNAZCANVNMUTARLAMOOKTXORCOKSNEWYCTMANYRIDEMDNJPANCSCIDMTWAILINIAMIKYWIOHMNSDVAWVMENHVTND + + +AKHIALFLGAMSTNAZCANVNMUTARLAMOOKTXORCOKSNEWYCTMANYRIDEMDNJPANCSCIDMTWAILINIAMIKYWIOHMNSDVAWVMENHVTNDAKHIALFLGAMSTNAZCANVNMUTARLAMOOKTXORCOKSNEWYCTMANYRIDEMDNJPANCSCIDMTWAILINIAMIKYWIOHMNSDVAWVMENHVTND + + +ninety ninesixty fourthirty twosixteeneightninety ninesixty fourthirty twosixteeneight + + +ninety ninesixty fourthirty twosixteeneightninety ninesixty fourthirty twosixteeneight + + +rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud +rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud +rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud cba * +cba * aaadddeeebbbccc111 222 +aaadddeeebbbccc111 222 - + aabbllmm

nn

oocciikkdd

gg

hhjj

ee

-
ff1122 334455667788 +ff1122 334455667788 - + - + aabbccddllffwwyynniijjkkssuurmeemmmmgghhzzooppqqrrttvvxxabac 123456 +aabbccddllffwwyynniijjkkssuurmeemmmmgghhzzooppqqrrttvvxxabac 123456 - - + + diff --git a/e2etests/testdata/stable/sequence_diagrams/elk/board.exp.json b/e2etests/testdata/stable/sequence_diagrams/elk/board.exp.json index 3ed298e02..81a532b8a 100644 --- a/e2etests/testdata/stable/sequence_diagrams/elk/board.exp.json +++ b/e2etests/testdata/stable/sequence_diagrams/elk/board.exp.json @@ -3565,7 +3565,7 @@ "route": [ { "x": 748, - "y": 176 + "y": 165 }, { "x": 748, @@ -3729,7 +3729,7 @@ "route": [ { "x": 830, - "y": 176 + "y": 165 }, { "x": 830, diff --git a/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg index b043d6fdd..938982dd1 100644 --- a/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg @@ -18,7 +18,7 @@ width="3324" height="4389" viewBox="-88 -88 3324 4389">a_shapea_sequenceanotherfinallysequencesequencesequencescoreritemResponseitemessayRubricconceptitemOutcomescorerconceptessayRubricitemitemOutcomeitemResponsescoreritemResponseitemessayRubricconceptitemOutcome getItem()itemgetRubric()rubricapplyTo(essayResp)match(essayResponse)scorenewgetNormalMinimum()getNormalMaximum()setScore(score)setFeedback(missingConcepts)getItem()itemgetRubric()rubricapplyTo(essayResp)match(essayResponse)scorenewgetNormalMinimum()getNormalMaximum()setScore(score)setFeedback(missingConcepts) +a_shapea_sequenceanotherfinallysequencesequencesequencescoreritemResponseitemessayRubricconceptitemOutcomescorerconceptessayRubricitemitemOutcomeitemResponsescoreritemResponseitemessayRubricconceptitemOutcome getItem()itemgetRubric()rubricapplyTo(essayResp)match(essayResponse)scorenewgetNormalMinimum()getNormalMaximum()setScore(score)setFeedback(missingConcepts)getItem()itemgetRubric()rubricapplyTo(essayResp)match(essayResponse)scorenewgetNormalMinimum()getNormalMaximum()setScore(score)setFeedback(missingConcepts) From a0515da60b4582a00acd6deddd9e6bc5e46e48ce Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Sat, 17 Dec 2022 20:47:14 -0800 Subject: [PATCH 15/56] changelog --- ci/release/changelogs/next.md | 1 + 1 file changed, 1 insertion(+) diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md index 14a6c2a39..10392f641 100644 --- a/ci/release/changelogs/next.md +++ b/ci/release/changelogs/next.md @@ -17,4 +17,5 @@ [https://github.com/terrastruct/d2/issues/415](https://github.com/terrastruct/d2/issues/415) - Fixed serialization affecting binary plugins (TALA). [https://github.com/terrastruct/d2/pull/426](https://github.com/terrastruct/d2/pull/426) +- Fixed connections in elk layouts not going all the way to shape borders. [https://github.com/terrastruct/d2/pull/459](https://github.com/terrastruct/d2/pull/459) - Fixed a connection rendering bug that could happen in firefox when there were no connection labels. [https://github.com/terrastruct/d2/pull/453](https://github.com/terrastruct/d2/pull/453) From d28aed6184d163a45922073d603b39c6af08c137 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Sat, 17 Dec 2022 20:59:02 -0800 Subject: [PATCH 16/56] add markdown_stroke_fill e2e test --- e2etests/stable_test.go | 30 + .../markdown_stroke_fill/dagre/board.exp.json | 173 ++++ .../markdown_stroke_fill/dagre/sketch.exp.svg | 803 ++++++++++++++++++ .../markdown_stroke_fill/elk/board.exp.json | 164 ++++ .../markdown_stroke_fill/elk/sketch.exp.svg | 803 ++++++++++++++++++ 5 files changed, 1973 insertions(+) create mode 100644 e2etests/testdata/stable/markdown_stroke_fill/dagre/board.exp.json create mode 100644 e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg create mode 100644 e2etests/testdata/stable/markdown_stroke_fill/elk/board.exp.json create mode 100644 e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg diff --git a/e2etests/stable_test.go b/e2etests/stable_test.go index be9381938..76f4cf12a 100644 --- a/e2etests/stable_test.go +++ b/e2etests/stable_test.go @@ -1483,6 +1483,36 @@ a.note: "just\na\nlong\nnote\nhere"`, script: `shape: sequence_diagram alice -> bob: what does it mean to be well-adjusted bob -> alice: The ability to play bridge or golf as if they were games +`, + }, + { + name: "markdown_stroke_fill", + script: ` +container.md: |md +# a header + +a line of text and an + + { + indented: "block", + of: "json", + } + +walk into a bar. +| { + style.stroke: darkorange +} + +container -> no container + +no container: |md +they did it in style +| + +no container.style: { + stroke: red + fill: "#CEEDEE" +} `, }, } diff --git a/e2etests/testdata/stable/markdown_stroke_fill/dagre/board.exp.json b/e2etests/testdata/stable/markdown_stroke_fill/dagre/board.exp.json new file mode 100644 index 000000000..820cea6e3 --- /dev/null +++ b/e2etests/testdata/stable/markdown_stroke_fill/dagre/board.exp.json @@ -0,0 +1,173 @@ +{ + "name": "", + "shapes": [ + { + "id": "container", + "type": "", + "pos": { + "x": 0, + "y": 0 + }, + "width": 312, + "height": 357, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#E3E9FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "container", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 117, + "labelHeight": 41, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "container.md", + "type": "text", + "pos": { + "x": 50, + "y": 50 + }, + "width": 212, + "height": 257, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#FFFFFF", + "stroke": "darkorange", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "# a header\n\na line of text and an\n\n\t{\n\t\tindented: \"block\",\n\t\tof: \"json\",\n\t}\n\nwalk into a bar.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 212, + "labelHeight": 257, + "zIndex": 0, + "level": 2 + }, + { + "id": "no container", + "type": "text", + "pos": { + "x": 97, + "y": 457 + }, + "width": 118, + "height": 24, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#CEEDEE", + "stroke": "red", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "they did it in style", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 118, + "labelHeight": 24, + "zIndex": 0, + "level": 1 + } + ], + "connections": [ + { + "id": "(container -> no container)[0]", + "src": "container", + "srcArrow": "none", + "srcLabel": "", + "dst": "no container", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 156, + "y": 357 + }, + { + "x": 156, + "y": 397 + }, + { + "x": 156, + "y": 417 + }, + { + "x": 156, + "y": 457 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ] +} diff --git a/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg b/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg new file mode 100644 index 000000000..c72e2fc93 --- /dev/null +++ b/e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg @@ -0,0 +1,803 @@ + +container

they did it in style

+

a header

+

a line of text and an

+
{
+	indented: "block",
+	of: "json",
+}
+
+

walk into a bar.

+
 + + + \ No newline at end of file diff --git a/e2etests/testdata/stable/markdown_stroke_fill/elk/board.exp.json b/e2etests/testdata/stable/markdown_stroke_fill/elk/board.exp.json new file mode 100644 index 000000000..884a594e3 --- /dev/null +++ b/e2etests/testdata/stable/markdown_stroke_fill/elk/board.exp.json @@ -0,0 +1,164 @@ +{ + "name": "", + "shapes": [ + { + "id": "container", + "type": "", + "pos": { + "x": 12, + "y": 12 + }, + "width": 362, + "height": 407, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#E3E9FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "container", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 117, + "labelHeight": 41, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "container.md", + "type": "text", + "pos": { + "x": 87, + "y": 87 + }, + "width": 212, + "height": 257, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#FFFFFF", + "stroke": "darkorange", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "# a header\n\na line of text and an\n\n\t{\n\t\tindented: \"block\",\n\t\tof: \"json\",\n\t}\n\nwalk into a bar.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 212, + "labelHeight": 257, + "zIndex": 0, + "level": 2 + }, + { + "id": "no container", + "type": "text", + "pos": { + "x": 134, + "y": 519 + }, + "width": 118, + "height": 24, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#CEEDEE", + "stroke": "red", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "they did it in style", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 118, + "labelHeight": 24, + "zIndex": 0, + "level": 1 + } + ], + "connections": [ + { + "id": "(container -> no container)[0]", + "src": "container", + "srcArrow": "none", + "srcLabel": "", + "dst": "no container", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 193, + "y": 419 + }, + { + "x": 193, + "y": 519 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ] +} diff --git a/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg b/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg new file mode 100644 index 000000000..9423f5d3c --- /dev/null +++ b/e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg @@ -0,0 +1,803 @@ + +container

they did it in style

+

a header

+

a line of text and an

+
{
+	indented: "block",
+	of: "json",
+}
+
+

walk into a bar.

+
 + + + \ No newline at end of file From 1a3511d632ea866f7467fcaa0a09e4276ac38a95 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Sat, 17 Dec 2022 21:22:33 -0800 Subject: [PATCH 17/56] apply stroke and fill to markdown --- d2exporter/export.go | 2 ++ d2graph/d2graph.go | 5 ++++- d2renderers/d2svg/d2svg.go | 11 ++++++++++- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/d2exporter/export.go b/d2exporter/export.go index 96900ff01..952a85662 100644 --- a/d2exporter/export.go +++ b/d2exporter/export.go @@ -45,6 +45,8 @@ func applyStyles(shape *d2target.Shape, obj *d2graph.Object) { } if obj.Attributes.Style.Fill != nil { shape.Fill = obj.Attributes.Style.Fill.Value + } else if obj.Attributes.Shape.Value == d2target.ShapeText { + shape.Fill = "transparent" } if obj.Attributes.Style.Stroke != nil { shape.Stroke = obj.Attributes.Style.Stroke.Value diff --git a/d2graph/d2graph.go b/d2graph/d2graph.go index 838ffe6d7..528df55c1 100644 --- a/d2graph/d2graph.go +++ b/d2graph/d2graph.go @@ -397,7 +397,10 @@ func (obj *Object) GetFill(theme *d2themes.Theme) string { func (obj *Object) GetStroke(theme *d2themes.Theme, dashGapSize interface{}) string { shape := obj.Attributes.Shape.Value - if strings.EqualFold(shape, d2target.ShapeCode) || strings.EqualFold(shape, d2target.ShapeClass) || strings.EqualFold(shape, d2target.ShapeSQLTable) { + if strings.EqualFold(shape, d2target.ShapeCode) || + strings.EqualFold(shape, d2target.ShapeClass) || + strings.EqualFold(shape, d2target.ShapeSQLTable) || + strings.EqualFold(shape, d2target.ShapeText) { return theme.Colors.Neutrals.N1 } if dashGapSize != 0.0 { diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index db5b650bc..41a0c63a6 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -770,7 +770,16 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) (labelMask string, ) // we need the self closing form in this svg/xhtml context render = strings.ReplaceAll(render, "
", "
") - fmt.Fprintf(writer, `
%v
`, render) + + var mdStyle string + if targetShape.Fill != "" { + mdStyle = fmt.Sprintf("background-color:%s;", targetShape.Fill) + } + if targetShape.Stroke != "" { + mdStyle += fmt.Sprintf("color:%s;", targetShape.Stroke) + } + + fmt.Fprintf(writer, `
%v
`, mdStyle, render) fmt.Fprint(writer, ``) } default: From 0266a1f802f80cb362b1b6adcff6bf1ce5828dcc Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Sat, 17 Dec 2022 21:34:42 -0800 Subject: [PATCH 18/56] update tests --- e2etests/testdata/stable/chaos2/dagre/board.exp.json | 12 ++++++------ e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg | 8 ++++---- e2etests/testdata/stable/chaos2/elk/board.exp.json | 12 ++++++------ e2etests/testdata/stable/chaos2/elk/sketch.exp.svg | 8 ++++---- .../stable/giant_markdown_test/dagre/board.exp.json | 4 ++-- .../stable/giant_markdown_test/dagre/sketch.exp.svg | 4 ++-- .../stable/giant_markdown_test/elk/board.exp.json | 4 ++-- .../stable/giant_markdown_test/elk/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/hr/dagre/board.exp.json | 4 ++-- e2etests/testdata/stable/hr/dagre/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/hr/elk/board.exp.json | 4 ++-- e2etests/testdata/stable/hr/elk/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/latex/dagre/board.exp.json | 12 ++++++------ e2etests/testdata/stable/latex/dagre/sketch.exp.svg | 2 +- e2etests/testdata/stable/latex/elk/board.exp.json | 12 ++++++------ e2etests/testdata/stable/latex/elk/sketch.exp.svg | 2 +- e2etests/testdata/stable/li1/dagre/board.exp.json | 4 ++-- e2etests/testdata/stable/li1/dagre/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/li1/elk/board.exp.json | 4 ++-- e2etests/testdata/stable/li1/elk/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/li2/dagre/board.exp.json | 4 ++-- e2etests/testdata/stable/li2/dagre/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/li2/elk/board.exp.json | 4 ++-- e2etests/testdata/stable/li2/elk/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/li3/dagre/board.exp.json | 4 ++-- e2etests/testdata/stable/li3/dagre/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/li3/elk/board.exp.json | 4 ++-- e2etests/testdata/stable/li3/elk/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/li4/dagre/board.exp.json | 4 ++-- e2etests/testdata/stable/li4/dagre/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/li4/elk/board.exp.json | 4 ++-- e2etests/testdata/stable/li4/elk/sketch.exp.svg | 4 ++-- .../testdata/stable/lone_h1/dagre/board.exp.json | 4 ++-- .../testdata/stable/lone_h1/dagre/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/lone_h1/elk/board.exp.json | 4 ++-- e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg | 4 ++-- .../testdata/stable/markdown/dagre/board.exp.json | 4 ++-- .../testdata/stable/markdown/dagre/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/markdown/elk/board.exp.json | 4 ++-- e2etests/testdata/stable/markdown/elk/sketch.exp.svg | 4 ++-- .../stable/markdown_stroke_fill/dagre/board.exp.json | 2 +- .../stable/markdown_stroke_fill/dagre/sketch.exp.svg | 6 +++--- .../stable/markdown_stroke_fill/elk/board.exp.json | 2 +- .../stable/markdown_stroke_fill/elk/sketch.exp.svg | 6 +++--- .../stable/md_2space_newline/dagre/board.exp.json | 4 ++-- .../stable/md_2space_newline/dagre/sketch.exp.svg | 4 ++-- .../stable/md_2space_newline/elk/board.exp.json | 4 ++-- .../stable/md_2space_newline/elk/sketch.exp.svg | 4 ++-- .../stable/md_backslash_newline/dagre/board.exp.json | 4 ++-- .../stable/md_backslash_newline/dagre/sketch.exp.svg | 4 ++-- .../stable/md_backslash_newline/elk/board.exp.json | 4 ++-- .../stable/md_backslash_newline/elk/sketch.exp.svg | 4 ++-- .../stable/md_code_block_fenced/dagre/board.exp.json | 4 ++-- .../stable/md_code_block_fenced/dagre/sketch.exp.svg | 4 ++-- .../stable/md_code_block_fenced/elk/board.exp.json | 4 ++-- .../stable/md_code_block_fenced/elk/sketch.exp.svg | 4 ++-- .../md_code_block_indented/dagre/board.exp.json | 4 ++-- .../md_code_block_indented/dagre/sketch.exp.svg | 4 ++-- .../stable/md_code_block_indented/elk/board.exp.json | 4 ++-- .../stable/md_code_block_indented/elk/sketch.exp.svg | 4 ++-- .../stable/md_code_inline/dagre/board.exp.json | 4 ++-- .../stable/md_code_inline/dagre/sketch.exp.svg | 4 ++-- .../stable/md_code_inline/elk/board.exp.json | 4 ++-- .../stable/md_code_inline/elk/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/p/dagre/board.exp.json | 4 ++-- e2etests/testdata/stable/p/dagre/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/p/elk/board.exp.json | 4 ++-- e2etests/testdata/stable/p/elk/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/pre/dagre/board.exp.json | 4 ++-- e2etests/testdata/stable/pre/dagre/sketch.exp.svg | 4 ++-- e2etests/testdata/stable/pre/elk/board.exp.json | 4 ++-- e2etests/testdata/stable/pre/elk/sketch.exp.svg | 4 ++-- 72 files changed, 162 insertions(+), 162 deletions(-) diff --git a/e2etests/testdata/stable/chaos2/dagre/board.exp.json b/e2etests/testdata/stable/chaos2/dagre/board.exp.json index c928b6a24..79dbd4512 100644 --- a/e2etests/testdata/stable/chaos2/dagre/board.exp.json +++ b/e2etests/testdata/stable/chaos2/dagre/board.exp.json @@ -174,8 +174,8 @@ "strokeDash": 0, "strokeWidth": 2, "borderRadius": 0, - "fill": "#FFFFFF", - "stroke": "#0D32B2", + "fill": "transparent", + "stroke": "#0A0F25", "shadow": false, "3d": false, "multiple": false, @@ -253,8 +253,8 @@ "strokeDash": 0, "strokeWidth": 2, "borderRadius": 0, - "fill": "#FFFFFF", - "stroke": "#0D32B2", + "fill": "transparent", + "stroke": "#0A0F25", "shadow": false, "3d": false, "multiple": false, @@ -532,8 +532,8 @@ "strokeDash": 0, "strokeWidth": 2, "borderRadius": 0, - "fill": "#FFFFFF", - "stroke": "#0D32B2", + "fill": "transparent", + "stroke": "#0A0F25", "shadow": false, "3d": false, "multiple": false, diff --git a/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg b/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg index f29093782..ef295905d 100644 --- a/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg @@ -774,10 +774,10 @@ width="1317" height="1854" viewBox="-100 -100 1317 1854">aabbllmm

nn

-
oocciikkdd

gg

-
hhjj

ee

-
ff1122 334455667788 +aabbllmm

nn

+
oocciikkdd

gg

+
hhjj

ee

+
ff1122 334455667788 diff --git a/e2etests/testdata/stable/chaos2/elk/board.exp.json b/e2etests/testdata/stable/chaos2/elk/board.exp.json index 1aa503f04..9efdf2116 100644 --- a/e2etests/testdata/stable/chaos2/elk/board.exp.json +++ b/e2etests/testdata/stable/chaos2/elk/board.exp.json @@ -174,8 +174,8 @@ "strokeDash": 0, "strokeWidth": 2, "borderRadius": 0, - "fill": "#FFFFFF", - "stroke": "#0D32B2", + "fill": "transparent", + "stroke": "#0A0F25", "shadow": false, "3d": false, "multiple": false, @@ -253,8 +253,8 @@ "strokeDash": 0, "strokeWidth": 2, "borderRadius": 0, - "fill": "#FFFFFF", - "stroke": "#0D32B2", + "fill": "transparent", + "stroke": "#0A0F25", "shadow": false, "3d": false, "multiple": false, @@ -532,8 +532,8 @@ "strokeDash": 0, "strokeWidth": 2, "borderRadius": 0, - "fill": "#FFFFFF", - "stroke": "#0D32B2", + "fill": "transparent", + "stroke": "#0A0F25", "shadow": false, "3d": false, "multiple": false, diff --git a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg index f55323cfa..d40735703 100644 --- a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg @@ -774,10 +774,10 @@ width="1092" height="1907" viewBox="-88 -88 1092 1907">aabbllmm

nn

-
oocciikkdd

gg

-
hhjj

ee

-
ff1122 334455667788 +aabbllmm

nn

+
oocciikkdd

gg

+
hhjj

ee

+
ff1122 334455667788 diff --git a/e2etests/testdata/stable/giant_markdown_test/dagre/board.exp.json b/e2etests/testdata/stable/giant_markdown_test/dagre/board.exp.json index 62256201b..414bc5f4a 100644 --- a/e2etests/testdata/stable/giant_markdown_test/dagre/board.exp.json +++ b/e2etests/testdata/stable/giant_markdown_test/dagre/board.exp.json @@ -14,8 +14,8 @@ "strokeDash": 0, "strokeWidth": 2, "borderRadius": 0, - "fill": "#FFFFFF", - "stroke": "#0D32B2", + "fill": "transparent", + "stroke": "#0A0F25", "shadow": false, "3d": false, "multiple": false, diff --git a/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg b/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg index 920493c11..14fc3e202 100644 --- a/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg @@ -774,7 +774,7 @@ width="3251" height="5500" viewBox="-100 -100 3251 5500">

Markdown: Syntax

+

Markdown: Syntax

  • Overview
      @@ -1031,7 +1031,7 @@ title for the link, surrounded in quotes. For example:

      Code

      Unlike a pre-formatted code block, a code span indicates code within a normal paragraph. For example:

      -
ab +
ab

Markdown: Syntax

+

Markdown: Syntax

  • Overview
      @@ -1031,7 +1031,7 @@ title for the link, surrounded in quotes. For example:

      Code

      Unlike a pre-formatted code block, a code span indicates code within a normal paragraph. For example:

      -
ab +
ab

Note: This document is itself written using Markdown; you +

Note: This document is itself written using Markdown; you can see the source for it by adding '.text' to the URL.

Overview

-
ab +
ab

Note: This document is itself written using Markdown; you +

Note: This document is itself written using Markdown; you can see the source for it by adding '.text' to the URL.

Overview

-
ab +
ab mixed togethersugarsolution we get +mixed togethersugarsolution we get mixed togethersugarsolution we get +mixed togethersugarsolution we get
    +
    • Overview
      • Philosophy
        • @@ -786,7 +786,7 @@ width="579" height="752" viewBox="-100 -100 579 752">
          +
          • Overview
            • Philosophy
              • @@ -786,7 +786,7 @@ width="579" height="752" viewBox="-88 -88 579 752">
                +
                • Overview ok this is all measured
                  • Philosophy
                    • @@ -782,7 +782,7 @@ width="445" height="728" viewBox="-100 -100 445 728">
                      +
                      • Overview ok this is all measured
                        • Philosophy
                          • @@ -782,7 +782,7 @@ width="445" height="728" viewBox="-88 -88 445 728">
                            +
                            • Overview
                              • Philosophy
                                • @@ -807,7 +807,7 @@ width="547" height="1164" viewBox="-100 -100 547 1164">
                                  +
                                  • Overview
                                    • Philosophy
                                      • @@ -807,7 +807,7 @@ width="547" height="1164" viewBox="-88 -88 547 1164">

                                      List items may consist of multiple paragraphs. Each subsequent +

                                      List items may consist of multiple paragraphs. Each subsequent paragraph in a list item must be indented by either 4 spaces or one tab:

                                        @@ -805,7 +805,7 @@ sit amet, consectetuer adipiscing elit.

                                        Another item in the same list.

                                    -
                                  ab +
                                ab

                                List items may consist of multiple paragraphs. Each subsequent +

                                List items may consist of multiple paragraphs. Each subsequent paragraph in a list item must be indented by either 4 spaces or one tab:

                                  @@ -805,7 +805,7 @@ sit amet, consectetuer adipiscing elit.

                                  Another item in the same list.

                              -
                            ab +
                          ab

                          Markdown: Syntax

                          -
                          ab +

                          Markdown: Syntax

                          +
                          ab

                          Markdown: Syntax

                          -
                          ab +

                          Markdown: Syntax

                          +
                          ab

                          Every frustum longs to be a cone

                          +

                          Every frustum longs to be a cone

                          • A continuing flow of paper is sufficient to continue the flow of paper
                          • Please remain calm, it's no use both of us being hysterical at the same time
                          • Visits always give pleasure: if not on arrival, then on the departure

                          Festivity Level 1: Your guests are chatting amiably with each other.

                          -
                          xy +
                          xy

                          Every frustum longs to be a cone

                          +

                          Every frustum longs to be a cone

                          • A continuing flow of paper is sufficient to continue the flow of paper
                          • Please remain calm, it's no use both of us being hysterical at the same time
                          • Visits always give pleasure: if not on arrival, then on the departure

                          Festivity Level 1: Your guests are chatting amiably with each other.

                          -
                          xy +
                          xy container

                          they did it in style

                          -

                          a header

                          +container

                          they did it in style

                          +

                          a header

                          a line of text and an

                          {
 	indented: "block",
@@ -783,7 +783,7 @@ width="512" height="681" viewBox="-100 -100 512 681">container
                          they did it in style
                          
-
                          a header
                          
+container
                          they did it in style
                          
+
                          a header
                          
 
                          a line of text and an
                          
 
                          {
 	indented: "block",
@@ -783,7 +783,7 @@ width="562" height="731" viewBox="-88 -88 562 731">markdown
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                          
+markdown
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                          
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          
-
                          
+
                          
 
 
 markdown
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                          
+markdown
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                          
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          
-
                          
+
                          
 
 
 markdown
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                          
+markdown
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                          
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          
-
                          
+
                          
 
 
 markdown
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                          
+markdown
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                          
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          
-
                          
+
                          
 
 
 
                          {
+
                          {
 	fenced: "block",
 	of: "json",
 }
 
                          
-
                          ab  
+
                          ab  
 
 
 
                          {
+
                          {
 	fenced: "block",
 	of: "json",
 }
 
                          
-
                          ab  
+
                          ab  
 
 
 
                          a line of text and an
                          
+
                          a line of text and an
                          
 
                          {
 	indented: "block",
 	of: "json",
 }
 
                          
-
                          ab  
+
                          ab  
 
 
 
                          a line of text and an
                          
+
                          a line of text and an
                          
 
                          {
 	indented: "block",
 	of: "json",
 }
 
                          
-
                          ab  
+
                          ab  
 
 
 
                          code
                          
-
                          ab  
+
                          code
                          
+
                          ab  
 
 
 
                          code
                          
-
                          ab  
+
                          code
                          
+
                          ab  
 
 
 
                          A paragraph is simply one or more consecutive lines of text, separated
+
                          A paragraph is simply one or more consecutive lines of text, separated
 by one or more blank lines. (A blank line is any line that looks like a
 blank line -- a line containing nothing but spaces or tabs is considered
 blank.) Normal paragraphs should not be indented with spaces or tabs.
                          
-
                          ab  
+
                          ab  
 
 
 
                          A paragraph is simply one or more consecutive lines of text, separated
+
                          A paragraph is simply one or more consecutive lines of text, separated
 by one or more blank lines. (A blank line is any line that looks like a
 blank line -- a line containing nothing but spaces or tabs is considered
 blank.) Normal paragraphs should not be indented with spaces or tabs.
                          
-
                          ab  
+
                          ab  
 
 
 
                          Here is an example of AppleScript:
                          
+
                          Here is an example of AppleScript:
                          
 
                          tell application "Foo"
     beep
 end tell
 
                          
 
                          A code block continues until it reaches a line that is not indented
 (or the end of the article).
                          
-
                          ab  
+
                          ab  
 
 
 
                          Here is an example of AppleScript:
                          
+
                          Here is an example of AppleScript:
                          
 
                          tell application "Foo"
     beep
 end tell
 
                          
 
                          A code block continues until it reaches a line that is not indented
 (or the end of the article).
                          
-
                          ab  
+
                          ab  
 
 
 success: successfully compiled - to -
---
 main.go | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/main.go b/main.go
index f37c40c0a..ce2af7899 100644
--- a/main.go
+++ b/main.go
@@ -243,6 +243,10 @@ func compile(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, pad,
 		if err != nil {
 			return svg, false, err
 		}
+	} else {
+		if len(out) > 0  && out[len(out)-1] != '\n' {
+			out = append(out, '\n')
+		}
 	}
 
 	err = ms.WritePath(outputPath, out)

From 4a5a02a4cc2e5842da9e7eb388e84225c5a1f7b8 Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 11:22:37 -0800
Subject: [PATCH 39/56] ci/sub: Update

---
 ci/sub | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ci/sub b/ci/sub
index 55bf1d39f..21542934c 160000
--- a/ci/sub
+++ b/ci/sub
@@ -1 +1 @@
-Subproject commit 55bf1d39f3d524804422d4bdb4559cd6ff151b49
+Subproject commit 21542934c5318ad3acab232bd15ef50e458663c6

From 54e2f870d2b9139e21788c92e7af9f6ea01e7f6a Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 11:32:20 -0800
Subject: [PATCH 40/56] ci/aws: Fix env on ubuntu

---
 ci/release/aws/ensure.sh | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ci/release/aws/ensure.sh b/ci/release/aws/ensure.sh
index 66cc1cb1b..d5de7dfca 100755
--- a/ci/release/aws/ensure.sh
+++ b/ci/release/aws/ensure.sh
@@ -381,6 +381,9 @@ init_remote_env() {
   if sh_c ssh "$REMOTE_HOST" uname | grep -qF Darwin; then
     sh_c ssh "$REMOTE_HOST" "sudo launchctl stop com.openssh.sshd"
   else
+    # ubuntu has $PATH hard coded in /etc/environment for some reason. It takes precedence
+    # over ~/.ssh/environment.
+    sh_c ssh "$REMOTE_HOST" "sudo rm /etc/environment"
     sh_c ssh "$REMOTE_HOST" "sudo systemctl restart sshd"
   fi
 }

From 72c0b76a22e12fc2639af011ad5350e39403c318 Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 11:45:48 -0800
Subject: [PATCH 41/56] ci/aws: Copy SSH keys onto macOS hosts

---
 ci/release/aws/ensure.sh | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ci/release/aws/ensure.sh b/ci/release/aws/ensure.sh
index d5de7dfca..fb61f4725 100755
--- a/ci/release/aws/ensure.sh
+++ b/ci/release/aws/ensure.sh
@@ -347,6 +347,8 @@ init_remote_macos() {
   header "$REMOTE_NAME"
   wait_remote_host
 
+  sh_c ssh_copy_id -i="$ID_PUB_PATH" "$REMOTE_HOST"
+
   sh_c ssh "$REMOTE_HOST" '"/bin/bash -c \"\$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\""'
 
   if sh_c ssh "$REMOTE_HOST" uname -m | grep -qF arm64; then

From 84d732f804cdb55f9bddf28556d401d908947363 Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 11:49:22 -0800
Subject: [PATCH 42/56] release/README.md: Update Windows template to reflect
 .msi installer

---
 ci/release/template/README.md.sh | 20 ++------------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/ci/release/template/README.md.sh b/ci/release/template/README.md.sh
index 7ccea6fb2..d08a71bf6 100755
--- a/ci/release/template/README.md.sh
+++ b/ci/release/template/README.md.sh
@@ -20,27 +20,11 @@ EOF
 if [ "$OS" = windows ]; then
   cat <\`
-
-For installation you'll have to add the \`./bin/d2.exe\` binary to your \`\$PATH\`. Or add
-the \`./bin\` directory of this release to your \`\$PATH\`.
-
-See https://www.wikihow.com/Change-the-PATH-Environment-Variable-on-Windows
-
-Then you'll be able to call \`d2\` from the commandline in \`cmd.exe\` or \`pwsh.exe\`.
-
-We intend to have a \`.msi\` release installer sometime soon that handles putting \`d2.exe\` into
+You may find our \`.msi\` installer more convenient as it handles putting \`d2.exe\` into
 your \`\$PATH\` for you.
 
-You can also use \`make install\` to install on Windows after first installing
-[MSYS2](https://www.msys2.org/) which emulates a Linux shell for Windows. Its terminal
-also enables \`d2\` to show colors in its output. The manpage will also become accessible
-with \`man d2\`.
-
 See https://github.com/terrastruct/d2/blob/master/docs/INSTALL.md#windows
 EOF
 fi

From ef73cce63bc5e14b38bd6d1ba6dc9a0eeb7bb79e Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 12:22:33 -0800
Subject: [PATCH 43/56] ci/aws: Install man-db on windows

---
 ci/release/aws/ensure.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ci/release/aws/ensure.sh b/ci/release/aws/ensure.sh
index fb61f4725..4ff4e1ee6 100755
--- a/ci/release/aws/ensure.sh
+++ b/ci/release/aws/ensure.sh
@@ -468,7 +468,7 @@ if (-Not (Test-Path -Path C:\msys64)) {
   Invoke-WebRequest -Uri "https://github.com/msys2/msys2-installer/releases/download/2022-10-28/msys2-x86_64-20221028.exe" -OutFile "./msys2-x86_64.exe"
   ./msys2-x86_64.exe install --default-answer --confirm-command --root C:\msys64
 }
-C:\msys64\msys2_shell.cmd -defterm -here -no-start -mingw64 -c 'pacman -Sy --noconfirm base-devel vim rsync'
+C:\msys64\msys2_shell.cmd -defterm -here -no-start -mingw64 -c 'pacman -Sy --noconfirm base-devel vim rsync man'
 C:\msys64\msys2_shell.cmd -defterm -here -no-start -mingw64 -c 'curl -fsSL https://d2lang.com/install.sh | sh -s -- --tala'
 C:\msys64\msys2_shell.cmd -defterm -here -no-start -mingw64 -c 'd2 --version'
 

From 908ccaf50c5ad54ad5040c8a4f1db3a9c0f7f0ef Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 12:24:11 -0800
Subject: [PATCH 44/56] ci/sub: Update [ci-force]

---
 ci/sub | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ci/sub b/ci/sub
index 21542934c..2f443c093 160000
--- a/ci/sub
+++ b/ci/sub
@@ -1 +1 @@
-Subproject commit 21542934c5318ad3acab232bd15ef50e458663c6
+Subproject commit 2f443c093f402bcc971eddec8abea1f385fa13e0

From f7d63213c758010b47349d25fba5decb5b41d6c2 Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 12:26:58 -0800
Subject: [PATCH 45/56] fmt

---
 docs/CONTRIBUTING.md | 21 ++++++++-------------
 main.go              |  2 +-
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
index f5b08f6b1..801917b2b 100644
--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@@ -1,19 +1,14 @@
 # Contributing
 
 
-
-- [CI](#ci)
-- [Flow](#flow)
-- [Logistics](#logistics)
-- [Dev](#dev)
-  * [Content](#content)
-  * [Tests](#tests)
-    + [Running tests](#running-tests)
-    + [Chaos tests](#chaos-tests)
-  * [Documentation](#documentation)
-  * [Questions](#questions)
-
-
+- CI
+- Flow
+- Logistics
+- Dev
+  - Content
+  - Tests
+  - Documentation
+  - Questions
 
 ## CI
 
diff --git a/main.go b/main.go
index ce2af7899..53ef5d201 100644
--- a/main.go
+++ b/main.go
@@ -244,7 +244,7 @@ func compile(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, pad,
 			return svg, false, err
 		}
 	} else {
-		if len(out) > 0  && out[len(out)-1] != '\n' {
+		if len(out) > 0 && out[len(out)-1] != '\n' {
 			out = append(out, '\n')
 		}
 	}

From b2b1382d58f5bed419a0ac8bb1777af9d5f07d4c Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 12:28:14 -0800
Subject: [PATCH 46/56] ci/sub: Update [ci-force]

---
 ci/sub | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ci/sub b/ci/sub
index 2f443c093..8c1b0bba1 160000
--- a/ci/sub
+++ b/ci/sub
@@ -1 +1 @@
-Subproject commit 2f443c093f402bcc971eddec8abea1f385fa13e0
+Subproject commit 8c1b0bba1d2539a11fc2b3f4fcf054d1d71f05a5

From d21a923f1f716585b5d6b73bf73b9652af36ec53 Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 12:30:19 -0800
Subject: [PATCH 47/56] changelog: Fix wrapping

---
 ci/release/changelogs/next.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index 58d3c237e..15c92e332 100644
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@@ -7,8 +7,7 @@
 
 #### Improvements 🧹
 
-- `d2 fmt` now preserves leading comment spacing.
-  [#400](https://github.com/terrastruct/d2/issues/400)
+- `d2 fmt` now preserves leading comment spacing. [#400](https://github.com/terrastruct/d2/issues/400)
 
 #### Bugfixes ⛑️
 

From 112c0a0d7d81fb73f702e8be1c4e5589014e6a9c Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 12:33:42 -0800
Subject: [PATCH 48/56] deps: update [ci-base] [ci-force]

---
 go.mod | 2 +-
 go.sum | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/go.mod b/go.mod
index 74e905dbd..7a7910207 100644
--- a/go.mod
+++ b/go.mod
@@ -21,7 +21,7 @@ require (
 	golang.org/x/xerrors v0.0.0-20220907171357-04be3eba64a2
 	gonum.org/v1/plot v0.12.0
 	nhooyr.io/websocket v1.8.7
-	oss.terrastruct.com/util-go v0.0.0-20221213112904-c09378905bfb
+	oss.terrastruct.com/util-go v0.0.0-20221218203331-558e3b4adc95
 )
 
 require (
diff --git a/go.sum b/go.sum
index fb6710cf6..e77eb6d53 100644
--- a/go.sum
+++ b/go.sum
@@ -806,8 +806,8 @@ honnef.co/go/tools v0.0.1-2020.1.3/go.mod h1:X/FiERA/W4tHapMX5mGpAtMSVEeEUOyHaw9
 honnef.co/go/tools v0.0.1-2020.1.4/go.mod h1:X/FiERA/W4tHapMX5mGpAtMSVEeEUOyHaw9vFzvIQ3k=
 nhooyr.io/websocket v1.8.7 h1:usjR2uOr/zjjkVMy0lW+PPohFok7PCow5sDjLgX4P4g=
 nhooyr.io/websocket v1.8.7/go.mod h1:B70DZP8IakI65RVQ51MsWP/8jndNma26DVA/nFSCgW0=
-oss.terrastruct.com/util-go v0.0.0-20221213112904-c09378905bfb h1:ybqEeDAI/VyaVgPd5kis5aq+IPhHI3dQmdSxFG6SuuY=
-oss.terrastruct.com/util-go v0.0.0-20221213112904-c09378905bfb/go.mod h1:Fwy72FDIOOM4K8F96ScXkxHHppR1CPfUyo9+x9c1PBU=
+oss.terrastruct.com/util-go v0.0.0-20221218203331-558e3b4adc95 h1:Ya/jgBNhNwZ30BsEcyjf2bTT8dtCdTM2WOSMEeSGB3E=
+oss.terrastruct.com/util-go v0.0.0-20221218203331-558e3b4adc95/go.mod h1:Fwy72FDIOOM4K8F96ScXkxHHppR1CPfUyo9+x9c1PBU=
 rsc.io/binaryregexp v0.2.0/go.mod h1:qTv7/COck+e2FymRvadv62gMdZztPaShugOCi3I+8D8=
 rsc.io/pdf v0.1.1 h1:k1MczvYDUvJBe93bYd7wrZLLUEcLZAuF824/I4e5Xr4=
 rsc.io/quote/v3 v3.1.0/go.mod h1:yEA65RcK8LyAZtP9Kv3t0HmxON59tX3rD+tICJqUlj0=

From 72dfbf708f328f6c236176daba78d536fde5a425 Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 12:41:22 -0800
Subject: [PATCH 49/56] ci/release/build.sh: Automatically clone ci submodule

---
 ci/release/build.sh | 7 ++++++-
 make.sh             | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/ci/release/build.sh b/ci/release/build.sh
index 82da752e3..82f930a51 100755
--- a/ci/release/build.sh
+++ b/ci/release/build.sh
@@ -1,7 +1,12 @@
 #!/bin/sh
 set -eu
+if [ ! -e "$(dirname "$0")/../../ci/sub/.git" ]; then
+  set -x
+  git submodule update --init
+  set +x
+fi
+. "$(dirname "$0")/../../ci/sub/lib.sh"
 cd -- "$(dirname "$0")/../.."
-. ./ci/sub/lib.sh
 
 help() {
   cat <
Date: Sun, 18 Dec 2022 12:42:50 -0800
Subject: [PATCH 50/56] docs/INSTALL.md: Document minimum Go version required

---
 docs/INSTALL.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/INSTALL.md b/docs/INSTALL.md
index 8141d9fc3..410c95f77 100644
--- a/docs/INSTALL.md
+++ b/docs/INSTALL.md
@@ -158,6 +158,8 @@ You can always install from source:
 go install oss.terrastruct.com/d2@latest
 ```
 
+You need at least Go v1.18
+
 ### Source Release
 
 To install a release from source clone the repository and then:
@@ -173,6 +175,8 @@ fonts and icons. Furthermore, when installing a non versioned commit, installing
 will ensure that `d2 --version` works correctly by embedding the commit hash into the `d2`
 binary.
 
+Remember, you need at least Go v1.18
+
 ## Windows
 
 We have prebuilt releases of d2 available for Windows via `.msi` installers. The installer

From be92906d9ad85ddb21227917164b4b1c384ab0a5 Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 12:50:12 -0800
Subject: [PATCH 51/56] ci/release/aws: Reorder some statments [ci-force]

---
 ci/release/aws/ensure.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ci/release/aws/ensure.sh b/ci/release/aws/ensure.sh
index 4ff4e1ee6..4c4020da5 100755
--- a/ci/release/aws/ensure.sh
+++ b/ci/release/aws/ensure.sh
@@ -383,10 +383,10 @@ init_remote_env() {
   if sh_c ssh "$REMOTE_HOST" uname | grep -qF Darwin; then
     sh_c ssh "$REMOTE_HOST" "sudo launchctl stop com.openssh.sshd"
   else
+    sh_c ssh "$REMOTE_HOST" "sudo systemctl restart sshd"
     # ubuntu has $PATH hard coded in /etc/environment for some reason. It takes precedence
     # over ~/.ssh/environment.
     sh_c ssh "$REMOTE_HOST" "sudo rm /etc/environment"
-    sh_c ssh "$REMOTE_HOST" "sudo systemctl restart sshd"
   fi
 }
 

From 8f69f49f8b133431dfc68a6366b45cca849a08e6 Mon Sep 17 00:00:00 2001
From: Anmol Sethi 
Date: Sun, 18 Dec 2022 19:44:35 -0800
Subject: [PATCH 52/56] ci/aws: Use ssh-keygen in better spot

---
 ci/release/aws/ensure.sh | 4 ++--
 ci/sub                   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ci/release/aws/ensure.sh b/ci/release/aws/ensure.sh
index 4c4020da5..5f68e45b3 100755
--- a/ci/release/aws/ensure.sh
+++ b/ci/release/aws/ensure.sh
@@ -267,6 +267,7 @@ wait_remote_host_ip() {
       ip=$(sh_c aws ec2 describe-instances \
         --filters 'Name=instance-state-name,Values=pending,running,stopping,stopped' "Name=tag:Name,Values=$REMOTE_NAME" \
         | jq -r '.Reservations[].Instances[].PublicIpAddress')
+      ssh-keygen -R "$ip"
       break
     fi
     sleep 5
@@ -391,7 +392,6 @@ init_remote_env() {
 }
 
 wait_remote_host() {
-  ssh-keygen -R "${REMOTE_HOST##*@}"
   while true; do
     if sh_c ssh "$REMOTE_HOST" true; then
       break
@@ -538,7 +538,7 @@ EOF
   printf '%s\n' "$gen_init_ps1" >&2
   warn '4. Run the following to be notified once installation is successful:'
   cat <
Date: Sun, 18 Dec 2022 20:03:07 -0800
Subject: [PATCH 53/56] fix sequence edge identify

---
 d2layouts/d2sequence/layout.go                |   2 +-
 d2layouts/d2sequence/sequence_diagram.go      |   4 +-
 e2etests/regression_test.go                   |  12 +
 .../dagre/board.exp.json                      | 529 ++++++++++++++++++
 .../dagre/sketch.exp.svg                      |  28 +
 .../elk/board.exp.json                        | 520 +++++++++++++++++
 .../elk/sketch.exp.svg                        |  28 +
 7 files changed, 1120 insertions(+), 3 deletions(-)
 create mode 100644 e2etests/testdata/regression/sequence_diagram_name_crash/dagre/board.exp.json
 create mode 100644 e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
 create mode 100644 e2etests/testdata/regression/sequence_diagram_name_crash/elk/board.exp.json
 create mode 100644 e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg

diff --git a/d2layouts/d2sequence/layout.go b/d2layouts/d2sequence/layout.go
index 42efeb174..55192ceab 100644
--- a/d2layouts/d2sequence/layout.go
+++ b/d2layouts/d2sequence/layout.go
@@ -88,7 +88,7 @@ func layoutSequenceDiagram(g *d2graph.Graph, obj *d2graph.Object) (*sequenceDiag
 	var edges []*d2graph.Edge
 	for _, edge := range g.Edges {
 		// both Src and Dst must be inside the sequence diagram
-		if strings.HasPrefix(edge.Src.AbsID(), obj.AbsID()) && strings.HasPrefix(edge.Dst.AbsID(), obj.AbsID()) {
+		if obj == g.Root || (strings.HasPrefix(edge.Src.AbsID(), obj.AbsID()+".") && strings.HasPrefix(edge.Dst.AbsID(), obj.AbsID()+".")) {
 			edges = append(edges, edge)
 		}
 	}
diff --git a/d2layouts/d2sequence/sequence_diagram.go b/d2layouts/d2sequence/sequence_diagram.go
index b05ea10a6..258428975 100644
--- a/d2layouts/d2sequence/sequence_diagram.go
+++ b/d2layouts/d2sequence/sequence_diagram.go
@@ -466,8 +466,8 @@ func (sd *sequenceDiagram) routeMessages() error {
 		} else {
 			return fmt.Errorf("could not find center of %s", message.Dst.AbsID())
 		}
-		isToDescendant := strings.HasPrefix(message.Dst.AbsID(), message.Src.AbsID())
-		isFromDescendant := strings.HasPrefix(message.Src.AbsID(), message.Dst.AbsID())
+		isToDescendant := strings.HasPrefix(message.Dst.AbsID(), message.Src.AbsID()+".")
+		isFromDescendant := strings.HasPrefix(message.Src.AbsID(), message.Dst.AbsID()+".")
 		isSelfMessage := message.Src == message.Dst
 
 		if isSelfMessage || isToDescendant || isFromDescendant {
diff --git a/e2etests/regression_test.go b/e2etests/regression_test.go
index 7c627be74..b9c2399f1 100644
--- a/e2etests/regression_test.go
+++ b/e2etests/regression_test.go
@@ -40,6 +40,18 @@ b.1 -> b.1`,
 a: A
 b: B`,
 		},
+		{
+			name: "sequence_diagram_name_crash",
+			script: `foo: {
+	shape: sequence_diagram
+	a -> b
+}
+foobar: {
+	shape: sequence_diagram
+	c -> d
+}
+foo -> foobar`,
+		},
 	}
 
 	runa(t, tcs)
diff --git a/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/board.exp.json b/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/board.exp.json
new file mode 100644
index 000000000..c07f75069
--- /dev/null
+++ b/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/board.exp.json
@@ -0,0 +1,529 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "foo",
+      "type": "sequence_diagram",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 448,
+      "height": 520,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 0,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "foo",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 43,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "foobar",
+      "type": "sequence_diagram",
+      "pos": {
+        "x": 0,
+        "y": 620
+      },
+      "width": 448,
+      "height": 520,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 0,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "foobar",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 84,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "foo.a",
+      "type": "",
+      "pos": {
+        "x": 24,
+        "y": 110
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "foo.b",
+      "type": "",
+      "pos": {
+        "x": 274,
+        "y": 110
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "foobar.c",
+      "type": "",
+      "pos": {
+        "x": 24,
+        "y": 730
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "c",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "foobar.d",
+      "type": "",
+      "pos": {
+        "x": 274,
+        "y": 730
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "d",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    }
+  ],
+  "connections": [
+    {
+      "id": "foo.(a -> b)[0]",
+      "src": "foo.a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "foo.b",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 99,
+          "y": 366
+        },
+        {
+          "x": 349,
+          "y": 366
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 4
+    },
+    {
+      "id": "foobar.(c -> d)[0]",
+      "src": "foobar.c",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "foobar.d",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 99,
+          "y": 986
+        },
+        {
+          "x": 349,
+          "y": 986
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 4
+    },
+    {
+      "id": "(foo -> foobar)[0]",
+      "src": "foo",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "foobar",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 224,
+          "y": 520
+        },
+        {
+          "x": 224,
+          "y": 560
+        },
+        {
+          "x": 224,
+          "y": 580
+        },
+        {
+          "x": 224,
+          "y": 620
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(foo.a -- )[0]",
+      "src": "foo.a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a-lifeline-end-2251863791",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 99,
+          "y": 236
+        },
+        {
+          "x": 99,
+          "y": 496
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    },
+    {
+      "id": "(foo.b -- )[0]",
+      "src": "foo.b",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "b-lifeline-end-668380428",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 349,
+          "y": 236
+        },
+        {
+          "x": 349,
+          "y": 496
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    },
+    {
+      "id": "(foobar.c -- )[0]",
+      "src": "foobar.c",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "c-lifeline-end-955173837",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 99,
+          "y": 856
+        },
+        {
+          "x": 99,
+          "y": 1116
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    },
+    {
+      "id": "(foobar.d -- )[0]",
+      "src": "foobar.d",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "d-lifeline-end-2106864010",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 349,
+          "y": 856
+        },
+        {
+          "x": 349,
+          "y": 1116
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    }
+  ]
+}
diff --git a/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
new file mode 100644
index 000000000..bdebbd687
--- /dev/null
+++ b/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
@@ -0,0 +1,28 @@
+
+foofoobarabcd  
\ No newline at end of file
diff --git a/e2etests/testdata/regression/sequence_diagram_name_crash/elk/board.exp.json b/e2etests/testdata/regression/sequence_diagram_name_crash/elk/board.exp.json
new file mode 100644
index 000000000..49186256a
--- /dev/null
+++ b/e2etests/testdata/regression/sequence_diagram_name_crash/elk/board.exp.json
@@ -0,0 +1,520 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "foo",
+      "type": "sequence_diagram",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 448,
+      "height": 520,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 0,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "foo",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 43,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "foobar",
+      "type": "sequence_diagram",
+      "pos": {
+        "x": 12,
+        "y": 632
+      },
+      "width": 448,
+      "height": 520,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 0,
+      "borderRadius": 0,
+      "fill": "#FFFFFF",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "foobar",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 84,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "foo.a",
+      "type": "",
+      "pos": {
+        "x": 36,
+        "y": 122
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "foo.b",
+      "type": "",
+      "pos": {
+        "x": 286,
+        "y": 122
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "b",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "foobar.c",
+      "type": "",
+      "pos": {
+        "x": 36,
+        "y": 742
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "c",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "foobar.d",
+      "type": "",
+      "pos": {
+        "x": 286,
+        "y": 742
+      },
+      "width": 150,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "d",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    }
+  ],
+  "connections": [
+    {
+      "id": "foo.(a -> b)[0]",
+      "src": "foo.a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "foo.b",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 111,
+          "y": 378
+        },
+        {
+          "x": 361,
+          "y": 378
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 4
+    },
+    {
+      "id": "foobar.(c -> d)[0]",
+      "src": "foobar.c",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "foobar.d",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 111,
+          "y": 998
+        },
+        {
+          "x": 361,
+          "y": 998
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 4
+    },
+    {
+      "id": "(foo -> foobar)[0]",
+      "src": "foo",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "foobar",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 236,
+          "y": 532
+        },
+        {
+          "x": 236,
+          "y": 632
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    },
+    {
+      "id": "(foo.a -- )[0]",
+      "src": "foo.a",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a-lifeline-end-2251863791",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 111,
+          "y": 248
+        },
+        {
+          "x": 111,
+          "y": 508
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    },
+    {
+      "id": "(foo.b -- )[0]",
+      "src": "foo.b",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "b-lifeline-end-668380428",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 361,
+          "y": 248
+        },
+        {
+          "x": 361,
+          "y": 508
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    },
+    {
+      "id": "(foobar.c -- )[0]",
+      "src": "foobar.c",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "c-lifeline-end-955173837",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 111,
+          "y": 868
+        },
+        {
+          "x": 111,
+          "y": 1128
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    },
+    {
+      "id": "(foobar.d -- )[0]",
+      "src": "foobar.d",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "d-lifeline-end-2106864010",
+      "dstArrow": "none",
+      "dstLabel": "",
+      "opacity": 1,
+      "strokeDash": 6,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 0,
+      "labelHeight": 0,
+      "labelPosition": "",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 361,
+          "y": 868
+        },
+        {
+          "x": 361,
+          "y": 1128
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 1
+    }
+  ]
+}
diff --git a/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
new file mode 100644
index 000000000..1675c4f07
--- /dev/null
+++ b/e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
@@ -0,0 +1,28 @@
+
+foofoobarabcd  
\ No newline at end of file

From e423c1a439b9e0cd4b8d96387b8a77cd92d56a54 Mon Sep 17 00:00:00 2001
From: Alexander Wang 
Date: Sun, 18 Dec 2022 20:04:26 -0800
Subject: [PATCH 54/56] add changelog

---
 ci/release/changelogs/next.md                                | 1 +
 .../sequence_diagram_name_crash/dagre/sketch.exp.svg         | 5 ++++-
 .../sequence_diagram_name_crash/elk/sketch.exp.svg           | 5 ++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index 15c92e332..44728f188 100644
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@@ -15,3 +15,4 @@
 - Fixed `constraint` keyword setting label. [https://github.com/terrastruct/d2/issues/415](https://github.com/terrastruct/d2/issues/415)
 - Fixed serialization affecting binary plugins (TALA). [https://github.com/terrastruct/d2/pull/426](https://github.com/terrastruct/d2/pull/426)
 - Fixed a connection rendering bug that could happen in firefox when there were no connection labels. [https://github.com/terrastruct/d2/pull/453](https://github.com/terrastruct/d2/pull/453)
+- Fixed a crash when external connection IDs were prefixes of a sequence diagram ID. [https://github.com/terrastruct/d2/pull/462](https://github.com/terrastruct/d2/pull/462)
diff --git a/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg b/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
index bdebbd687..7b7c06c7c 100644
--- a/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
+++ b/e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
@@ -18,7 +18,10 @@ width="648" height="1340" viewBox="-100 -100 648 1340">foofoobarabcd  foofoobarabcd  
+
+
+foofoobarabcd  foofoobarabcd  
+
+
+