8 ms·
D2 (text to diagram tool) now supports ASCII renders
- HeartofCPU 1y agoLove it
- robertlagrant 1y agoThis looks cool. And I saw the previous post you got C4 support! I'm just about to do some C4 things; I'll check it out.
- alixanderwang 1y agoHello fellow devs. Just wanted to share a new feature we added this morning, though it's very alpha stage (already someone's filed a github issue for it hah) If you want to skip the blog post and poke around directly: https://play.d2lang.com/?script=qlDQtVOotFLIyFTwSEzOTi1S8EstL-YCBAAA__8%3D&ascii=1& https://play.d2lang.com/?script=qlDQtVOotFLIyFTwSEzOTi1S8Est... For a bigger example: https://play.d2lang.com/?script=rJJBjtswDEX3OgWBrm2kzU4FeoruC8JibSG0KIj0pMHAdy9kW00yU2A2s6RI_8__6Bcs6uHVAYRv3SDpdxz3EoDxJot1lMaYyAPxZXv-Aj-pzDEhg000EwwSaOtsZReDh_Pp5ABWt7pEdpVy2TUHYgaTK5XmoWjEHI20vQDohJk8qEmh8CugYWvYjamfF7aYmTxYWXbj1e3-BZPO0YyKe6MO3Y_HtgelFD5xZttAEsdEkKUYcsuzRA-vR6SJ_uAoaW0f1GyQiwykKncmJgVHegdkuHFMgcrHNA75O-7-Yeca4dm4_-eYJ0kELKO61blF26GODTIVleQArjHY5OHr-dTmqupx6_7xzDNeCAZkfjf1RKuvmHCo--yGWzi1IhfqAurk4VytMEdQKi8fSYWomfH2Zr4G21NENbdX7TYZR_r-X6ira39x_8ytSt4N3N8AAAD__w%3D%3D&ascii=1& https://play.d2lang.com/?script=rJJBjtswDEX3OgWBrm2kzU4Feoru...
- rng-concern 1y agoI thought your playground wasn't working as it renders black text on black background. Maybe I have darkmode enabled or something. Other renderers work, but ascii is invisible.
- alixanderwang 1y agoAh right, forgot to test the update with dark mode. Thanks for letting me know! edit: fixed
- mmastrac 1y agoDoes the SVG renderer support custom IDs and/or attributes on nodes? If so I'll add support for this to Stylus (https://github.com/mmastrac/stylus https://github.com/mmastrac/stylus)
- alixanderwang 1y agoYeah I think what you're looking for is the note at the end of this section: https://d2lang.com/tour/exports/#svg https://d2lang.com/tour/exports/#svg Feel free to make a PR to d2/d2-docs to include it in our list of community tools/plugins if you do!
- aidenn0 1y agoSo from TFA it just downscales from ELK? Do I have to specify ELK for this to work, or will it automagically enable if I try to output a .txt? (Really I'm just curious becasue I use ELK already for most of my d2 diagrams).
- alixanderwang 1y agoIt switches to ELK: https://github.com/terrastruct/d2/blob/master/d2cli/main.go#L482 https://github.com/terrastruct/d2/blob/master/d2cli/main.go#...
- hiyer 1y agoJust wanted to thank you for a great tool :-). I love d2 and ever since I discovered it a couple of years back I've been using it for all my diagramming needs. Thanks again and keep up the good work!
- reactordev 1y agoThe vim extension is such a flex...
- Graziano_M 1y agoYeah, but weird/unfortunate that it's written in vimscript.
- gsinclair 1y agoHow on earth can it be weird that a vim extension is written in vimscript?!
- stavros 1y agoWell imagine a Java extension being written in Javascript...
- groutlloyd 1y agoIt's rad man, someone should do this.
- cess11 1y agoDon't have to imagine, it's been a thing since Java 8. https://www.baeldung.com/java-nashorn https://www.baeldung.com/java-nashorn
- reactordev 1y agoSunsetted in Java 14. Now it’s Graal.
- Graziano_M 1y agoVim is basically dead. Most new plugins are written in Lue (for Neovim). I don’t like Lue much but it’s 1000x better than vim script. I occasionally tweak my Neovim plugins but don’t bother with those written in Vimscript.
- eric-p7 1y agoNot to be confused with The D Programming Language, which has a similar domain (dlang.org), and is currently on version 2.
- masfoobar 1y agoI will admit, I thought this was originally about D lang - I am still glad I clicked as I also have an interest in text-based diagrams. I dont really using Dlang now - but still interested in the language. This click was a win-win either way!
- jillesvangurp 1y agoLlm to text to diagram is the killer workflow these days. The key challenge is making these things presentable. Optimizing them for human editability is a secondary concern at this point. This is where a lot of these tools fall apart.
- billyp-rva 1y ago> Llm to text to diagram is the killer workflow these days. It's useful, but I think only marginally. When using a diagrams-as-code tool, having an LLM write it for you gets you up and running faster, but long term you have more control (and no hallucinations) just writing the code yourself. It'll probably be fewer keystrokes in the end. Doubly so if your diagrams-as-code tool has decent autocomplete.
- thejazzman 1y agoi think d2 looks sick , and i'm not op, but i do love just describing my system and telling the LLM to draw it. so having it "draw" d2 seems like a great new step? when you want to make changes, you update your docs/design and repeat. think system design interview but you skip drawing it yourself at all and then sanity check your own work by interpreting the resulting graph etc
- justonceokay 1y agoI use LLM to tell my children bedtime stories and to wish my wife goodnight. Saves me a lot of time and energy
- bxpn77 1y agoSuper cool!
- sidewndr46 1y agoDoes this mean a quine is possible?
- cluckindan 1y agoYes, but the only one I found on the playground is all newlines and spaces. In escaped form: \x20\n\x20\n\x20\n\n
- smusamashah 1y agoI maintain a list of browser based text to diagram tools (which I have shared a number of times here). I recently realised that the online version of D2 does NOT work solely in browser, diagram's are generated by backend servers. Can D2 work in browser by itself? Does the extension mentioned in the post work offline? (lots of tools do)
- alixanderwang 1y agoIt does now! (As of a week ago) Check out the network tab in the d2 playground. It's powered by d2.js, a wrapper around a wasm port of d2, which we've recently been working on. Not super officially ready yet but soon to be, and will be a separate announcement.
- troyvit 1y agoThis is awesome news! Thank you for the excellent tool. Getting it hosted places has been my biggest pain point.
- rendall 1y ago~~May I see that list, please?~~ Edit: found it! Thanks.
- cess11 1y agoClearly things have changed a bit recently but since a long time I use D2 exclusively locally. The binary has a watch mode that starts a web server and pushes changes on save so you can interactively develop your diagrams and e.g. share the web browser over a video conference or such. I don't know about that Mermaid thing others are talking about in the thread so I can't compare but D2 is very easy to learn the basics of and get started with. Like a few minutes from install to your first diagram kind of easy.
- jiehong 1y agoI’ve been using d2 for sequences diagrams or migration diagrams and I like it! This new feature is interesting!
- tombert 1y agoThis is awesome. I hadn't heard of D2, but I love the idea that I can create my charts directly in Neovim in the terminal to get a rough draft, and do a final render with a pretty picture. I will be playing with this shortly.
- mtillman 1y agoI typically use Moondraw for ASCII diagrams but this is pretty great for when you're already in Vim.
- aidenn0 1y agoD2 already supports a live-updating HTTP server serving a live-updating .svg, so if you tile a browser with vim, you can already get live-updates. I discovered D2 about a year ago, and I use it for all of my diagrams now.
- tombert 1y agoYeah but that doesn't feel nearly as nerdy and cool :) There's a sort of elegance to ASCII rendering.
- CuriouslyC 1y agoThis will be super helpful for saving context feeding architecture diagrams to LLMs.
- mielebauknecht 1y agowow! Now d2 is turned into something that is acually useful!
- heliophobicdude 1y agoThis looks way better than mermaid. Is there support for this in GitHub PR code blocks like mermaid?
- baby_souffle 1y agoNo, sadly. That's still the biggest obstacle for a lot of my documentation. I push mermaid perhaps a little farther than it wants to go just so I don't have to spend the time setting up a CI pipe to compile the D2 into a PNG which is embedded in the documentation.
- alixanderwang 1y agoUnfortunately not, I've tried reaching out to GH folks but no dice. However it should be noted that d2.js, which enables client-side renders, didn't really become usable until this month and still isn't really officially released (kind of hidden). So, we'll see if the official release (soon™) changes things. If any D2-enjoyers reading this knows anyone on the GH frontend team, plz bend their ear =)
- Myrmornis 1y agoGood luck, it would be fantastic if you can get it accepted as a mermaid alternative; it's much, much niceer than mermaid, both the visual result, and the language. I've used D2 heavily for a couple of years or so now. It's really fantastic. I hope you're paid product is healthy. Sequence diagrams are my most common diagram type by some way I think. And I seem to always use the sketch rendering over the last year. While you're here, can I mention a feature request? I'd like to be able to put clickable hyperlinks into sequence diagram arrow labels (e.g. so I can link the message to where in the code it occurs). Also, I'd like more control over vertical spacing in sequence diagrams, and perhaps the ability to define groups of columns (just visually grouped).
- alixanderwang 1y ago<3 The linking you can do already if I understand the request correctly: https://play.d2lang.com/?script=Ks5ILEi1UihOLSxNzUtOjU_JTEwvSszlqlDQtVOotFJIz89Pz0lVqOZSUMjJzMu2UsgoKSkottLXh0joJefnctVyAQIAAP__& https://play.d2lang.com/?script=Ks5ILEi1UihOLSxNzUtOjU_JTEwv... Okay, we'll put those sequence diagram improvements in our sprint for next release.
- lidavidm 1y agoI always liked D2 more than mermaid, except IMO, this makes grid layouts essentially useless: https://github.com/terrastruct/d2/issues/1164 https://github.com/terrastruct/d2/issues/1164 Having to figure out the exact pixel widths defeats the point of these tools, at least for me.
- alixanderwang 1y agoThanks! Good to know, we'll slot this for 0.7.2 (next release)
- lidavidm 1y agoOh that is awesome! I would really appreciate it! Could you also get d2 into GitHub and Notion while you have it here :)
- arunc 1y agoConversion from ASCII is nice. How do we get the original D2 source if there's a need to update the diagram?!
- peroids 1y agoCan you please establish an official python repository? I’ve been wanting to use this in notebooks but am forced to use databricks
- hiAndrewQuinn 1y agoOh, this is excellent! The syntax of D2 is very compelling but the tooling of Mermaid has unfortunately made it win out for me more times than not in the last few years. This, however, is a genuinely novel thing that I don't think I've seen Mermaid do. Bridges the gap to https://asciiflow.com/ https://asciiflow.com/ quite nicely.
- scrubs 1y agoTalk about awesome. This is awesome. I'm gonna use it. Super cool.
- fzeindl 1y ago1. how does this add value over mermaid? I like how it looks and works, but is there any real reason to switch over. 2. in my opinion, what all these tools are missing is the ability to add a manual „corrective“ layer, meaning to be able to adjust the automatically created output by moving and resizing boxes by a certain x/y amount.
- alixanderwang 1y ago1. It depends on what you value =). For some, those 2 you mentioned are enough. For others, it can be something like the our CLI doesn't require a chromium browser to render SVGs (https://news.ycombinator.com/item?id=31275754 https://news.ycombinator.com/item?id=31275754). It doesn't cover every difference, but we made a little comparison site if it helps: https://text-to-diagram.com https://text-to-diagram.com 2. I'm not trying to advertise our paid product in this post about the open source product, but since you mentioned it, we make an IDE that adds the ability to lock in positions and dimensions: https://docs.terrastruct.com/tour/freehand https://docs.terrastruct.com/tour/freehand
- cpmsmith 1y agoBy the way, it looks like the MermaidJS implementation of the WiiU example is broken due to subgraphs not creating namespaces. That is, the `rom` node in the `amd` subgraph is overwriting the one in the `ibm` subgraph.
- alixanderwang 1y agoThank you, made an issue: https://github.com/terrastruct/text-to-diagram-site/issues/63 https://github.com/terrastruct/text-to-diagram-site/issues/6...
- Myrmornis 1y agoIt's a diagramming tool > I like how it looks and works Those are "real reasons".
- arkh 1y ago
- masfoobar 1y agoI dont think I've come across this one. I have experimented with other text-based diagrams - but this certainly looks interesting. While I am always forced (at workplace) to use a GUI-based diagram like Visio... I see more merit to this one. Definitely worth a play with my home-based or own business setups.
- masfoobar 1y agoFurther update -- I see an emacs plugin. :-) I am happy. Something to play with tonight.
- jhoechtl 1y agoUsing it - better: used it. It's outdated, doesn't understand key words of recent D2 - versions and doesn't integrate well with emacs, i.e. default key bindings are IMHO not very emacsish.
- masfoobar 1y agoThanks for the heads up.
- alixanderwang 1y agoYeah that one's a community plugin vs an officially maintained one, which can have a range of activity from graveyard to some being maintained better than many of our official ones. That maintainer seems active on GitHub though and the d2-emacs plugin is his top pinned repo (https://github.com/andorsk https://github.com/andorsk), I think he'd be receptive if you let him know your interest!
- mwexler 1y agoI appreciated the link to this helpful comparison site: https://text-to-diagram.com/ https://text-to-diagram.com/