Merge pull request #197 from terrastruct/0.6.2-updates

0.6.2 updates

ci/render.sh

@@ -28,6 +28,8 @@ _bespoke() {
   sh_c d2 ./static/bespoke-d2/imports-nested.d2 ./static/img/generated/imports-nested.pdf
 
   sh_c d2 ./static/bespoke-d2/triple-glob.d2 ./static/img/generated/triple-glob.pdf
+
+  sh_c d2 --sketch ./static/bespoke-d2/grid-nested-connections.d2 ./static/img/generated/grid-nested-connections.svg2
 }
 
 main() {

docs/releases/0.6.2.md

@@ -0,0 +1,54 @@
+D2 0.6.2 makes grid diagrams significantly more powerful. Namely, connections can now be made from grid elements to other grid elements. This enables diagrams like the following.
+
+![vector-grid](https://raw.githubusercontent.com/terrastruct/d2/af841720b48864f5240ae4fb9cb0cb87bcfef038/docs/examples/vector-grid/vector-grid.svg)
+
+> [Source code](https://github.com/terrastruct/d2/blob/master/docs/examples/vector-grid/vector-grid.d2)
+
+> [Playground link](https://play.d2lang.com/?script=xFVNb9swDL37VxDqTgVs-CMfjTAMaJt5p12GYXfFVhOjthTIzNKuyH8fLEu27DpYGxTYoaj5KJHUI_mSlayueU3hxQPg1R6f20-Akm14SYEQbdX4XHLrAngoypICKibqPVNcoMFrVPKR-8cixx2FUKMnr_1D_oQ2wgeEy8pDjVxdFjFn9Y7CbABSIFf3i3WyTskg0VYVuQ3cfPuZLA-VqClEbyXquCuQv-FNSh4HmZQ8vifNewg8ed5vpkzjS_6A_ohQm0_4dfGH5_CLZyhVm11PDbUt0FB4HeiagrYUcrVOv6bpLRk6LdObkmWP0-_UwJbtbbm6jkBwpijIA9ZFzn2Ue7-p2dMnSBgsYmI_o3n7qYc5Ckyp2tK4sFAzj_3J-PVJEgarqIs7uyGekwM--yDA_9Kf0g0struzTFYXMrmM03ma_lcmn3GCyerjmKxGTJ48z3lO7HlNnd12mPhKHq1ojVO2oBn7KArDJuEPJnJZwXeGqniCb1xwxVB2bTKnk7Bla8ebXlKIlmG_ccGDFKjbSCEe4KZXt8u7u_vU2dGJRrX4RqqcK1-xvDg0LQvtwzcSUVZnXqs31VUk422gltSIwqcXd6FPGo6n4WQKPjWRcol-JgWyQvSj_KqzU4J4bvNyiRTWEmGvZH7IsFOv8RgBZIXKGn0jpDsEUO_YnlPj61GH_57jMf9DCXTaHfeI7XgHncz_qcUxXcq4sHvbMVfpAbuQvPYyhZ9MbTlCXlRc1IUUxtHRcW6ZnYIGkjBzIUcUAK67PQl7qJt-BxtOehqli3RFRt7X096ufER6I4kdY-UaUWKUQVvLmeuaO8Y8cYw4ci-tlo5r5l6K3BrCuXtp4bqWboT5yjFuEjLs9IT2dD8C_17SwY-Fs6UTeDKJT05bo6R9BY2gGO0Mzuhfc6HXnGAczwDe3wAAAP__&sketch=1&)
+
+> Credit: this diagram is based off of a manually-drawn one from a [blog post](https://github.com/terrastruct/d2/issues/1299)
+
+In addition, another significant feature is that using the ELK layout engine will now route SQL diagrams to their exact columns.
+
+<img width="576" alt="Screen Shot 2023-12-06 at 3 26 39 PM" src="https://github.com/terrastruct/d2/assets/3120367/5b153748-22ed-4bad-bd05-70dfd6e7d3e0" />
+
+> [Playground link](https://play.d2lang.com/?script=pI9BroMwDAX3PsW7wOcAWfyrIJdYYDUJaWxaIcTdKyrYV-rS0jzNeJjNlywWsBFgE1cJsEfqnW9JCNAYoMWxDXMxb6zFA2rTzG3t77Lux0xT0iJmH5SAfLDSrjOxeb_UyC4xwDWLOedKO9FJ_ubP81OPmTctIwEv0XHyL-zX992Zgb__q906jfQOAAD__w%3D%3D&sketch=1&layout=elk&)
+
+**Note** that all previous playground links will be broken given the encoding change. The encoding before 0.6.2 used the keyword set as compression dictionary, but it no longer does, so this will be the last time playground links break.
+
+#### Features 🚀
+
+- ELK routes `sql_table` edges to the exact columns (ty @landmaj) [#1681](https://github.com/terrastruct/d2/pull/1681)
+- Unfilled triangle arrowhead is available. [#1711](https://github.com/terrastruct/d2/pull/1711)
+- Grid containers customize label positions. [#1715](https://github.com/terrastruct/d2/pull/1715)
+- A single board from a multi-board diagram can be rendered with `--target` flag. [#1725](https://github.com/terrastruct/d2/pull/1725)
+
+#### Improvements 🧹
+
+- Grid cells can contain nested edges [#1629](https://github.com/terrastruct/d2/pull/1629)
+- Edges can go across constant `near`s, sequence diagrams, and grids, including nested ones. [#1631](https://github.com/terrastruct/d2/pull/1631)
+- All vars defined in a scope are accessible everywhere in that scope, i.e., an object can use a var defined after itself. [#1695](https://github.com/terrastruct/d2/pull/1695)
+- Encoding API switches to standard zlib encoding so that decoding doesn't depend on source. [#1709](https://github.com/terrastruct/d2/pull/1709)
+- `currentcolor` is accepted as a color option to inherit parent colors. (ty @hboomsma) [#1700](https://github.com/terrastruct/d2/pull/1700)
+- Grid containers can be sized with `width`/`height` even when using a layout plugin without that feature. [#1731](https://github.com/terrastruct/d2/pull/1731)
+- Watch mode watches for changes in both the input file and imported files [#1720](https://github.com/terrastruct/d2/pull/1720)
+
+#### Bugfixes ⛑️
+
+- Fixes a bug calculating grid height with only grid-rows and different horizontal-gap and vertical-gap values. [#1646](https://github.com/terrastruct/d2/pull/1646)
+- Grid layout accounts for each cell's outside labels and icons [#1624](https://github.com/terrastruct/d2/pull/1624)
+- Grid layout accounts for labels wider or taller than the shape and fixes default label positions for image grid cells. [#1670](https://github.com/terrastruct/d2/pull/1670)
+- Fixes a panic with a spread substitution in a glob map [#1643](https://github.com/terrastruct/d2/pull/1643)
+- Fixes use of `null` in `sql_table` constraints (ty @landmaj) [#1660](https://github.com/terrastruct/d2/pull/1660)
+- Fixes ELK growing shapes with width/height set [#1679](https://github.com/terrastruct/d2/pull/1679)
+- Adds a compiler error when accidentally using an arrowhead on a shape [#1686](https://github.com/terrastruct/d2/pull/1686)
+- Correctly reports errors from invalid values set by globs. [#1691](https://github.com/terrastruct/d2/pull/1691)
+- Fixes panic when spread substitution referenced a nonexistant var. [#1695](https://github.com/terrastruct/d2/pull/1695)
+- Fixes incorrect appendix icon numbering. [#1704](https://github.com/terrastruct/d2/pull/1704)
+- Fixes crash when using `--watch` and navigating to an invalid board path [#1693](https://github.com/terrastruct/d2/pull/1693)
+- Fixes edge case where nested edge globs were creating excess shapes [#1713](https://github.com/terrastruct/d2/pull/1713)
+- Fixes a panic with a connection to a grid cell that is a container in TALA [#1729](https://github.com/terrastruct/d2/pull/1729)
+- Fixes incorrect grid cell positioning when the grid has a shape set and fixes content sometimes escaping circle shapes. [#1734](https://github.com/terrastruct/d2/pull/1734)
+- Fixes content sometimes escaping cloud shapes. [#1736](https://github.com/terrastruct/d2/pull/1736)
+- Fixes panic using a glob filter (e.g. `&a`) outside globs. [#1748](https://github.com/terrastruct/d2/pull/1748)
+- Fixes glob keys with import values (e.g. `user*: @lib/user`). [#1755](https://github.com/terrastruct/d2/pull/1755)

docs/releases/intro.md

@@ -2,9 +2,9 @@
 
 :::info Latest
 
-Version: [0.6.1](/releases/0.6.1) (released September 26, 2023)
+Version: [0.6.2](/releases/0.6.2) (released December 06, 2023)
 
-Downloads: [Assets](https://github.com/terrastruct/d2/releases/tag/v0.6.1)
+Downloads: [Assets](https://github.com/terrastruct/d2/releases/tag/v0.6.2)
 
 :::
 

docs/tour/connections.md

@@ -127,6 +127,7 @@ d -> a -> c
 
 :::info Arrowhead options
 - `triangle` (default)
+  - Can be further styled as `style.filled: false`.
 - `arrow` (like triangle but pointier)
 - `diamond`
   - Can be further styled as `style.filled: true`.

docs/tour/elk.md

@@ -16,6 +16,7 @@ Kiel](https://www.rtsys.informatik.uni-kiel.de/en/team).
 - Good at minimizing crossings.
 - Natively supports container to container routing, handling these better than dagre.
 - Undergoing active improvements with regular releases.
+- Routes SQL tables with exact columns.
 
 ## Cons
 

docs/tour/extensions.md

@@ -41,3 +41,4 @@ issue and we're happy to include your's!
 - Remark D2 code blocks into images: [https://github.com/mech-a/remark-d2](https://github.com/mech-a/remark-d2)
 - D2 image service: [https://github.com/Watt3r/d2-live](https://github.com/Watt3r/d2-live)
 - MkDocs plugin: [https://github.com/landmaj/mkdocs-d2-plugin](https://github.com/landmaj/mkdocs-d2-plugin)
+- C# & dotnet SDK: [https://github.com/Stephanvs/d2lang-cs](https://github.com/Stephanvs/d2lang-cs)

docs/tour/grid-diagrams.md

@@ -175,13 +175,27 @@ Oxygen
 
 ## Connections
 
-Connections for objects within grids are coming soon, but you can connect the grids
-themselves like regular objects in D2.
+Connections for grids themselves work normally as you'd expect.
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid-connected.svg2')}}></div>
 
 > Source code [here](https://github.com/terrastruct/d2-docs/blob/eda2d8739ce21c656e7608be48cb9067df36eb53/static/d2/grid-connected.d2).
 
+### Connections between grid cells
+
+Connections between shapes inside a grid work a bit differently. Because a grid structure
+imposes positioning outside what the layout engine controls, the layout engine is also
+unable to make routes. Therefore, these connections are center-center straight segments,
+i.e., no path-finding.
+
+<div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid-connections.svg2')}}></div>
+
+> Source code [here](https://github.com/terrastruct/d2/blob/master/e2etests/testdata/files/simple_grid_edges.d2).
+
+<div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid-nested-connections.svg2')}}></div>
+
+> Source code [here](https://github.com/terrastruct/d2/blob/master/docs/examples/vector-grid/vector-grid.d2).
+
 ## Nesting
 
 Currently you can nest grid diagrams within grid diagrams. Nesting other types is coming
@@ -202,19 +216,7 @@ footer
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid-nested-grid.svg2')}}></div>
 
-## Connections between grid cells
 
-Connections between top-level grid cells are supported. Their routes are simple
-center-center straight segments, i.e., no path-finding routes.
-
-<div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/grid-connections.svg2')}}></div>
-
-> Source code [here](https://github.com/terrastruct/d2/blob/master/e2etests/testdata/files/simple_grid_edges.d2).
-
-:::info
-Connections between more inner elements of a grid to another grid cell's inner element is
-a work in progress.
-:::
 
 ## Source code
 

docs/tour/sql-tables.md

@@ -64,8 +64,8 @@ objects.disk -> disks.id
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/tables-2.svg2')}}></div>
 
 :::info
-When rendered with the [TALA layout engine](/tour/tala), connections point to the exact
-row.
+When rendered with the [TALA layout engine](/tour/tala) or [ELK layout engine](/tour/elk),
+connections point to the exact row.
 :::
 
 ## Example

docs/tour/tala.md

@@ -23,6 +23,7 @@ open-source D2, and proprietary, closed-source TALA. You can download it here:
 - `near` can be specified to be to another shape.
 - `sql_table` connections point to exact row.
 - Dynamic label positioning to avoid obstructions.
+- Connections for grid cells use TALA's routing engine instead of always straight lines.
 
 ## Cons
 

sidebars.js

@@ -168,6 +168,7 @@ const sidebars = {
       link: { type: "doc", id: "releases/intro" },
       items: [
         "releases/intro",
+        "releases/0.6.2",
         "releases/0.6.1",
         "releases/0.6.0",
         "releases/0.5.1",

src/components/Directory/MoreFeatures.jsx

@@ -65,7 +65,7 @@ const moreFeatures = [
     description:
       "Reuse values like colors, labels, and anything else for clean diagram code.",
     icon: "variables.svg",
-    href: "/tour/variables",
+    href: "/tour/vars",
   },
   {
     title: "Globs",

static/bespoke-d2/grid-nested-connections.d2

@@ -0,0 +1,171 @@
+classes: {
+  empty: {
+    label: ""
+    style: {
+      fill: transparent
+      stroke-width: 0
+    }
+  }
+  text: {
+    style: {
+      fill: transparent
+      stroke-width: 0
+    }
+  }
+  cluster: {
+    style: {
+      fill: transparent
+      stroke-dash: 4
+      stroke: "#C6D3DF"
+    }
+  }
+  grid: {
+    grid-columns: 1
+    label: ""
+    style: {
+      fill: white
+      stroke-width: 0
+    }
+  }
+  row: {
+    grid-rows: 1
+    label: ""
+    style: {
+      fill: transparent
+      stroke-width: 0
+    }
+  }
+}
+
+vars: {
+  left-cluster: {
+    label: "n-sized Vector"
+    class: cluster
+    0*.style.fill: "#DFEFFA"
+    0*.style.stroke: black
+    grid-rows: 1
+    grid-gap: 0
+    label.near: outside-top-left
+
+    "0.62"
+    "0.15"
+    empty1.class: empty
+    n.class: text
+    empty2.class: empty
+    "0.91"
+    "0.48"
+
+    "0.15" <- n -> "0.91"
+  }
+  right-cluster: {
+    label: "m-sized Vector"
+    class: cluster
+    0*.style.fill: "#72F5FF"
+    0*.style.stroke: black
+    grid-rows: 1
+    grid-gap: 0
+    label.near: outside-top-left
+
+    "0.62"
+    "0.15"
+    empyt1.class: empty
+    m.class: text
+    empty2.class: empty
+    "0.91"
+    "0.48"
+
+    "0.15" <- m -> "0.91"
+  }
+}
+
+grid-rows: 2
+
+top-row: {
+  class: row
+  empty.class: empty
+  empty.width: 1100
+
+  Random Matrix Generator: {
+    width: 300
+    height: 170
+    style.font-size: 20
+    style.fill: "#A7BBCF"
+    style.stroke: black
+    style.border-radius: 10
+  }
+}
+
+bottom-row: {
+  class: row
+  left-grid: {
+    class: grid
+
+    1: ${left-cluster}
+    2: ${left-cluster}
+    3: ${left-cluster}
+  }
+
+  dot-container: {
+    class: empty
+    grid-columns: 1
+    empty1.class: empty
+    dot: Dot product {
+      class: text
+      circle: "" {
+        shape: circle
+        style.fill: black
+        style.stroke-width: 0
+        width: 20
+        height: 20
+      }
+      label.near: outside-bottom-center
+    }
+  }
+
+  matrix-container: {
+    class: empty
+    grid-columns: 1
+    matrix: Target dimension matrix {
+      label.near: outside-top-center
+      grid-rows: 4
+      grid-gap: 0
+      *.width: 100
+      *.height: 100
+      *.style.fill: "#F1F6F9"
+      *.style.stroke: black
+      "0.41"
+      "0.32"
+      "0.92"
+      "0.13"
+
+      "0.74"
+      "0.15"
+      "0.53"
+      "0.21"
+
+      "0.97"
+      "0.45"
+      "0.11"
+      "0.05"
+
+      "0.61"
+      "0.77"
+      "0.59"
+      "0.83"
+    }
+  }
+
+  empty.class: empty
+
+  right-grid: {
+    class: grid
+
+    1: ${right-cluster}
+    2: ${right-cluster}
+    3: ${right-cluster}
+  }
+
+  matrix-container -> right-grid
+}
+
+top-row.Random Matrix Generator -> bottom-row.matrix-container.matrix

static/bespoke-d2/grid-nested-grid.d2

@@ -0,0 +1,10 @@
+grid-gap: 0
+grid-columns: 1
+header
+body: "" {
+  grid-gap: 0
+  grid-columns: 2
+  content
+  sidebar
+}
+footer

static/img/generated/animated.svg2

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.1-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1882 528"><svg id="d2-svg" width="1882" height="528" viewBox="11 11 1882 528"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.2-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1882 528"><svg id="d2-svg" width="1882" height="528" viewBox="11 11 1882 528"><style type="text/css"><![CDATA[
 .d2-3166114463 .text {
 	font-family: "d2-3166114463-font-regular";
 }

static/img/generated/chicken.svg2

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.1-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 314 465"><svg id="d2-svg" width="314" height="465" viewBox="-106 -66 314 465"><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.2-HEAD" preserveAspectRatio="xMinYMin meet" viewBox="0 0 314 465"><svg id="d2-svg" width="314" height="465" viewBox="-106 -66 314 465"><style type="text/css"><![CDATA[
 .d2-4132224283 .text {
 	font-family: "d2-4132224283-font-regular";
 }

static/img/generated/classes-1.svg2

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.1-HEAD" preserveAspectRatio="xMidYMid meet" viewBox="0 0 409 186"><svg id="d2-svg" class="d2-3478011237" width="409" height="186" viewBox="-1 -1 409 186"><rect x="-1.000000" y="-1.000000" width="409.000000" height="186.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.2-HEAD" preserveAspectRatio="xMidYMid meet" viewBox="0 0 409 186"><svg id="d2-svg" class="d2-3478011237" width="409" height="186" viewBox="-1 -1 409 186"><rect x="-1.000000" y="-1.000000" width="409.000000" height="186.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
 .d2-3478011237 .text-mono {
 	font-family: "d2-3478011237-font-mono";
 }

static/img/generated/classes-2.svg2

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.1-HEAD" preserveAspectRatio="xMidYMid meet" viewBox="0 0 481 628"><svg id="d2-svg" class="d2-1924837604" width="481" height="628" viewBox="-1 -1 481 628"><rect x="-1.000000" y="-1.000000" width="481.000000" height="628.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.2-HEAD" preserveAspectRatio="xMidYMid meet" viewBox="0 0 481 628"><svg id="d2-svg" class="d2-1924837604" width="481" height="628" viewBox="-1 -1 481 628"><rect x="-1.000000" y="-1.000000" width="481.000000" height="628.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
 .d2-1924837604 .text-bold {
 	font-family: "d2-1924837604-font-bold";
 }

static/img/generated/code-2.svg2

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.1-HEAD" preserveAspectRatio="xMidYMid meet" viewBox="0 0 690 122"><svg id="d2-svg" class="d2-3371677741" width="690" height="122" viewBox="-1 -1 690 122"><rect x="-1.000000" y="-1.000000" width="690.000000" height="122.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="v0.6.2-HEAD" preserveAspectRatio="xMidYMid meet" viewBox="0 0 690 122"><svg id="d2-svg" class="d2-3371677741" width="690" height="122" viewBox="-1 -1 690 122"><rect x="-1.000000" y="-1.000000" width="690.000000" height="122.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
 .d2-3371677741 .text-mono {
 	font-family: "d2-3371677741-font-mono";
 }