v0.2.1

Dark mode support has landed! Thanks to @vfosnar for such a substaintial first-time contribution to D2. Only one dark theme option accompanies the support, so if you have a dark theme you like, please feel free to submit into D2!

dark_docs.mp4

D2 is now usable in non-Latin languages (and emojis!), as the font-measuring accounts for multi-byte characters. Thanks @bo-ku-ra for keeping this top of mind.

D2 0.2.0 vs 0.2.1:

Sketch mode's subtle hand-drawn texture adapts to background colors. Previously the streaks were too subtle on lighter backgrounds and too prominent on darker ones.

This release also fixes a number of non-trivial layout bugs made in v0.2.0, and has better error messages.

Features 🚀

• Dark theme support! See docs. #613
• Many non-Latin languages (e.g. Chinese, Japanese, Korean) are usable now that multi-byte characters are measured correctly. #817
• Dimensions can be set on containers (layout engine dependent). #845

Improvements 🧹

• Sketch mode's subtle hand-drawn texture adapts to background colors. #613
• Improves label legibility for dagre containers by stopping container edges early if they would run into the label. #880
• Cleaner watch mode logs without timestamps. #830
• Remove duplicate success logs in watch mode. #830
• CLI reports when a feature is incompatible with layout engine, instead of silently ignoring. #845
• near key set to direct parent or ancestor throws an appropriate error message. #851
• Dimensions and positions are able to be set from API. #853

Bugfixes ⛑️

• Fixes edge case where layouts with dagre show a connection from the bottom side of shapes being slightly disconnected from the shape. #820
• Bounding boxes weren't accounting for icons placed on the boundaries. #879
• Sequence diagrams using special characters in object IDs could cause rendering bugs. #856
• Fixes rare compiler bug when using underscores in edges to create objects across containers. #824
• Fixes rare possibility of rendered connections being hidden or cut off. #828
• Creating nested children within sql_table and class shapes are now prevented (caused confusion when accidentally done). #834
• Fixes graph deserialization bug. #837
• steps with non-map fields could cause panics. #783

v0.2.0

Here's what a D2 diagram looks like in 0.1 (left) vs 0.2 (right):

Much more legible, especially in larger diagrams! This upgrade trims a lot of the excess whitespace present before and makes diagrams more compact. We've also combed through each shape to improve their label and icon positions, paddings, and aspect ratios at different sizes. Example of icons and labels avoiding collisions:

We've also put up a hosted icon site for you to conveniently find common software architecture icons to include in your D2 diagrams. https://icons.terrastruct.com

There's also been a major compiler rewrite. It's fixed many minor compiler bugs, but most importantly, it implements multi-board diagrams. Stay tuned for more as we write docs and make this accessible in the next release!

Features 🚀

• double-border keyword implemented. #565
• The Dockerfile now supports rendering PNGs #594
  • There was a minor breaking change as part of this where the default working directory of the Dockerfile is now /home/debian/src instead of /root/src to allow UID remapping with fixuid.
• d2 fmt accepts multiple files to be formatted #718
• font-size works for sql_table and class shapes #769
• You can now use the reserved keywords layers/scenarios/steps to define diagrams with multiple levels of abstractions. Coming soon. #714

Improvements 🧹

• Reduces default padding of shapes. #702
• Ensures labels fit inside shapes with shape-specific inner bounding boxes. #702
• dagre container labels changed positions to outside the shape. Many previously obscured container labels are now legible. #788
• Container icons are placed top-left instead of center, to ensure no collisions with children. #806
• Code snippets use bold and italic font styles as determined by highlighter #710, #741
• Improves package shape dimensions with short height. #702
• Sequence diagrams are rendered more compacted, both vertically and horizontally. #796
• Keeps person shape from becoming too distorted. #702
• Keeps oval shape from becoming too thin. #807
• Ensures shapes with icons have enough padding for their labels. #702
• --force-appendix flag adds an appendix to SVG outputs with tooltips or links. #761
• d2 themes subcommand to list themes. #760
• sql_table header left-aligned with column #769
• Sequence diagram edge group labels are clearer #782

