v0.2.3

Diagrams that link between objects and the source they represent are much more integrated into your overall documentation than standalone diagrams. This release brings the linking feature to PDFs! Try clicking on "GitHub" object in the following PDF:

linked.pdf

Code blocks now adapt to dark mode:

Welcome new contributor @donglixiaoche , who helps D2 support border-radius on connections!

Features 🚀

• PDF exports support linking #891, #966
• border-radius is supported on connections (ELK and TALA only, since dagre uses curves). #913

Improvements 🧹

• Code blocks adapt to dark mode #971
• SVGs are fit to top left by default to avoid issues with zooming. #954
• Person shapes have labels below them and don't need to expand as much. #960

Bugfixes ⛑️

• Fixes a regression where PNG backgrounds could be cut off in the appendix. #941
• Fixes zooming not working in watch mode. #944
• Fixes insufficient vertical padding in dagre with direction: right/left. #973

v0.2.2

style keywords now apply at the root level, letting you style the diagram background and frame like so:

playground link

(also showcases a little 3d hexagon, newly supported thanks to our newest contributor @JettChenT !)

PDF is also now supported as an export format:

demo.pdf

Features 🚀

• PDF exports. See docs. #120
• Diagram background and frame can be added and styled. See docs. #910
• 3d works on hexagon shapes. #869
• The arm64 docker container supports rendering diagrams to PNGs. #917

Improvements 🧹

• near key set to sequence diagram children get an appropriate error message. #899
• class and sql_table shape respect font-color styling as header font color. #899
• SVG fits to screen by default in both watch mode and as a standalone SVG (this time with just CSS, no JS). #725
• Only chromium is installed when rendering png diagrams instead of also installing webkit and firefox. #835
• Multiboard output is now self-contained and less confusing. See #923

Bugfixes ⛑️

• Error reported when no actors are declared in sequence diagram. #886
• Fixes img bundling on image shapes. #889
• class shape as sequence diagram actors had wrong colors. #899
• Fixes regression in last release where some hex codes were not working. #922

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