Create Diagrams in VS Code with Draw.io | Hacker News Reader

Create Diagrams in VS Code with Draw.io

github.com

643 pointssharjeelsayed119 comments

There are also plugins for graphviz, which is a more structured language. I use it for documenting states in my code, e.g. https://marketplace.visualstudio.com/items?itemName=tintinwe... and https://marketplace.visualstudio.com/items?itemName=joaompin.... Since graphviz is old, there are also command line tools to render the output.

For more information about graphviz: https://graphviz.org/

I use asciidoc extension by the same author. It works well with kroki.io so you can do a wide variety of diagrams (including graphviz, plant uml and others)

https://github.com/asciidoctor/asciidoctor-vscode/blob/maste...

How do the both of you make graphviz diagrams look decent?

I often resign myself to using it for generating the first structure, and then laying it out better in an svg editor. Of course that way I lose some of the maintainability of it.

Yeah really looking for a tool that produces output as nice as e.g. Dat documentation diagrams

You're looking for a human illustrator, then. :D

Seconded.

I had to brush off Graphviz today; I dumped a dependency graph from CMake into a series of dot diagrams, and now I'm trying to figure out how to force the SVG generated by dot to space itself out - by default, the edges are so densely packed that you can't see anything on the diagram :/.

Why is it that on HN when somebody posts a link to a cool project, the top comment is systematically something like "here's an alternative"? Can we just talk about the posted link instead of just stealing the light?

Personally I think this isn't a good way to look at it. Nothing exists in a void and to contextualize things, it's often useful to compare it to other similar things. In the startup world, it's often explained in the vein of "Uber for X" type of companies. Since Graphviz is one of the oldest and most widely used pieces of software in this space it makes sense to compare any new developments against it.

Oh don't get me wrong, comparisons are good. This is not a comparison though, it's a redirection, and this is very rude.

It seems more like a comparison to me, although not a very objective one.

I disagree.

Either the OP shared because they found a useful tool and wanted others to be able to know too, in which case sharing another related tool is in the spirit of what OP intended.

Or, OP wanted to use HN as a sales platform to pitch their work. In this case, sorry pal but HN is not your personal marketing megaphone. You want to put something out into the public here, you should expect it to be scrutinized and compared against alternatives. IMO, HN as a platform should put readers first, not authors.

Edit: Just want to add that in this particular case, I think both the draw.io and graph viz plugins are awesome. Love to see these kinds of tools.

On the contrary, if you are looking for ‘diagrams as code’ you likely don’t mean postscript, SVG, or XML of arbitrary lines and shapes.

You likely mean something structured and readable, like ‘literate diagramming’.

The top comment’s first phrase explained that rationale.

What is rude in this thread is your attempt to deny relevant information from these interested in diagram tools.

When I open threads like these I am mostly interested in:

- Interesting features that this tool has

- Experiences from the developers of this and similar tools

- Alternatives as well as their pros/cons

Meanwhile you want to deny that experience from me in order to not hurt something as irrelevant as the OPs pride.

I'd say that's one of the top reasons I like HN, as you can see what other people are using. Most of the time when I search the web for comparison between x and y, I find little useful info.

Isn't that a good thing? If a thing does X, I'd very much like to know what other things do X as well to try and understand how they differ.

Does the comment above give you any insight of how they differ? That would be useful, but it's not the case

Yes it does. I often use draw.io. I've heard of graphviz but never looked into it. I found the original comment very useful because now I know:

