diff --git a/d2renderers/d2svg/class.go b/d2renderers/d2svg/class.go index befe5c47e..af71ac1af 100644 --- a/d2renderers/d2svg/class.go +++ b/d2renderers/d2svg/class.go @@ -97,8 +97,8 @@ func visibilityToken(visibility string) string { } func drawClass(writer io.Writer, targetShape d2target.Shape) { - fmt.Fprintf(writer, ``, - targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height) + fmt.Fprintf(writer, ``, + targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, shapeStyle(targetShape)) box := geo.NewBox( geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y)), diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index d8f1bb2d0..bf4ba25ac 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -37,6 +37,9 @@ const ( var multipleOffset = geo.NewVector(10, -10) +//go:embed style.css +var styleCSS string + //go:embed github-markdown.css var mdCSS string @@ -446,12 +449,12 @@ func drawConnection(writer io.Writer, connection d2target.Connection, markers ma } } -func renderOval(tl *geo.Point, width, height float64) string { +func renderOval(tl *geo.Point, width, height float64, style string) string { rx := width / 2 ry := height / 2 cx := tl.X + rx cy := tl.Y + ry - return fmt.Sprintf(``, cx, cy, rx, ry) + return fmt.Sprintf(``, cx, cy, rx, ry, style) } func defineShadowFilter(writer io.Writer) { @@ -487,7 +490,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) error { } } - fmt.Fprintf(writer, ``, style, shadowAttr) + fmt.Fprintf(writer, ``, shadowAttr) var multipleTL *geo.Point if targetShape.Multiple { @@ -503,14 +506,14 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) error { return nil case d2target.ShapeOval: if targetShape.Multiple { - fmt.Fprint(writer, renderOval(multipleTL, width, height)) + fmt.Fprint(writer, renderOval(multipleTL, width, height, style)) } - fmt.Fprint(writer, renderOval(tl, width, height)) + fmt.Fprint(writer, renderOval(tl, width, height, style)) case d2target.ShapeImage: - fmt.Fprintf(writer, ``, + fmt.Fprintf(writer, ``, targetShape.Icon.String(), - targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height) + targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, style) // TODO should standardize "" to rectangle case d2target.ShapeRectangle, "": @@ -550,23 +553,23 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) error { strings.Join(rightPolygonPoints, ""), darkerColor) } if targetShape.Multiple { - fmt.Fprintf(writer, ``, - targetShape.Pos.X+10, targetShape.Pos.Y-10, targetShape.Width, targetShape.Height) + fmt.Fprintf(writer, ``, + targetShape.Pos.X+10, targetShape.Pos.Y-10, targetShape.Width, targetShape.Height, style) } - fmt.Fprintf(writer, ``, - targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height) + fmt.Fprintf(writer, ``, + targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, style) case d2target.ShapeText, d2target.ShapeCode: default: if targetShape.Multiple { multiplePathData := shape.NewShape(shapeType, geo.NewBox(multipleTL, width, height)).GetSVGPathData() for _, pathData := range multiplePathData { - fmt.Fprintf(writer, ``, pathData) + fmt.Fprintf(writer, ``, pathData, style) } } for _, pathData := range s.GetSVGPathData() { - fmt.Fprintf(writer, ``, pathData) + fmt.Fprintf(writer, ``, pathData, style) } } @@ -837,18 +840,11 @@ func Render(diagram *d2target.Diagram) ([]byte, error) { buf := &bytes.Buffer{} _, _ = setViewbox(buf, diagram) - buf.WriteString(``) +`, styleCSS)) hasMarkdown := false for _, s := range diagram.Shapes { diff --git a/d2renderers/d2svg/style.css b/d2renderers/d2svg/style.css new file mode 100644 index 000000000..f5cffa9cc --- /dev/null +++ b/d2renderers/d2svg/style.css @@ -0,0 +1,8 @@ +.shape { + shape-rendering: geometricPrecision; + stroke-linejoin: round; +} +.connection { + stroke-linecap: round; + stroke-linejoin: round; +} diff --git a/d2renderers/d2svg/table.go b/d2renderers/d2svg/table.go index de378793e..ce9e79536 100644 --- a/d2renderers/d2svg/table.go +++ b/d2renderers/d2svg/table.go @@ -98,8 +98,8 @@ func constraintAbbr(constraint string) string { } func drawTable(writer io.Writer, targetShape d2target.Shape) { - fmt.Fprintf(writer, ``, - targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height) + fmt.Fprintf(writer, ``, + targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, shapeStyle(targetShape)) box := geo.NewBox( geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y)), diff --git a/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg b/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg index 7a5f6396e..73c194056 100644 --- a/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg +++ b/e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg @@ -5,15 +5,16 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="486" height="552" viewBox="-100 -100 486 552">abc abc abc abc ab ab ab ab acbd acbd acbd acbd ab +ab helloab +ab hellorectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud rectanglesquarepageparallelogramdocumentcylinderqueuepackagestepcalloutstored_datapersondiamondovalcirclehexagoncloud @@ -21,7 +22,7 @@ width="1539" height="824" viewBox="-100 -100 1539 824"> @@ -21,7 +22,7 @@ width="959" height="1084" viewBox="-88 -88 959 1084">cba cba cba cba abcdefghijklmno abcdefghijklmno abcdefghijklmno abcdefghijklmno aaadddeeebbbccc +aaadddeeebbbccc 111 diff --git a/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg b/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg index bcc32e178..93da4fd1d 100644 --- a/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/chaos1/elk/sketch.exp.svg @@ -5,15 +5,16 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="888" height="622" viewBox="-88 -88 888 622">aaadddeeebbbccc +aaadddeeebbbccc 111 diff --git a/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg b/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg index 09769e025..9dae57573 100644 --- a/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg @@ -5,13 +5,14 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1317" height="1854" viewBox="-100 -100 1317 1854">aabbllmm

nn

-
oocciikkdd

gg

-
hhjj

ee

-
ff +aabbllmm

nn

+
oocciikkdd

gg

+
hhjj

ee

+
ff 11 diff --git a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg index 1334d762c..2e7c5bf83 100644 --- a/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/chaos2/elk/sketch.exp.svg @@ -5,13 +5,14 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1856" height="1097" viewBox="-88 -88 1856 1097">aabbllmm

nn

-
oocciikkdd

gg

-
hhjj

ee

-
ff +aabbllmm

nn

+
oocciikkdd

gg

+
hhjj

ee

+
ff 11 diff --git a/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg b/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg index 49478c030..e7cf23c0f 100644 --- a/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg @@ -5,15 +5,16 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="694" height="626" viewBox="-100 -100 694 626">abcd abcd abcd abcd abc abc abc abc // RegisterHash registers a function that returns a new instance of the given +// RegisterHash registers a function that returns a new instance of the given // hash function. This is intended to be called from the init function in // packages that implement hash functions. func RegisterHash(h Hash, f func() hash.Hash) { @@ -21,7 +22,7 @@ width="955" height="818" viewBox="-100 -100 955 818">// RegisterHash registers a function that returns a new instance of the given +// RegisterHash registers a function that returns a new instance of the given // hash function. This is intended to be called from the init function in // packages that implement hash functions. func RegisterHash(h Hash, f func() hash.Hash) { @@ -21,7 +22,7 @@ width="1382" height="366" viewBox="-88 -88 1382 366">acfbdhg acfbdhg acfbdhg acfbdhg agdfbhec agdfbhec agdfbhec agdfbhec abcdefghijklmnopq abcdefghijklmnopq abcdefghijklmnopq abcdefghijklmnopq finallyatreeandnodessomemoremanythenhereyouhavehierarchyanotherofnestingtreesatreeinsidehierarchyroot finallyatreeandnodessomemoremanythenhereyouhavehierarchyanotherofnestingtreesatreeinsidehierarchyroot finallyatreeandnodessomemoremanythenhereyouhavehierarchyanotherofnestingtreesatreeinsidehierarchyroot finallyatreeandnodessomemoremanythenhereyouhavehierarchyanotherofnestingtreesatreeinsidehierarchyroot

Markdown: Syntax

+

Markdown: Syntax

  • Overview
      @@ -1046,7 +1047,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

Markdown: Syntax

+

Markdown: Syntax

  • Overview
      @@ -1046,7 +1047,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

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

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 aabbccddllffwwyyadnniijjkkssuurmeemmmmgghhzzooppqqrrttvvxxabac +aabbccddllffwwyyadnniijjkkssuurmeemmmmgghhzzooppqqrrttvvxxabac 1 diff --git a/e2etests/testdata/stable/investigate/elk/sketch.exp.svg b/e2etests/testdata/stable/investigate/elk/sketch.exp.svg index 99055f29f..e4f8a8af2 100644 --- a/e2etests/testdata/stable/investigate/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/investigate/elk/sketch.exp.svg @@ -5,15 +5,16 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="4784" height="870" viewBox="-88 -75 4784 870">aabbccddllffwwyyadnniijjkkssuurmeemmmmgghhzzooppqqrrttvvxxabac +aabbccddllffwwyyadnniijjkkssuurmeemmmmgghhzzooppqqrrttvvxxabac 1 diff --git a/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg b/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg index 9e77f80a3..2f9acf15e 100644 --- a/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg @@ -5,15 +5,16 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3244" height="1780" viewBox="-100 -100 3244 1780">abcdefghiqrjmnoszaabbeeffggklptuwxyccddv abcdefghiqrjmnoszaabbeeffggklptuwxyccddv abcdefghiqrjmnoszaabbeeffggklptuwxyccddv abcdefghiqrjmnoszaabbeeffggklptuwxyccddv
    +
    • Overview
      • Philosophy
      • @@ -801,7 +802,7 @@ width="579" height="752" viewBox="-100 -100 579 752">
          +
          • Overview
            • Philosophy
            • @@ -801,7 +802,7 @@ width="1005" height="326" viewBox="-88 -88 1005 326">
                +
                • Overview ok this is all measured
                  • Philosophy
                  • @@ -797,7 +798,7 @@ width="445" height="728" viewBox="-100 -100 445 728">
                      +
                      • Overview ok this is all measured
                        • Philosophy
                        • @@ -797,7 +798,7 @@ width="871" height="326" viewBox="-88 -88 871 326">
                            +
                            • Overview
                              • Philosophy
                              • @@ -822,7 +823,7 @@ width="547" height="1164" viewBox="-100 -100 547 1164">
                                  +
                                  • Overview
                                    • Philosophy
                                    • @@ -822,7 +823,7 @@ width="973" height="712" viewBox="-88 -88 973 712">

                                      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:

                                        @@ -820,7 +821,7 @@ sit amet, consectetuer adipiscing elit.

                                        Another item in the same list.

                                    -
                                  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:

                                    @@ -820,7 +821,7 @@ sit amet, consectetuer adipiscing elit.

                                    Another item in the same list.

                                -
                                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

                                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
                                {
                                +
                                {
                                 	fenced: "block",
                                 	of: "json",
                                 }
                                 
                                -
                                ab
                                {
                                +
                                {
                                 	fenced: "block",
                                 	of: "json",
                                 }
                                 
                                -
                                ab

                                a line of text and an

                                +

                                a line of text and an

                                {
                                 	indented: "block",
                                 	of: "json",
                                 }
                                 
                                -
                                ab

                                a line of text and an

                                +

                                a line of text and an

                                {
                                 	indented: "block",
                                 	of: "json",
                                 }
                                 
                                -
                                ab

                                code

                                -
                                ab

                                code

                                +
                                ab

                                code

                                -
                                ab

                                code

                                +
                                ab thisgoesmultiple linesthisgoesmultiple linesthisgoesmultiple linesthisgoesmultiple linesabcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw abcdefghijklmnopqrstu abcdefghijklmnopqrstu abcdefghijklmnopqrstu abcdefghijklmnopqrstu acdefgbh acdefgbh acdefgbh acdefgbh topabcbottomstartend topabcbottomstartend topabcbottomstartend topabcbottomstartend

                                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

                                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

                                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

                                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 rectanglesquare rectanglesquare rectanglesquare rectanglesquare acbl1l2c1l2c3l2c2l3c1l3c2l4bacacbabcc1c2c3abc acbl1l2c1l2c3l2c2l3c1l3c2l4bacacbabcc1c2c3abc acbl1l2c1l2c3l2c2l3c1l3c2l4bacacbabcc1c2c3abc acbl1l2c1l2c3l2c2l3c1l3c2l4bacacbabcc1c2c3abc AKHIALFLGAMSTNAZCANVNMUTARLAMOOKTXORCOKSNEWYCTMANYRIDEMDNJPANCSCIDMTWAILINIAMIKYWIOHMNSDVAWVMENHVTNDAKHIALFLGAMSTNAZCANVNMUTARLAMOOKTXORCOKSNEWYCTMANYRIDEMDNJPANCSCIDMTWAILINIAMIKYWIOHMNSDVAWVMENHVTNDAKHIALFLGAMSTNAZCANVNMUTARLAMOOKTXORCOKSNEWYCTMANYRIDEMDNJPANCSCIDMTWAILINIAMIKYWIOHMNSDVAWVMENHVTNDAKHIALFLGAMSTNAZCANVNMUTARLAMOOKTXORCOKSNEWYCTMANYRIDEMDNJPANCSCIDMTWAILINIAMIKYWIOHMNSDVAWVMENHVTND