adding support for force appendix

ci/release/changelogs/next.md

@@ -2,6 +2,6 @@
 
 #### Improvements 🧹
 
-d2js: Support additional render options (`themeID`, `darkThemeID`, `center`, `pad` and `scale`) [#2343](https://github.com/terrastruct/d2/pull/2343)
+d2js: Support additional render options (`themeID`, `darkThemeID`, `center`, `pad`, `scale` and `forceAppendix`) [#2343](https://github.com/terrastruct/d2/pull/2343)
 
 #### Bugfixes ⛑️

d2js/d2wasm/functions.go

@@ -21,6 +21,7 @@ import (
 	"oss.terrastruct.com/d2/d2parser"
 	"oss.terrastruct.com/d2/d2renderers/d2fonts"
 	"oss.terrastruct.com/d2/d2renderers/d2svg"
+	"oss.terrastruct.com/d2/d2renderers/d2svg/appendix"
 	"oss.terrastruct.com/d2/lib/log"
 	"oss.terrastruct.com/d2/lib/memfs"
 	"oss.terrastruct.com/d2/lib/textmeasure"
@@ -253,6 +254,11 @@ func Render(args []js.Value) (interface{}, error) {
 		return nil, &WASMError{Message: "missing 'diagram' field in input JSON", Code: 400}
 	}
 
+	ruler, err := textmeasure.NewRuler()
+	if err != nil {
+		return nil, &WASMError{Message: fmt.Sprintf("text ruler cannot be initialized: %s", err.Error()), Code: 500}
+	}
+
 	renderOpts := &d2svg.RenderOpts{}
 	if input.Opts != nil && input.Opts.Sketch != nil {
 		renderOpts.Sketch = input.Opts.Sketch
@@ -276,6 +282,9 @@ func Render(args []js.Value) (interface{}, error) {
 	if err != nil {
 		return nil, &WASMError{Message: fmt.Sprintf("render failed: %s", err.Error()), Code: 500}
 	}
+	if input.Opts != nil && *input.Opts.ForceAppendix {
+		out = appendix.Append(input.Diagram, renderOpts, ruler, out)
+	}
 
 	return out, nil
 }

d2js/d2wasm/types.go

@@ -37,13 +37,14 @@ type CompileRequest struct {
 }
 
 type RenderOptions struct {
-	Layout      *string  `json:"layout"`
+	Layout        *string  `json:"layout"`
-	Pad         *int64   `json:"pad"`
+	Pad           *int64   `json:"pad"`
-	Sketch      *bool    `json:"sketch"`
+	Sketch        *bool    `json:"sketch"`
-	Center      *bool    `json:"center"`
+	Center        *bool    `json:"center"`
-	ThemeID     *int64   `json:"themeID"`
+	ThemeID       *int64   `json:"themeID"`
-	DarkThemeID *int64   `json:"darkThemeID"`
+	DarkThemeID   *int64   `json:"darkThemeID"`
-	Scale       *float64 `json:"scale"`
+	Scale         *float64 `json:"scale"`
+	ForceAppendix *bool    `json:"forceAppendix"`
 }
 
 type CompileResponse struct {

d2js/js/README.md

@@ -61,6 +61,7 @@ Options:
 - `center`: Center the SVG in the containing viewbox [default: false]
 - `pad`: Pixels padded around the rendered diagram [default: 100]
 - `scale`: Scale the output. E.g., 0.5 to halve the default size. The default will render SVG's that will fit to screen. Setting to 1 turns off SVG fitting to screen.
+- `forceAppendix`: Adds an appendix for tooltips and links [default: false]
 
 ### `render(diagram: Diagram, options?: RenderOptions): Promise<string>`
 Renders a compiled diagram to SVG.

d2js/js/examples/customizable.html

@@ -35,6 +35,7 @@
       .layout-toggle,
       .sketch-toggle,
       .center-toggle,
+      .appendix-toggle,
       .theme-select,
       .dark-theme-select,
       .padding-input,
@@ -112,6 +113,12 @@
             Centered
           </label>
         </div>
+        <div class="appendix-toggle">
+          <label class="checkbox-label">
+            <input type="checkbox" id="appendix" />
+            Force Appendix
+          </label>
+        </div>
         <div class="theme-select">
           <label class="select-label">
             <select id="theme" name="theme">
@@ -201,6 +208,7 @@
         );
         const scale = notNegative(Number(document.getElementById("scale").value));
         const pad = Number(document.getElementById("padding").value);
+        const forceAppendix = document.getElementById("appendix").checked;
         try {
           const result = await d2.compile(input, {
             layout,
@@ -210,6 +218,7 @@
             scale,
             pad,
             center,
+            forceAppendix,
           });
           const svg = await d2.render(result.diagram, {
             sketch,
@@ -218,6 +227,7 @@
             scale,
             pad,
             center,
+            forceAppendix,
           });
           document.getElementById("output").innerHTML = svg;
         } catch (err) {