- draw.io and graphviz have similar use cases (otherwise it wouldn't have been mentioned)

- Both have VS code plugins

- graphviz is a more structured language

- graphviz is more mature

- graphviz can be used from command line

Theoretically, drawio can be used from command line too! (it involves puppeteer though)

> instead of just stealing the light?

because HN isn't a place to merely advertise a product to gain traction and marketing. These alternatives and comments on other competitors shed light on the entire eco system, and prevent astroturfing as well as group think. It may even widen somebody's lack of knowledge.

HN isn't a place to merely advertise a product to gain traction and marketing

Today I learned.

Congratulations! Now you'll enjoy HN more!

There's nuance in that. HN is absolutely a mere marketing channel for (current) YC companies. The irony.

The irony.

Is it, though? I feel like lately you could ask five different people what HN “is” and get ten different answers.

Just ask dang :) Oh btw I meant YC founders don't use HN other than for marketing..

This can only serve as a service. I see no way this is a bad thing.

I'd rather read about someone's experience with the tool mentioned. If they prefer something else, I hope they share that and why. The graphviz thing in particular feels like someone who has an interest in the future of graphviz hijacks any alternative to say that graphviz exists.

That’s not a comparison. Two different purposes for these tools. I use graphviz and I’m glad there is also support for it

I, for one, find them useful. Part of the discussion about a tool is also being aware and potentially discuss alternatives.

Agreed. I’ve always found it rude and demeaning.

I clicked through on the comments to this because I'm looking for something similar to Draw.io and now I know about Graphviz as well. Once again, serendipity provides.

Even if a particular project isn't that interesting to me, the landscape surrounding the project may be. The community here provides some context for the world this project lives in and that's pretty valuable, IMHO.

I can't say I agree with you 100%, but I see your point. That is part of the reason I don't stop at the top comment. There's usually a lot of good information further down as well.

The draw.io desktop app [0] also a CLI for output rendering.

[0] https://github.com/jgraph/drawio-desktop

Graphviz has been the old standby forever. I had an internship in 1999 where my mentor used graphviz to debug the compiler he was working on. Everyone should have this tool in their debugging tricks library.

I'm actually doing the same thing right now. I had been using a textual output to make sure my AST was correct, but that is a real pain. Graphviz made it extremely easy it is so much easier to read.

Could you expand on the graphviz use in dbg context (or ref it)?

Is it to draw the call graph? How it's actualy done, with printfs or some lib?

I use it with kcachegrind for profiling, the source being output from xdebug.

https://xdebug.org/docs/profiler

http://kcachegrind.sourceforge.net/html/Home.html

You can use it for whatever you want. Instead of dumping text to a log file, you can dump out graph nodes and connection info to a dot file instead, to then be laid out and rendered into a graph by dotty or whatever else you want to use. It doesn’t require any extra libraries.

I googled for "dotty" mentioned downthread (didn't know about this tool) and found this PDF:

https://www.graphviz.org/pdf/dottyguide.pdf.

Section 3.2.2 ldbx, on page 19, (21 in PDF), gives an example of using graphs for debugging a C application.

Is that a 721 token in there? :blush:

I think this extension demonstrates the flexibility of VSCode and how easy it can be to extend the platform with an extension.

Although it's supported by Microsoft, it's heavily influenced by the Open-Source community. I believe that's the reason it's so popular and user-friendly for both developers and users.

Can you imagine someone trying to implement this extension on a proprietary platform like Visual Studio or IntelliJ? ... going through proprietary documentation with no access of the Source-Code to the underlying system... It would be a nightmare

But IntelliJ is open source?

https://github.com/JetBrains/intellij-community

Does Community Edition have all features?

It does have almost all the features of VSCode and more. The features of ultimate are far ahead of what VSCode offers, like showing where a particular dependency is injected from in Guice or Spring.

unfortunately, the API and such for creating an intellij plugin (and creating it well!) is much more difficult than a VScode plugin.

And the structure of VSCode probably makes it easier to write standard code that doesn't perform poorly (it's a browser after all).

Yup, but that is the same as how VSCode makes extending itself more difficult than emacs, but is more full featured and requires less tweaking. They lie on different points of the continuum.

In fairness, Visual Studio has all of the features of VSCode and many more out of the box too - however, I find myself ducking into VSCode for it's better UI/UX - e.g. JSON/XML formatting, Git source control, code colouring and theming etc.