Bugfixes ⛑️

• Fixes groups overlapping in sequence diagrams when they end in a self loop. #728
• Fixes dimensions of unlabeled squares or circles with only a set width or height. #702
• Fixes scaling of actor shapes in sequence diagrams. #702
• Sequence diagram note ordering was sometimes wrong. #796
• Images can now be set to sizes smaller than 128x128. #702
• Tooltips with ampersand would result in invalid SVGs. #798
• Fixes class height when there are no rows. #756
• Border radius was not firefox-compatible. #799

Breaking changes

• You can no longer use keywords intended for use under style outside and vice versa. e.g. obj.style.shape and obj.double-border are now illegal. The correct usages have always been obj.shape and obj.style.double-border; it just wasn't enforced until now.

v0.1.6

Many meaningful quality of life improvements and bug fixes, along with a few small features. Overall, a stabilizing set of changes, while some huge features are brewing in the background for the next release!

Thank you to the new contributors that have been joining us. If you want to get involved, there's lots of issues tagged with "good first issue" that are relatively easy to pick up. We're always around to lend a hand, and feel free to drop by our Discord if you're not sure where to start.

Have you enjoyed using D2? We're redesigning some of the site and will have a section for testimonials. If you'd like to be included with a few words alongside your name or public profile, please email us at [email protected] (or just post it somewhere and let us know)!

Features 🚀

• animated keyword implemented for connections. #652
  
• border-radius keyword implemented for squares/rectangles. #688
• circle arrowheads. #634

Improvements 🧹

• ELK layouts tuned to have better defaults. #627
• Code snippets of unrecognized languages will render (just without syntax highlighting). #650
• Adds sketched versions of arrowheads. #656

Bugfixes ⛑️

• Fixes code snippets not being tall enough with leading newlines. #664
• Opacity was not being applied to labels of shapes (and other edge cases). #677
• Fixes arrowheads sometimes appearing broken with sketch on. #656
• Fixes attributes being ignored for sql_table to sql_table connections. #658
• Icon URLs that needed escaping (e.g. with ampersands) are handled correctly by CLI. #666
• Fixes self-connections inside layouts when using ELK. #676
• Fixes inter-span messages between spans of the same actor in sequence diagrams. #694
• Fixes arrowheads sometimes appearing broken in Dagre layouts. #649
• Fixes tooltip/link attributes being ignored for sql_table and class. #658
• Bounding box was not accounting for dimensions added by multiple and 3d keywords, which made them look cut off with 0 padding. #684, #685
• Fixes markdown shapes being slightly too short for their text in some cases. #665
• Fixes panic when the only diagram object has near set to a constant. #687

v0.1.5

Features 🚀

• Crow foot notation has been added for arrowheads. See docs for more. #578.
• Exported SVGs fit to screen on open. #601

Improvements 🧹

• Dagre edges are spaced apart to prevent label overlap. #618

Bugfixes ⛑️

• Appendix seperator line no longer added to PNG export when appendix doesn't exist. #582
• Watch mode only fits to screen on initial load. #601
• Dimensions (width/height) were incorrectly giving compiler errors when applied on a shape with style. #614
• near would collide with labels if they were on the diagram boundaries in the same position. #617
• Fixes routing between sql table columns if the column name is the prefix of the table name. #615

v0.1.4

This release introduces interactive diagrams. Namely, tooltip and link can now be set, which allows you to hover to see more or click to go to an external link. This small change enables many possibilities, including richer integrations like internal wiki's that can be linked together through diagrams. An icon will indicate that a shape has a tooltip that can be hovered over for more information, or a link. We have much more in store for interactivity, stay tuned!

Since interactive features obviously won't work on static export formats like PNG, they will be included automatically in an appendix when exporting to those formats, like so:

This release also gives more power to configure layouts. width and height are D2 keywords which previously only worked on images, but now work on any non-containers. Additionally, all the layout engines have configurations exposed. D2 sets sensible defaults to each layout engine without any input, so this is meant to be an advanced feature for users who want that extra control.

Happy new years!

Features 🚀

• Tooltips can be set on shapes. See https://d2lang.com/tour/interactive. #548
• Links can be set on shapes. See https://d2lang.com/tour/interactive. #548
• The width and height attributes are no longer restricted to images and can be applied to non-container shapes. #498
• Layout engine options are exposed and configurable. See individual layout pages on https://d2lang.com/tour/layouts for list of configurations. #563

Improvements 🧹

• Watch mode renders fit to screen. #560

Bugfixes ⛑️

• Fixes rendering class and table with empty headers. #498
• Fixes rendering of sql_table with no columns. #553
• Diagram bounding boxes account for stroke widths. #574
• Restricts where near key constant values can be used, with good error messages, instead of erroring (e.g. setting near: top-center on a container would cause bad layouts or error). #538
• Fixes panic when images with empty labels are rendered with ELK. #555

Breaking changes

• For usages of D2 as a library, d2dagrelayout.Layout and d2elklayout.Layout now accept a third parameter for options. If you would like to keep the defaults, please change your code to call dagrelayout.DefaultLayout and d2elklayout.DefaultLayout respectively.

v0.1.3

Many have asked how to get the diagram to look like the one on D2's cheat sheet. With this release, now you can! See https://d2lang.com/tour/sketch for more.

The Slack app for D2 has now hit production, so if you're looking for the quickest way to express a visual model without interrupting the conversation flow, go to http://d2lang.com/tour/slack to install.

Hope everyone is enjoying the holidays this week!

Features 🚀

• sketch flag renders the diagram to look like it was sketched by hand. #492
• near now takes constants like top-center, particularly useful for diagram titles. See docs for more. #525

Improvements 🧹

• Improved label placements for shapes with images and icons to avoid overlapping labels. #474
• Themes are applied to sql_table and class shapes. #521
• class shapes use monospaced font. #521
• Sequence diagram edge group labels have more reasonable padding. #512
• ELK layout engine preserves order of nodes. #282
• Non-markdown text (shape: text without language block) works with bold, italic, underline, and font-size. #528
• Markdown headings set font-family explicitly, so that external stylesheets with more specific targeting don't override it. #525

Bugfixes ⛑️

• d2 fmt only rewrites if it has changes, instead of always rewriting. #470
• Text no longer overflows in sql_table shapes. #458
• ELK connection labels are now given the appropriate dimensions. #483
• Dagre connection lengths make room for longer labels. #484
• Icons with query parameters are escaped to valid SVG XML. #438
• Connections at the boundaries no longer get part of its stroke clipped. #493
• Fixes edge case where style being defined in same scope as sql_table causes compiler to skip compiling sql_table. #506
• Fixes panic passing a non-string value to constraint. #248
• Fixes edge case where the key null was compiling wrongly. #507

v0.1.2

D2 now has an official playground site: https://play.d2lang.com. It loads and runs fast, works on all the major browsers and has been tested on desktop and mobile on a variety of devices. It's the easiest way to get started with D2 and share diagrams. The playground is all open source (https://github.com/terrastruct/d2-playground). We'd love to hear your feedback and feature requests.

Windows users, the install experience just got a whole lot better. Making D2 accessible and easy to use continues to be a priority for us. With this release, we added an MSI installer for Windows, so that installs are just a few clicks. An official Docker image has also been added.

Features 🚀

• Diagram padding can be configured in the CLI (default 100px). #431
• Connection label backgrounds can be set with the style.fill keyword. #452
• Adds official Docker image. See ./docs/INSTALL.md#docker. #76
• Adds .msi installer for convenient installation on Windows. #379

Improvements 🧹

• d2 fmt preserves leading comment spacing. #400
• stroke and fill keywords work for Markdown text. #460
• PNG export resolution increased by 2x to not be blurry exporting on retina displays. #445

