Merge pull request #250 from terrastruct/0.6.9

0.6.9

Author: alixander

ci/render.sh

@@ -33,6 +33,8 @@ _bespoke() {
   sh_c d2 --sketch ./static/bespoke-d2/grid-nested-connections.d2 ./static/img/generated/grid-nested-connections.svg2
 
   sh_c d2 --dark-theme=200 -l elk -c --pad 0 ./static/bespoke-d2/classes-3.d2 ./static/img/generated/classes-3.svg2
+
+  sh_c d2 -c --pad 50 ./static/bespoke-d2/styles-animated.d2 ./static/img/generated/styles-animated.svg2
 }
 
 main() {

docs/releases/0.6.9.md

@@ -0,0 +1,35 @@
+#### Features 🚀
+
+- Animations: `style.animated: true` is supported on shapes [#2250](https://github.com/terrastruct/d2/pull/2250)
+- Connections now support `link` [#1955](https://github.com/terrastruct/d2/pull/1955)
+- Vars: vars in markdown blocks are substituted [#2218](https://github.com/terrastruct/d2/pull/2218)
+- Markdown: Github-flavored tables work in `md` blocks [#2221](https://github.com/terrastruct/d2/pull/2221)
+- Render: adds box arrowheads [#2227](https://github.com/terrastruct/d2/issues/2227)
+- `d2 fmt` now supports a `--check` flag [#2253](https://github.com/terrastruct/d2/pull/2253)
+- CLI: PNG output to stdout is supported using `--stdout-format png -` [#2291](https://github.com/terrastruct/d2/pull/2291)
+- Globs: `&connected` and `&leaf` filters are implemented [#2299](https://github.com/terrastruct/d2/pull/2299)
+- CLI: add --no-xml-tag for direct HTML embedding [#2302](https://github.com/terrastruct/d2/pull/2302)
+- CLI: `play` cmd added for opening d2 input in online playground [#2242](https://github.com/terrastruct/d2/pull/2242)
+
+#### Improvements 🧹
+
+- Composition: links pointing to own board are purged [#2203](https://github.com/terrastruct/d2/pull/2203)
+- Syntax: reserved keywords must be unquoted [#2231](https://github.com/terrastruct/d2/pull/2231)
+- Latex: Backslashes in Latex blocks do not escape [#2232](https://github.com/terrastruct/d2/pull/2232)
+  - This is a breaking change. Previously Latex blocks required escaping the backslash. So
+    for older D2 versions, you should remove the excess backslashes.
+- Links: non-http url scheme links are supported (e.g. `x.link: vscode://file/`) [#2237](https://github.com/terrastruct/d2/issues/2237)
+- Compiler: reserved keywords with missing values error instead of silently doing nothing [#2251](https://github.com/terrastruct/d2/pull/2251)
+- Render: SVG outputs conform to stricter HTML standards, e.g. no duplicate ids [#2273](https://github.com/terrastruct/d2/issues/2273)
+- Themes: theme names are consistently cased [#2322](https://github.com/terrastruct/d2/pull/2322)
+- Nears: constant nears avoid collision with edge routes [#2327](https://github.com/terrastruct/d2/pull/2327)
+
+#### Bugfixes ⛑️
+
+- Imports: fixes using substitutions in `icon` values [#2207](https://github.com/terrastruct/d2/pull/2207)
+- Markdown: fixes ampersands in URLs in markdown [#2219](https://github.com/terrastruct/d2/pull/2219)
+- Globs: fixes edge case where globs with imported boards would create empty boards [#2247](https://github.com/terrastruct/d2/pull/2247)
+- Sequence diagrams: fixes alignment of notes when self messages are above it [#2264](https://github.com/terrastruct/d2/pull/2264)
+- Null: fixes `null`ing a connection with absolute syntax [#2318](https://github.com/terrastruct/d2/issues/2318)
+- Gradients: works with connection fills [#2326](https://github.com/terrastruct/d2/pull/2326)
+- Latex: fixes backslashes doubling on successive parses [#2328](https://github.com/terrastruct/d2/pull/2328)

docs/releases/intro.md

@@ -2,9 +2,9 @@
 
 :::info Latest
 
-Version: [0.6.8](/releases/0.6.8) (released November 07, 2024)
+Version: [0.6.9](/releases/0.6.9) (released February 04, 2025)
 
-Downloads: [Assets](https://github.com/terrastruct/d2/releases/tag/v0.6.8)
+Downloads: [Assets](https://github.com/terrastruct/d2/releases/tag/v0.6.9)
 
 :::
 

docs/tour/connections.md

@@ -109,6 +109,8 @@ To override the default arrowhead shape or give a label next to arrowheads, defi
   - Can be further styled as `style.filled: true`.
 - `circle`
   - Can be further styled as `style.filled: true`.
+- `box`
+  - Can be further styled as `style.filled: true`.
 - `cf-one`, `cf-one-required` (cf stands for crows foot)
 - `cf-many`, `cf-many-required`
 :::

docs/tour/globs.md

@@ -10,6 +10,7 @@ import GlobsRecursive from '@site/static/d2/globs-recursive.d2';
 import GlobsRecursive2 from '@site/static/d2/globs-recursive-2.d2';
 import GlobsFilter from '@site/static/d2/globs-filter.d2';
 import GlobsFilter2 from '@site/static/d2/globs-filter-2.d2';
+import GlobsFilter3 from '@site/static/d2/globs-filter-3.d2';
 import GlobsFilterGlobValue from '@site/static/d2/globs-filter-glob-value.d2';
 import GlobsInverseFilter from '@site/static/d2/globs-inverse-filter.d2';
 import GlobsNested from '@site/static/d2/globs-nested.d2';
@@ -119,14 +120,28 @@ diagramming: it only applies to non-container (AKA leaf) shapes.
 
 ## Filters
 
-Use `&` to filter what globs target.
+Use `&` to filter what globs target. You may use any reserved keyword to filter on.
 
 <CodeBlock className="language-d2">
     {GlobsFilter}
 </CodeBlock>
 
 <div style={{width: 600}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/globs-filter.svg2')}}></div>
 
+### Property filters
+
+Aside from reserved keywords, there are special property filters for more specific
+targeting.
+
+- `connected: true|false`
+- `leaf: true|false`
+
+<CodeBlock className="language-d2">
+    {GlobsFilter3}
+</CodeBlock>
+
+<div style={{width: 600}} className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/globs-filter-3.svg2')}}></div>
+
 ### Filters on array values
 
 If the filtered attribute has an array value, the filter will match if it matches any

docs/tour/grid-diagrams.md

@@ -11,6 +11,7 @@ import GridUnaligned from '@site/static/d2/grid-unaligned.d2';
 import GridAligned from '@site/static/d2/grid-aligned.d2';
 import GridPadding1 from '@site/static/d2/grid-padding-1.d2';
 import GridPadding2 from '@site/static/d2/grid-padding-2.d2';
+import MdTable from '@site/static/d2/md-table.d2';
 
 # Grid Diagrams
 
@@ -140,6 +141,17 @@ Setting `grid-gap` is equivalent to setting both `vertical-gap` and `horizontal-
     {Table}
 </CodeBlock>
 
+:::info
+You may find it easier to just use Markdown tables though, especially if there are
+duplicate cells.
+
+<CodeBlock className="language-d2">
+    {MdTable}
+</CodeBlock>
+
+<div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/md-table.svg2')}}></div>
+:::
+
 ### Gap size 0
 
 ## Connections

docs/tour/interactive.md

@@ -49,11 +49,3 @@ Try clicking on each.
 
 <div
 className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/links.svg2')}}></div>
-
-:::info
-If you are using the Terrastruct app, you can link to other boards through their path.
-```d2
-x.link: Overview.My Service.Stuff
-```
-:::
-

docs/tour/style.md

@@ -16,7 +16,7 @@ import StylesFont from '@site/static/d2/styles-font.d2';
 import StylesFontSize from '@site/static/d2/styles-font-size.d2';
 import StylesFontColor from '@site/static/d2/styles-font-color.d2';
 import StylesTableColor from '@site/static/d2/styles-table-color.d2';
-import StylesAnimated from '@site/static/d2/styles-animated.d2';
+import StylesAnimated from '@site/static/bespoke-d2/styles-animated.d2';
 import StylesTextDecoration from '@site/static/d2/styles-text-decoration.d2';
 import StylesTextTransform from '@site/static/d2/styles-text-transform.d2';
 import StylesRoot from '@site/static/d2/styles-root.d2';

docs/tour/troubleshoot.md

@@ -3,7 +3,7 @@
 * [It won't compile a specific label or value](#it-wont-compile-a-specific-label-or-value)
 * [The text is rendered too wide/long](#the-text-is-rendered-too-widelong)
 * [Connections look cluttered](#connections-look-cluttered)
-* [I can't use reserved keywords](#i-cant-use-reserved-keywords)
+* [Reserved keywords as regular keys](#reserved-keywords-as-regular-keys)
 * [My diagram is breaking with HTML in Markdown](#my-diagram-is-breaking-with-html-in-markdown)
 * [Markdown SVGs won't render in certain SVG viewers](#markdown-svgs-wont-render-in-certain-svg-viewers)
 * [My SVG isn't interactive when I embed into HTML](#my-svg-isnt-interactive-when-i-embed-into-html)
@@ -34,14 +34,13 @@ D2 adds a minimal amount of padding to shapes past the label dimensions. When a
 many connections, increasing dimensions will give it more surface area for the connections
 to route aesthetically to.
 
-## I can't use reserved keywords
+## Reserved keywords as regular keys
 
-We're working on a better system here to escape reserved keywords, but for now you can
-relabel:
+If you'd like to use a reserved keyword as a key, just quote it:
 
 ```d2
 x: {
-  width_: width
+  "width": width
 }
 ```
 

i18n/ko/docusaurus-plugin-content-docs/current/tour/style.md

@@ -16,7 +16,7 @@ import StylesFont from '@site/static/d2/styles-font.d2';
 import StylesFontSize from '@site/static/d2/styles-font-size.d2';
 import StylesFontColor from '@site/static/d2/styles-font-color.d2';
 import StylesTableColor from '@site/static/d2/styles-table-color.d2';
-import StylesAnimated from '@site/static/d2/styles-animated.d2';
+import StylesAnimated from '@site/static/bespoke-d2/styles-animated.d2';
 import StylesTextDecoration from '@site/static/d2/styles-text-decoration.d2';
 import StylesTextTransform from '@site/static/d2/styles-text-transform.d2';
 import StylesRoot from '@site/static/d2/styles-root.d2';

sidebars.js

@@ -169,6 +169,7 @@ const sidebars = {
       link: { type: "doc", id: "releases/intro" },
       items: [
         "releases/intro",
+        "releases/0.6.9",
         "releases/0.6.8",
         "releases/0.6.7",
         "releases/0.6.6",

src/theme/Footer/index.js

@@ -31,7 +31,7 @@ function Footer() {
             Created by <img src="/img/terrastruct_logo.svg" />
           </span>
         </a>
-        |<span>© 2024 Terrastruct, Inc.</span>
+        |<span>© 2025 Terrastruct, Inc.</span>
       </div>
       <div className="Footer__Mobile">
         <div className="Footer__Mobile--Bar">

static/d2/styles-animated.d2 static/bespoke-d2/styles-animated.d2

@@ -2,3 +2,4 @@ direction: right
 x -> y: hi {
   style.animated: true
 }
+x.style.animated: true

static/d2/globs-filter-3.d2

@@ -0,0 +1,14 @@
+**: {
+  &connected: true
+  style.fill: yellow
+}
+
+**: {
+  &leaf: true
+  style.stroke: red
+}
+
+container: {
+  a -> b
+}
+c

static/d2/links.d2

@@ -4,4 +4,6 @@ x: I'm a Mac {
 y: And I'm a PC {
   link: https://microsoft.com
 }
-x -> y: gazoontite
+x -> y: gazoontite {
+  link: https://google.com
+}

static/d2/md-table.d2

@@ -0,0 +1,7 @@
+savings: ||md
+  | Month    | Savings | Expenses | Balance |
+  | -------- | ------- | -------- | ------- |
+  | January  | $250    | $150     | $100    |
+  | February | $80     | $200     | -$120   |
+  | March    | $420    | $180     | $240    |
+||

static/d2/text-2.d2

@@ -1,6 +1,6 @@
 plankton -> formula: will steal
 formula: {
   equation: |latex
-    \lim_{h \\rightarrow 0 } \frac{f(x+h)-f(x)}{h}
+    \lim_{h \rightarrow 0 } \frac{f(x+h)-f(x)}{h}
   |
 }