Visual Studio is not open source. The community edition has T&C unlike IntelliJ community edition. Also IIRC asks you to login with a Microsoft account for sustained usage.

And it is still not good as the equivalent Jetbrains products. Jetbrains products have almost no restrictions either in the free version or in the personally paid versions as far as I remember.

IntelliJ also has a very good git support story, and I find myself using less and less cli git for anything from rebase to selectively staging certain chunks of code.

The main missing feature, and the one that enables rich integrations, is a webview.

No, but you don't need all the features to implement an extension. It's just that developers are cheap.

IMO it's the best side of Microsoft. It's something Apple would never do because the result might be too unpredictable and messy.

apple has plenty of messy approaches though. they simply aren't interested in creating anything that will itself run or allow creation of anything that is intended to be used outside of their devices and ecosystem.

They do some major contributions to Clang/LLVM, which is the fondation of many non-Mac programs.

WebKit doesn’t count? Google, BlackBerry, Amazon, Opera, Tizen, etc all maintain different derivations based off of Apple’s work with WebKit, with the most well known being Google Chrome.

(Although I’ll grant that WebKit itself is a fork of KHTML from the KDE project).

WebKit doesn't have nearly the same amount of community engagement as VS Code does probably because it's a piece of infrastructure code rather than user-facing software.

Where is WebKit source and issue management anyway? It's not on GitHub. I don't imagine Apple providing very well for people, who ask for endless options on a product like VS Code.

I suppose the open source Swift language might be comparable, but I don't think it's anywhere in the same league as VS Code regarding the number of users.

I believe WebKit source and issue management is on webkit.org; not being on GitHub seems to make sense to me, as (according to Wikipedia) WebKit was released three years before GitHub was founded. This is the Apple release, not KHTML existing (which was another seven years before that).

In theory, for a big system like intellij or VS you want to use the docs over the source code; both are projects with millions of LOC, at which point reading the code to write an extension becomes unfeasible.

That said, I do really enjoy being able to go to the source for libraries I use, recently in Go. What helps with that is that the code is consistent and readable no matter what project I open up.

> In theory, for a big system like intellij or VS you want to use the docs over the source code

Sadly for IntelliJ the documentation is lacking. There is some very general documentation online but they do not publish a generated API documentation, so as an extension developer you are often in the dark trying to figure out what classes / methods to use, unless you learn how to compile the documentation yourself.

Had the same experience while working on an extension. Looking at their forum and extensions with similar features you want to implement is the way to go. IntelliJ's documentation is very superficial and lacking.

Not to knock VS Code, but I suspect this has more to do with draw.io Desktop[0] and VS Code both being JS/electron apps and draw.io officially supporting an embedded mode[1]. IIRC, most of IntelliJ is open source but it is probably much harder to embed a JS app in a Java app.

[0] https://github.com/jgraph/drawio-desktop

[1] https://github.com/jgraph/drawio-integration

it really shines when apps open their internals via a web-like API to allow embedding.

I wish more apps have such extensibility, so that it's easy to embed apps within, and that apps be made more modular so that they can be embedded.

Microsoft had the same vision with their COM architecture, which allowed apps to be embedded inside other apps. But sadly it's too complicated, and difficult to really use (so you won't have seen much other than microsoft's own apps using such features to embed other microsoft apps).

And the web would've been a great API/protocol level for an app to be embedded via such a way, but a lot of apps dislike being framed/embedded.

> Although it's supported by Microsoft, it's heavily influenced by the Open-Source community.

Isn't it developed by an external studio in switzerland which just happend to be attatched with microsoft? I always got the impression this independance from the old Redmond-Cancer is a main reason why it could propsper so well.

By which I mean that in Redmond there seems to be some gangwars going on between the different departments, projects and generations of developers, which in external Studios seems to mostly non-existent. There was also that studio in israel which seem to propser quite well. Maybe Microsoft is accidently a perfect example for diversity in culture working out beneficial with software-projects?