Bugfixes ⛑️

• Fixes crash when sequence diagrams has no messages. #427
• Fixes constraint keyword setting label. #415
• Fixes serialization affecting binary plugins (TALA). #426
• Fixes connections in ELK layouts not going all the way to shape borders. #459
• Fixes a connection rendering bug that could happen in Firefox when there were no connection labels. #453
• Fixes a crash when external connection IDs were prefixes of a sequence diagram ID. #462

v0.1.1

Improvements 🧹

• The Windows release binary is now suffixed correctly with .exe #388

Bugfixes ⛑️

• Fixed sequence diagram span size for self-edges #397

v0.1.0

When we launched D2 to open-source 2 weeks ago, we left the sprint after it a completely blank slate. Because, while we do have long-term goals, we wanted to make the first post-launch update focused 100% on addressing the biggest pain points that came up. Thank you so much to everyone who asked for or complained about something. Every item in this release was something that was posted on the D2 Discord, a GitHub issue/discussion, a comment on social media, or an email.

On top of the listed changes to core D2, we have been building out integrations, starting with Obsidian. Work has also begun on the API and Playground.

If you want a fast way to check out what a change looks like, we put screenshots in the PRs when it's a visual change.

Features 🚀

• Windows support has landed! See ./docs/INSTALL.md for usage instructions. #96

• Sequence diagrams are now supported, experimentally. See docs. #99
• Formatting of d2 scripts is supported on the CLI with the fmt subcommand. See man d2 or d2 --help. #292
• Latex is now supported. See docs for how to use. #229
• direction keyword is now supported to specify up, down, right, left layouts. See docs for more.
  #251
• Self-referencing connections are now valid. E.g. x -> x. Render will vary based on layout engine. #273
• Arrowhead labels are now supported. #182
• Support for stroke-dash on shapes. #188
• Support for font-color on shapes and connections. #215
• Support for font-size on shapes and connections. #250
• HTML IDs are now added in the SVG output. You can use this to query shapes and connections by ID post-render. #218
• -b/--bundle flag to d2 bundles all image assets directly as base64 data urls. #278
• install.sh now accepts -d as an alias for --dry-run. #266

Improvements 🧹

• Local images can now be used for values to the icon keyword, e.g. icon: ./my_img.png. #146
• Connection labels no longer overlap other connections. #332
• ELK layout engine now defaults to top-down to be consistent with dagre. #251
• Container default font styling is no longer bold. Everything used to look too bold. #358
• BROWSER=0 will disable opening a browser on --watch. #311
• install.sh prints the dry run message more visibly. #266
• d2 now lives in the root folder of the repository instead of as a subcommand. So you can now run go install oss.terrastruct.com/d2@latest to install from source. #290
• install.sh defaults to installation to /usr/local as before but now if /usr/local is not accessible to the current user, it will use ~/.local instead of prompting for sudo. You can pass --prefix /usr/local to force installation into /usr/local with a prompt for sudo. #372

Bugfixes ⛑️

• 3D style was missing border and other styles for its top and right faces. #187
• System dark mode was incorrectly applying to Markdown in renders. #159
• Fixes Markdown newlines created with a trailing double space or backslash. #214
• Fixes images not loading in PNG exports. #224
• Fixes label and icon overlapping each other in dagre and ELK layouts. #343
• No longer log benign file-watching errors. #293
• $BROWSER now works to open a custom browser correctly. For example, to open Firefox on macOS: BROWSER='open -a Firefox' #311
• Fixes numbered IDs being wrongly positioned in dagre #321.

v0.0.13

Features 🚀

• Ability to export to PNG.

Improvements 🔧

• There is now equivalency between CLI flags and environment variables. For any option,
  you can set either the flag or its equivalent environment variable (flags take
  precedence). See d2 --help for more.
• Install script now uses brew for macOS machines with brew installed.

Bugfixes 🔴

• Labels for Image shapes in dagre and ELK are now placed above the shape, to not overlap
  with the actual image.