diff --git a/docs/releases/0.8.2.md b/docs/releases/0.8.2.md new file mode 100644 index 0000000..6cad3fb --- /dev/null +++ b/docs/releases/0.8.2.md @@ -0,0 +1,60 @@ +#### Features ๐Ÿš€ + +- exports: gif exports work with `animate: true` keyword [#2663](https://github.com/d2lang/d2/pull/2663) + +#### Improvements ๐Ÿงน + +- releases: strip native binaries, build and smoke-test all six archives in CI, produce reproducible archives with checksums, signed provenance, and SBOM attestations, and verify standalone downloads when GitHub provides a digest +- plugins: make render post-processing optional and deprecate it for removal after one protocol compatibility cycle; legacy external `postprocess` commands remain supported during the transition +- api: deprecate legacy layout-feature constants, raw-WASM ELK/object-order bridges, unused public wrappers, and test-only comparison, validation, and logging helpers; compatibility entry points remain callable for one release while in-repository callers use supported or internal replacements +- maintenance: update the Go toolchain to 1.27.0 and refresh Go, d2.js, CI, release dependencies, and compression-sensitive snapshots +- renders: update syntax highlighting and migrate archived font and PDF dependencies to maintained replacements +- d2dagre: replace the embedded JavaScript runtime with native Go Dagro and update its D2-used layout surface from Dagre 0.8.5 to Dagre 3.1.1 behavior. This intentionally changes node ordering and coordinates, edge routes, self-loops, and compound sizing in some diagrams; regenerate and review stored SVG or board-JSON snapshots +- d2sketch: update the native rough-go renderer from Rough.js 4.0.4 to 4.6.6 behavior. Seeded sketch strokes, fills, arrowheads, and SVG paths may change; regenerate and review stored sketch SVG snapshots +- d2elk: replace the embedded ELK.js 0.8.2 runtime with native Go elk-go and update D2's ELK layout profile to ELK.js 0.12.0 behavior. This is a layout-behavior update, not an output-compatible runtime swap: + - existing ELK diagrams may receive different node coordinates and ordering, edge and label routes, and component packing; regenerate and review stored SVG or board-JSON snapshots + - children of nested compound graphs may be reordered because ELK 0.12 cannot safely apply D2's previous nested model-order profile + - non-default `--elk-algorithm` modes may also produce different geometry; the optional DisCo algorithm is removed because upstream no longer bundles it +- d2latex: replace the embedded MathJax JavaScript runtime with the native Go mathjax-go port without changing rendered formulas +- performance: native Go engine migrations substantially reduce median end-to-end D2-to-SVG conversion time in Apple M4 benchmarks: + - Dagre is 7โ€“9ร— faster + - ELK is 40โ€“53ร— faster + - LaTeX is 21.6ร— faster on a four-formula diagram +- performance: remove superlinear compiler and layout bottlenecks in large globs, repeated imports, nested diagrams, compound Dagre graphs, bend-heavy ELK layouts, and style-only scenario/step boards [#2827](https://github.com/d2lang/d2/pull/2827). Median Apple M4 single-CPU synthetic stress benchmarks for these targeted cliffs, rather than corpus-wide conversion averages, improve by: + - leading glob applied to 1,000 fields: 1.59s to 12ms (~133ร— faster) + - 100 references into the same 100-field import file: 54ms to 12ms (~4.6ร— faster) + - 4,000 flat fields: 67ms to 7ms (~9.6ร— faster) + - 3,200 distinct edges: 200ms to 19ms (~10.6ร— faster) + - 32-node base with 8 style-only scenarios and 8 steps (17 boards total): 40ms to 7.3ms (~5.5ร— faster) + - 340-object nested D2 Dagre layout: 1.30s to 0.88s (~32% faster) + - Dagro depth-100 compound layout: 3.60s to 0.90s (~4ร— faster) + - 250-node, 1,000-edge ELK layout: 337ms to 238ms (~30% faster) +- d2ascii: + - sql_table and uml class shapes are supported [#2623](https://github.com/d2lang/d2/pull/2623) + - newlines are handled [#2626](https://github.com/d2lang/d2/pull/2626) + - empty left columns are cropped [#2626](https://github.com/d2lang/d2/pull/2626) +- exports: + - Chromium download through CLI for PNG exports is prompted [#2655](https://github.com/d2lang/d2/pull/2655) + - `animate-interval` is no longer required, defaults to 1000ms for gifs [#2663](https://github.com/d2lang/d2/pull/2663) +- renders: + - remote images are fetched more reliably [#2659](https://github.com/d2lang/d2/pull/2659) + +#### Bugfixes โ›‘๏ธ + +- d2dagre: keep same-direction parallel edges and self-loop routes finite when using Dagre 3.1.1 behavior +- d2svg: reject padding that would produce invalid negative SVG dimensions +- d2elk: route ancestor-to-descendant connections around intermediate containers +- d2elk: prevent labels on multiple self-loops from overlapping in right-directed layouts, including the `ent2d2_right` regression case +- d2svg: render one-stop gradients with finite SVG offsets +- compiler: make suffix globs match only names with the requested suffix +- compiler: reject non-finite opacity values with a source diagnostic +- d2svg: preserve connection links on LaTeX, Markdown, and code labels +- d2lib: preserve caller-supplied light and dark theme overrides over source configuration +- compiler: index equivalent connections consistently when endpoint notation is reversed +- exports: pptx follows standards more closely, addressing warnings from some Powerpoint software [#2645](https://github.com/d2lang/d2/pull/2645) +- d2sequence: fix edge case of invalid sequence diagrams [#2660](https://github.com/d2lang/d2/pull/2660) +- d2svg: Text may overflow legend bounds when monospace font is used [#2674](https://github.com/d2lang/d2/pull/2674) + +--- + +For the latest d2.js changes, see separate [changelog](https://github.com/d2lang/d2/blob/master/d2js/js/CHANGELOG.md). diff --git a/docs/releases/0.9.0.md b/docs/releases/0.9.0.md new file mode 100644 index 0000000..f2e4c1c --- /dev/null +++ b/docs/releases/0.9.0.md @@ -0,0 +1,26 @@ +#### Features ๐Ÿš€ + +- TALA is now open source and bundled with D2, including the JavaScript/WASM package. Select it with `d2 --layout=tala`, `D2_LAYOUT=tala`, or `vars.d2-config.layout-engine: tala`. No separate plugin installation or license key is required. +- tala: configure layout attempts with `--tala-seeds`, `D2_TALA_SEEDS`, or `vars.d2-config.data.tala-seeds`. +- exports: render PNG, GIF, PDF, and PPTX with the built-in renderer + +#### Improvements ๐Ÿงน + +- performance: reduce repeated work in Dagre ranking, text measurement, SVG preparation, and PNG encoding +- performance: reduce repeated work in selective imports, dynamic grid layout, and PNG connection rendering +- exports: reduce PNG memory usage and support images above the previous 67-megapixel limit +- performance: SVG rendering is approximately 10ร— faster across the E2E corpus. Real-world diagrams compile, lay out, and render approximately 3ร— faster at the median. +- renders: SVG exports are approximately 24% smaller across the E2E corpus and 18% smaller across real-world fixtures, with unchanged appearance. +- renders: render Markdown labels as native SVG instead of HTML `foreignObject` content + +#### Bugfixes โ›‘๏ธ + +- install: reject the obsolete `--tala` installer flag with migration guidance before installing, instead of incorrectly claiming that older D2 releases bundle TALA +- sequence diagrams: keep synthetic lifeline endpoint IDs stable across architectures +- exports: honor `D2_TIMEOUT` during PNG and GIF rendering +- compiler: keep recursive globs out of class and variable definitions and report class reference cycles instead of overflowing the stack +- renders: decode gzip, Brotli, and deflate remote images before embedding them + +--- + +For the latest d2.js changes, see separate [changelog](https://github.com/d2lang/d2/blob/master/d2js/js/CHANGELOG.md). diff --git a/docs/releases/intro.md b/docs/releases/intro.md index afc70ab..7386165 100644 --- a/docs/releases/intro.md +++ b/docs/releases/intro.md @@ -2,9 +2,9 @@ :::info Latest -Version: [0.7.1](/releases/0.7.1) (released August 19, 2025) +Version: [0.9.0](/releases/0.9.0) (released September 7, 2026) -Downloads: [Assets](https://github.com/d2lang/d2/releases/tag/v0.7.1) +Downloads: [Assets](https://github.com/d2lang/d2/releases/tag/v0.9.0) ::: diff --git a/docs/tour/design.md b/docs/tour/design.md index 84b958f..be99288 100644 --- a/docs/tour/design.md +++ b/docs/tour/design.md @@ -65,9 +65,11 @@ from stdin and writing to stdout. Images and fonts are by default embedded into diagram so that exported diagrams are standalone -- they'll look the same everywhere. D2 supports a wide variety of formats like PPT and GIF. It allows imports, such that you can modularize your diagram into multiple files. There's a language API to programmatically -edit and write D2. All of these are antithetical to a web library for browser rendering. -D2 intends to ship and maintain a web library for that purpose, but it'll be trimmed down -from the full feature set and secondary in priority. +edit and write D2. + +D2 also runs in browsers and Node.js through +[D2.js](https://github.com/d2lang/d2/tree/master/d2js/js#readme), a JavaScript library +powered by WebAssembly. ## Singular use case: documenting software diff --git a/docs/tour/dimensions.md b/docs/tour/dimensions.md index cac3ee3..7311129 100644 --- a/docs/tour/dimensions.md +++ b/docs/tour/dimensions.md @@ -6,7 +6,8 @@ import Dimensions from '@site/static/d2/dimensions.d2'; You can specify the `width` and `height` of most shapes. :::info -These keywords cannot be set on containers, since containers resize to fit their children. +These keywords can be set on containers when using TALA or ELK. TALA may increase the +dimensions to fit the children. ::: diff --git a/docs/tour/elk.md b/docs/tour/elk.md index 512eab8..9b8bb91 100644 --- a/docs/tour/elk.md +++ b/docs/tour/elk.md @@ -2,7 +2,7 @@ **[๐Ÿ”— Gallery](/examples/elk)** -ELK is a mature, hierarchical layout, actively maintained by an academic research group at +ELK is a mature layout engine, actively maintained by an academic research group at [Christian Albrechts University in Kiel](https://www.rtsys.informatik.uni-kiel.de/en/team). @@ -10,6 +10,40 @@ Kiel](https://www.rtsys.informatik.uni-kiel.de/en/team). [https://www.eclipse.org/elk/reference.html](https://www.eclipse.org/elk/reference.html) +## Algorithms + +ELK has several layout algorithms. D2 uses `layered` by default. To choose another one, +pass `--elk-algorithm` along with `--layout=elk`. + +The main choices for connected diagrams are: + +| Algorithm | Description | +| --- | --- | +| `layered` | The default. Arranges shapes in layers, with orthogonal connections. | +| `force` | Spreads shapes out using simulated attraction and repulsion. | +| `stress` | Places shapes closer together when there are shorter paths between them. | +| `mrtree` | Arranges a tree in levels. | +| `radial` | Arranges a tree in circles around its root. | + +For example: + +```shell +d2 --layout=elk --elk-algorithm=force input.d2 force.svg +d2 --layout=elk --elk-algorithm=stress input.d2 stress.svg +d2 --layout=elk --elk-algorithm=radial tree.d2 radial.svg +``` + +`radial` expects a tree. For example, `tree.d2` could contain: + +```d2 +a -> b +a -> c +c -> d +``` + +The pros and cons below describe the default `layered` algorithm. Other algorithms have +different routing and feature support. + ## Pros - Clean, orthogonal routes. diff --git a/docs/tour/exports.md b/docs/tour/exports.md index 6d6e7ce..f8fb72a 100644 --- a/docs/tour/exports.md +++ b/docs/tour/exports.md @@ -22,14 +22,12 @@ file will be the input name as an SVG file. For example, `d2 in.d2` will produce a file named `in.svg`. -The resulting SVG has CSS injected into it. This, along with the use of HTML -``s used to make Markdown work, means that the SVG is meant to be viewed in -a web context. For example, opening it up in your browser, embedding it onto a webpage. It -may not look right without a web context, like in Inkscape or Adobe Illustrator. +The resulting SVG has CSS injected into it. You can open it in your browser or embed it +onto a webpage. Different SVG viewers may handle CSS and fonts differently. On the CLI, if you pass in `-` - for the input, it reads D2 from stdin -- for the output, it writes SVG to stdout +- for the output, it writes SVG to stdout by default :::info Technical details on SVG exports This information might be useful if you're planning on doing post-processing on the SVG exports. @@ -49,21 +47,8 @@ conflicts when multiple diagrams are on the same page. d2 in.d2 out.png ``` -PNG exports work by [Playwright](https://github.com/microsoft/playwright) spinning up a -headless browser, putting the SVG onto it, and taking a screenshot. The first invocation -of Playwright will download its dependencies, if they don't already exist on the machine. - -:::info -If you get a message like `err: failed to launch Chromium`, you can try installing -Playwright dependencies outside of D2 on your machine. For example: - -``` -npm install -g @playwright -npx playwright install --with-deps chromium -``` - -See [#744](https://github.com/d2lang/d2/issues/744#issuecomment-1446641870) for more. -::: +PNG exports have no external dependencies. D2 renders them directly, unlike Mermaid, +which uses a headless browser like Chromium to render diagrams and take screenshots. ## PDF @@ -72,8 +57,7 @@ d2 in.d2 out.pdf ``` PDF exports are the result of taking PNG exports and placing them on PDF pages, along with -headers and fonts. As such, dependencies needed for PNG exports are also needed for PDF -exports. +headers and fonts. PDF is _more_ interactive than PNG, but _less_ interactive than SVG. @@ -159,11 +143,19 @@ d2 --ascii-mode standard in.d2 out.txt ## Stdout -D2 accepts `-` in place of the input and/or output arguments. SVG is used as the format -for Stdout output. +D2 accepts `-` in place of the input and/or output arguments. SVG is the default format +for stdout. For example, this writes a D2 script of `x -> y` and outputs it to a file `example.svg`. ```shell echo "x -> y" | d2 - - > example.svg ``` + +To use a different format, pass `--stdout-format`: + +```shell +echo "x -> y" | d2 --stdout-format=png - - > example.png +``` + +Supported formats are `svg`, `png`, `pdf`, `pptx`, `gif`, and `ascii` (`txt` also works). diff --git a/docs/tour/faq.md b/docs/tour/faq.md index a510446..d1cc145 100644 --- a/docs/tour/faq.md +++ b/docs/tour/faq.md @@ -42,8 +42,14 @@ No, D2 can run entirely server-side. ### Can D2 run on a browser? Yes, with WebAssembly. D2 runs on [https://play.d2lang.com](https://play.d2lang.com) this -way.We are working on including the build with the releases, as well as provide -instructions and examples so you can include it in your browser projects. +way. To include D2 in your own browser projects, install D2.js: + +```shell +npm install @d2lang/d2 +``` + +See the [D2.js docs](https://github.com/d2lang/d2/tree/master/d2js/js#readme) for +instructions and examples. ### Can I use D2 online? diff --git a/docs/tour/fonts.md b/docs/tour/fonts.md index 6f93c2b..8e305d0 100644 --- a/docs/tour/fonts.md +++ b/docs/tour/fonts.md @@ -33,10 +33,10 @@ italic will remain as Source Sans Pro Italic. If you'd like to customize the mono fonts: -- `--font-regular` -- `--font-italic` -- `--font-bold` -- `--font-semibold` +- `--font-mono` +- `--font-mono-italic` +- `--font-mono-bold` +- `--font-mono-semibold` ## Sketch font diff --git a/docs/tour/future.md b/docs/tour/future.md index b514ea8..318eef5 100644 --- a/docs/tour/future.md +++ b/docs/tour/future.md @@ -127,9 +127,10 @@ aim to be at least as good as an existing, battle-tested text-based styling lang ### Plan -1. Build language features to make customization easier. Things like glob targeting (e.g. -x.*.style.fill: red to make every child of a container red) and classes (define styles -once, reuse as classes). Its catalog of shape and connection types needs to expand. +1. Continue building language features to make customization easier. D2 supports +[glob targeting](/tour/globs) (e.g. `x.*.style.fill: red` to make every child of a container +red) and [classes](/tour/classes) (define styles once, reuse as classes). Its catalog of +shape and connection types needs to expand. 1. Continue investing in themes. Theming is how engineers make beautiful diagrams without designing. D2 needs to extend what themes can latch onto. Not just colors, but fonts, background styles (dotted, grids, colors), every aspect of the diagram. They should be @@ -176,10 +177,9 @@ unplanned usage. 1. Complete editor integrations. Currently, syntax highlighting is supported. But a feature-complete integration for VSCode for example would allow rendering to its built-in browser, autoformat, call out to LSP functions to refactor, and more. -1. Build out imports/exports. Currently, D2 can take in D2 files and export to SVGs. It - should have a transpiler to import other popular text-to-diagram languages, and output - to other popular image types. It should take in CSVs of schemas to make ERDs. It should - be able to render to ASCII art. +1. Build out imports/exports. D2 exports to [SVG, PNG, PDF, PPTX, GIF, and ASCII](/tour/exports). + It should have a transpiler to import other popular text-to-diagram languages. It + should take in CSVs of schemas to make ERDs. 1. Build a configurable linter. ## Your feedback @@ -199,8 +199,7 @@ GUI diagram-makers will always be necessary. [2] MermaidJS seems to have implemented support for containers as well, but it's not widely released and their live editor still won't allow it. -[3] For now, this is closed-source. It's free to download and evaluate. To learn more, -visit [https://terrastruct.com/tala](https://terrastruct.com/tala). +[3] [TALA](/tour/tala) is open-source and bundled with D2 as of v0.9.0. [4] If you still miss the hand-drawn aesthetic, D2 has just the thing: https://github.com/d2lang/d2/pull/492 diff --git a/docs/tour/grid-diagrams.md b/docs/tour/grid-diagrams.md index 695c48c..b598363 100644 --- a/docs/tour/grid-diagrams.md +++ b/docs/tour/grid-diagrams.md @@ -164,10 +164,8 @@ Connections for grids themselves work normally as you'd expect. ### 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. +With Dagre and ELK, connections between shapes inside a grid are center-center straight +segments, i.e., no path-finding. With TALA, these connections use TALA's routing engine.
@@ -179,8 +177,7 @@ i.e., no path-finding. ## Nesting -Currently you can nest grid diagrams within grid diagrams. Nesting other types is coming -soon. +You can nest grid diagrams, sequence diagrams, and regular diagrams within grids. {GridNestedGrid} diff --git a/docs/tour/layouts.md b/docs/tour/layouts.md index db4b39b..3da5802 100644 --- a/docs/tour/layouts.md +++ b/docs/tour/layouts.md @@ -44,8 +44,8 @@ These are mentioned in other parts of the doc and aggregated here: - `near` set to another object. `near` can be set to constants for all layout engines, but only TALA can use it to set to objects. -- `width` and `height` on containers. TALA will add this soon, but currently it is only in - ELK. Note that these keywords work on non-containers in all layout engines. +- `width` and `height` on containers are supported by TALA and ELK. These keywords work on + non-containers in all layout engines. - `top` and `left` to lock positions only work in TALA. - Connections from ancestors to descendants (e.g. a container to its child) do not work in Dagre. diff --git a/docs/tour/man.md b/docs/tour/man.md index 9a73357..1ff211b 100644 --- a/docs/tour/man.md +++ b/docs/tour/man.md @@ -4,30 +4,32 @@ pagination_next: tour/exports # CLI manual -The following is a copy of the `man` (manual) for the CLI. It is identical to the output -you would get by installing the CLI and running `man d2`. - -```rolf -d2(1) General Commands Manual d2(1) +The following is a copy of the `man` (manual) for D2 v0.9.0. Run `man d2` to view the +manual for your installed version. +```text NAME d2 โ€“ compiles and renders d2 diagrams into svgs. SYNOPSIS d2 [--watch false] [--theme 0] [--salt string] file.d2 - [file.svg | file.png] + [file.svg | file.png | file.pdf | file.pptx | file.gif | file.txt] d2 layout [name] d2 fmt file.d2 ... d2 play file.d2 d2 validate file.d2 DESCRIPTION - d2 compiles and renders file.d2 to file.svg | file.png. + d2 compiles and renders file.d2 to file.svg | file.png | file.pdf | + file.pptx | file.gif | file.txt. It defaults to file.svg if no output path is passed. Pass - to have d2 read from stdin or write to stdout. + PNG exports support up to 32768 pixels per dimension, subject to + rendering resource limits. + Never use the presence of the output file to check for success. Always use the exit status of d2. This is because sometimes when errors occur while rendering, d2 still write out a partial render anyway to enable @@ -65,11 +67,6 @@ OPTIONS -s, --sketch false Renders the diagram to look like it was sketched by hand. - --ascii-mode extended - Character set to use for ASCII output (.txt extension or - --stdout-format ascii). Options: standard (basic ASCII) or - extended (Unicode box-drawing characters). - --center flag Center the SVG in the containing viewbox, such as your browser screen. @@ -91,12 +88,33 @@ OPTIONS Path to .ttf file to use for the bold font. If none provided, Source Sans Pro Bold is used. + --font-semibold + Path to .ttf file to use for the semibold font. If none + provided, Source Sans Pro Semibold is used. + + --font-mono + Path to .ttf file to use for the monospace font. If none + provided, Source Code Pro Regular is used. + + --font-mono-bold + Path to .ttf file to use for the monospace bold font. If none + provided, Source Code Pro Bold is used. + + --font-mono-italic + Path to .ttf file to use for the monospace italic font. If + none provided, Source Code Pro Italic is used. + + --font-mono-semibold + Path to .ttf file to use for the monospace semibold font. If + none provided, Source Code Pro Semibold is used. + --pad 100 Pixels padded around the rendered diagram. --animate-interval 0 If given, multiple boards are packaged as 1 SVG which transitions through each board at the interval (in - milliseconds). Can only be used with SVG and GIF exports. + milliseconds). Can only be used with SVG or GIF exports. For + GIF exports, defaults to 1000ms if not specified. --browser true Browser executable that watch opens. Setting to 0 opens no @@ -150,13 +168,20 @@ OPTIONS --stdout-format string Set the output format when writing to stdout. Supported - formats are: png, svg, ascii. Only used when output is set to stdout - (-). + formats are: png, svg, ascii, txt, pdf, pptx, gif. Only used + when output is set to stdout (-). --no-xml-tag false Omit XML tag () from output SVG files. Useful when generating SVGs for direct HTML embedding. + --omit-version false + omit D2 version from generated image. + + --ascii-mode extended + ASCII rendering mode for text outputs. Options: 'standard' + (basic ASCII chars) or 'extended' (Unicode chars). + SUBCOMMANDS layout Lists available layout engine options with short help. @@ -217,6 +242,18 @@ ENVIRONMENT VARIABLES D2_FONT_SEMIBOLD See --font-semibold flag. + D2_FONT_MONO + See --font-mono flag. + + D2_FONT_MONO_BOLD + See --font-mono-bold flag. + + D2_FONT_MONO_ITALIC + See --font-mono-italic flag. + + D2_FONT_MONO_SEMIBOLD + See --font-mono-semibold flag. + D2_ANIMATE_INTERVAL See --animate-interval flag. @@ -226,6 +263,9 @@ ENVIRONMENT VARIABLES D2_CHECK See --check flag. + D2_ASCII_MODE + See --ascii-mode flag. + DEBUG See -d[ebug] flag. IMG_CACHE @@ -241,17 +281,12 @@ ENVIRONMENT VARIABLES D2_STDOUT_FORMAT See --stdout-format flag. - D2_ASCII_MODE - See --ascii-mode flag. - D2_NO_XML_TAG See --no-xml-tag flag. -SEE ALSO - d2plugin-tala(1) + OMIT_VERSION + See --omit-version AUTHORS - Terrastruct Inc. - -macOS 14.1 March 12, 2025 macOS 14.1 + D2 contributors ``` diff --git a/docs/tour/positions.md b/docs/tour/positions.md index 26b752b..5ed4b99 100644 --- a/docs/tour/positions.md +++ b/docs/tour/positions.md @@ -139,7 +139,20 @@ Notice how the text is positioned near the `aws` node and not the `gcloud` node. ## Top and left On the TALA engine, you can also directly set the `top` and `left` values for objects, and -the layout engine will only move other objects around it. +the layout engine will only move other objects around it. Both values must be set together. -For more on this, see page 17 of the [TALA user -manual](https://github.com/terrastruct/TALA/blob/master/TALA_User_Manual.pdf). +For example, this locks `x` in place while TALA positions `y` around it: + +```d2 +x: { + top: 100 + left: 100 +} +x -> y +``` + +Run with TALA: + +```shell +d2 --layout=tala input.d2 output.svg +``` diff --git a/docs/tour/tala.md b/docs/tour/tala.md index b051dcb..6a4cc1b 100644 --- a/docs/tour/tala.md +++ b/docs/tour/tala.md @@ -2,20 +2,9 @@ **[๐Ÿ”— Gallery](/examples/tala)** -Proprietary layout engine developed by Terrastruct, designed specifically for software +A novel layout engine developed by Terrastruct, designed specifically for software architecture diagrams. -TALA is a separate install from D2, to keep a clean cut between 100% free and -open-source D2, and proprietary, closed-source TALA. You can download it here: -[https://github.com/terrastruct/tala](https://github.com/terrastruct/tala#installation). - -## Reference - -[https://terrastruct.com/tala/](https://terrastruct.com/tala/) - -For the most up-to-date information, please see the [official TALA -manual](https://github.com/terrastruct/TALA/blob/master/TALA_User_Manual.pdf). - ## Pros - As a general orthogonal layout engine, TALA is not constrained to one type like @@ -32,8 +21,5 @@ manual](https://github.com/terrastruct/TALA/blob/master/TALA_User_Manual.pdf). ## Cons -- Not free. -- Relatively new. ~2 years in production compared to the 10+ years that alternative layout - engines have. -- More random than other layout engines. A small change to a label can cascade into an +- Has randomness. A small change to a label can cascade into an entirely different layout. diff --git a/docs/tour/troubleshoot.md b/docs/tour/troubleshoot.md index aec131e..3bd5e6a 100644 --- a/docs/tour/troubleshoot.md +++ b/docs/tour/troubleshoot.md @@ -5,7 +5,6 @@ * [Connections look cluttered](#connections-look-cluttered) * [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) * [Non-ASCII text breaks stuff](#non-ascii-text-breaks-stuff) @@ -48,13 +47,6 @@ x: { Your HTML must be semantic to be parsed in SVG XML correctly, e.g. use `
` instead of `
`. -## Markdown SVGs won't render in certain SVG viewers - -D2's Markdown support is added via xhtml foreign objects, which means the SVG viewer must -have HTML rendering capabilities. The vast majority of SVG viewing is, but if you intend -to use a pure SVG editor on D2 diagrams that don't have such capabilities (e.g. Adobe -Illustrator), it won't render correctly there. - ## My SVG isn't interactive when I embed into HTML There's a few different ways to embed SVG into HTML, each with tradeoffs. If you use plain diff --git a/sidebars.ts b/sidebars.ts index 1181f03..dc51545 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -171,6 +171,8 @@ const sidebars: SidebarsConfig = { link: { type: "doc", id: "releases/intro" }, items: [ "releases/intro", + "releases/0.9.0", + "releases/0.8.2", "releases/0.7.1", "releases/0.7.0", "releases/0.6.9", diff --git a/src/components/Directory/MoreFeatures.jsx b/src/components/Directory/MoreFeatures.jsx index 4f7b2a5..ddf48aa 100644 --- a/src/components/Directory/MoreFeatures.jsx +++ b/src/components/Directory/MoreFeatures.jsx @@ -119,7 +119,7 @@ const moreFeatures = [ }, { title: "Exports", - description: "On the CLI, you may export .d2 into SVG, PNG, PDF. More coming soon!", + description: "Export .d2 into SVG, PNG, PDF, PPTX, GIF, and ASCII.", icon: "exports.svg", href: "/tour/exports/", },