The project has an embed mode, which was used in this case.

It needs a sequence embed, but basically you load draw in embed mode within an iFrame, do a handshake using postMessage, then load and save is direct between parent and frame, again using postMessage.

The idea is to be able to embed into hosts that are capable of storing the diagram data, without any code changes to draw. It can embed either the main site (which was renamed to app.diagrams.net), or a locally hosted/internally packaged version of the project.

Additional information on the embed format:

https://github.com/jgraph/drawio-integration

https://desk.draw.io/support/solutions/articles/16000042544-...

This embeds an offline version of draw.io; I hadn't previously realised that this site is open source: https://github.com/jgraph/drawio

Very neat!

Yes I've been using it offline with the electron app and on my phone as an offline website. It works really well that way. The advantage of the electron version is that for local files, it doesn't ask Everytime you want to save, where to save and if you want to overwrite, or save in downloads depending on browser settings.

I've been looking at draw.io and PlantUML - what has worked well for others? draw.io is much easier to get into, but I can see declarative diagrams making maintenance easier for long-lived docs.

Being a person who doesn't typically want to draw diagrams, I opted to go with draw.io as it looked very simple and easy. However, I was nudged to try PlantUML and to my surprise it was a lot simpler and faster to create diagrams. A point which you mentioned is maintaining the diagrams for long-term. We have a docs folder in our repository which includes all our PlantUML. It's quite easy to pick up as a language, and because it generates the diagrams for you, you don't waste minutes fiddling with getting the arrows all matched up. I would definitely give it a try - makes life so much easier!

Plus, there is a VS Code extension for it as well, which auto generates the diagrams when you save.

Great to hear your experiences. I've played with the VS Code extension and even run PlantUML server locally in Docker which worked very well.

Do you create actual UML diagrams or just use the shapes and constructs available in PlantUML to create a more ad-hoc diagrams?

> waste minutes fiddling with getting the arrows all matched up

I can resonate with this!

This [1] is the extension in question. I combine it with the extension template [2] for the C4 model [3] for easy architecture diagrams.

[1] https://marketplace.visualstudio.com/items?itemName=jebbs.pl...

[2] https://github.com/RicardoNiepel/C4-PlantUML

[3] https://c4model.com/

After having used both Draw.io and PlantUML, I prefer the latter. Far easier to get consistent drawings from the whole team without fiddling. And updating the drawings later is also easier because the language is much better than Draw.io's XML.

I prefer PlantUML when possible as it allows me to version control my diagrams effectively.

However sometimes PlantUML does not lay things out optimally (for a person) and the layout can only be tweaked so much.

That being said, for most of my purposes non-optimally laid out PlantUML diagrams were effective enough for the communication I needed to get through.

Similar (but not that fully featured) is the mermaid preview extension : https://marketplace.visualstudio.com/items?itemName=bierner....

mermaid js website : https://mermaidjs.github.io/#/

If we could get an extension like this for every file type VS Code could basically become your OS (desktop environment) or file manager at the very least.

A better OS with beautiful lisp language already exists called emacs (which happens to be an excellent text editor as well), try it. VSCode is built on a foundation of electron which is riding on chrome v8 engine. If one day webassembly becomes common and vscode can shed it’s weight and become close to 50-60% of what emacs is, then it might be possible to think of it as OS, right now it looks 2-3 decades behind emacs.

It’s only popular among programmers who wants an IDE not a programmable environment like emacs. Emacs attract scientists and researchers and people who write OS, compilers, DB, language specs, HPC systems and algorithms, design algorithms, performant OS utilities etc. VSCode attract web development crowd which mostly spend time on building web forms (making it dynamic using JavaScript with some framework may be react) on top of database schema or some document storage. Given this I doubt it will be anywhere as programmable as emacs.

VSCode is literally the only electron that doesn't bother me because it doesn't chew memory like Chrome, Slack, or every other electron app I've ever tried.

MS has done an amazing job optimizing VSCode.

Yes they have architected it so well that it performs amazingly well. The plugin architecture is well done too. The memory consumption goes up only when the plugins consume more memory as all of them run in separate processes. In the future, I'm thinking that they might start to replace parts of the app with WASM and make it even more performant. But I'm pretty sure it's not going to be the entire application.

Nevertheless, they have a somewhat easy path to migrate in the form of AssemblyScript which is a subset of Typescript that compiles to webassembly. The future of VScode is exciting!!

One of the performance details noted in the last update's release notes was that RegEx library specifically used by the syntax highlighting engine was a native dependency on desktop and a slightly slower WASM dependency on the web, and they improved the WASM bindings enough specifically for the syntax highlighter that now all platforms are using the custom WASM build.

Performance details in the release notes are really interesting to follow.

can you please give a link to the PR? I cant find it

https://code.visualstudio.com/updates/v1_45#_faster-syntax-h...

https://github.com/microsoft/vscode/pull/95958

Thanks a tonne!!

I am also an Emacs user, but please don’t be so dismissive of other people’s work. This looks like a great extension.

Despite my qualms about memory use and latency, VS Code is a fully programmable editor just like Emacs, except using Javascript in place of Lisp. I don’t see much of a difference, except that JavaScript is much more popular (and thus the VS Code ecosystem develops faster) and Electron is a much more modern runtime, which enables easier integration of visual tools.

I think rather than criticizing Code all the time, we should look and learn. Clearly, Code is doing a lot of things right. And it’s not just the web dev crowd. I have seen a lost of Rust folks go to either Code or IntelliJ.

No need for elitism. I'm sure there are scientists and researchers perfectly happy with Notepad++ and I've worked with web developers who've used emacs.

I agree that VSCode is unlikely to reach the level of emacs in terms of being a fully programmable environment. But what it does offer is an easy and modern out-of-the-box experience.

> Emacs attract scientists and researchers and people who write OS, compilers, DB, language specs, HPC systems and algorithms, design algorithms, performant OS utilities etc. VSCode attract web development crowd which mostly spend time on building web forms (making it dynamic using JavaScript with some framework may be react) on top of database schema or some document storage.

https://code.visualstudio.com/docs/languages/cpp

https://code.visualstudio.com/docs/languages/java

https://code.visualstudio.com/docs/languages/csharp

https://code.visualstudio.com/docs/languages/go

https://marketplace.visualstudio.com/items?itemName=rust-lan...

Yeah, about that. What do you think those extensions do? Do you think they all cross-compile to Javascript and plug into the famed C-bindings for React? :-D

VS Code is used for a lot of things these days.

Better OS is highly disputable. Emacs has point where can win against against VS Code, as also points where is lose. It all depends on your demand and usage.

> Given this I doubt it will be anywhere as programmable as emacs.

Customizing can be a curse. Seeking it purely for the sake of customizing is an harmful poison. VS Code has some areas for improvement, but it's good enough as it is now. It doesn't need to be as programmable as emacs.

It would be handy. I wonder if it is possible to create one that opens the file in your default OS way, and embeds that window inside a VSC tab. Can dream!

Why do you need a extension? Why can't vscode just launch the file type's editor app via standard OS integration?

I guess the main reason is so you can see your file explorer while working on a file. You could put your file manager side by side with whatever program you're using also I suppose.

This is so cool! I would love to see what kinds of people have used it for and built with this within VSCode.

That looks quite interesting. Can it detected embedded diagrams in PNG? I usually just save the PNG files, so I don't have to separately store the XML file.

Also just learned that Draw.io is migrating to Diagrams.net: https://www.diagrams.net/blog/move-diagrams-net

That's a planned feature!

Wow I didn't know about draw.io. That thing in itself is amazing.

This reminds me a bit of artists-mode in Emacs, though this has much nicer graphics.

Now if we could get this for Monodraw I would pay money for that

https://monodraw.helftone.com

Wow, nice! I've been using draw.io for a number of years now. It keeps getting better.

And this is frankly, amazing!

Question to author(s) - how can I support your development of draw.io?

In term of the core development team, we build and maintain the Confluence integrations commercially and those sales are around $10M this year.

If you wish to donate, maybe the author of this integration, Henning, has a route for that.

I would feel pretty bad accepting donations for this integration - compared to my other extensions, this one wasn't much work at all, thanks to the awesome embed mode of Draw.io!

Please note that the author of the extension (me) is not the author of draw.io, I just used their embed API ;)

I think you can support draw.io by spreading it or blogging about how to use their embed mode. You can also implement custom plugins.

If you want to support the development of this extension, feel free to ping me on github or twitter!

Is there a good list of web based tools that let you load/save locally or via cloud storage like draw.io does? diagrams.net is so cool!

VS Code is the new browser. Are there any extension for open a URL in a tab? A browser in a app in a browser!

Yes, and it’s pretty great.

https://marketplace.visualstudio.com/items?itemName=auchenbe...

wow, it's great. I'm using plantuml, but I will try this when looking for more flexibility.

I could see both working well when depending on the situation and audience. In my role I'm seeing a need for plain diagrams that need to be kept up-to-date and a "pretty" diagram for showing the bosses for 30 seconds in presentations.

Isn't this just opening the drawio editor in vscode? What's the point? (genuine question)

1. It uses the offline version, running locally.

2. The files are saved on my filesystem, which would be more of a hassle to keep in sync if I used the online version.

3. It slightly lowers the friction for me to work on a diagram, which completely changes how often I instinctively reach for a tool.

Plus that "embed in png" feature (assuming it is ever stable enough for release) looks genuinely useful for source controlling editable images that would appear automatically in something like README.md.

AFAIK you can do this with the official offline version too.

What's the point of embedding it in vscode especially?

See point 3.

The diagram can be part of documentation of the code in the the same working directory, possibly version controlled.

It is going to be very useful to be able to just edit the diagram within the same editor as the rest of the files in the same working directory. You just double click the file in VS Code, and it opens there.

I am looking forward for the completion of the PNG part so that it is even more seamless.

Looks cool. However I've created a .drawio file after installing (and reloading) and I do not see any diagram editor. It's just a blank space. Is there anything else I need to do? I installed via VSCode extension marketplace.

Can you file a bug report on github [1]? That would be awesome! Please mention your OS and your VS Code version. You should not do more than what you did and it's working for me.

[1] https://github.com/hediet/vscode-drawio/issues

Sorry, I'd rather not, since this is my alt and don't want to dox myself.

But I think I figured why: I installed it during remote development, and it does not appear to work on the remote host. After installing it locally, it works (for local files only, though).

Is it a known issue that it does not work as a remote extension? I do all my development remotely so it would be nice if that worked.

EDIT: Just saw https://github.com/hediet/vscode-drawio/issues/8 -- disabling offline mode does indeed make it work in remote development. Awesome! :) (Would be cool if you could somehow integrate File -> Export so that it could export directly to a file on the remote host)

I sleep and dream when VS Code turns into Emacs.

this could be really cool if it can tie directly into your ORMs like TypeORM. does anyone know if something like it even exist?

How can I open my already existing draw.io XML files using this extension?

Neat project.

Should work out of the box. You just need to rename them to *.drawio :D

Why did they rename draw.io to diagrams.net?

Security reasons apparently. This is news to me too.

https://www.diagrams.net/blog/move-diagrams-net

Some history and downsides to the `io` domain: https://www.thewebmaster.com/hosting/2016/feb/27/io-tld-top-...

now, do one for excalidraw.com

This is crazy awesome!

Reply on news.ycombinator.com