
Create Diagrams in VS Code with Draw.io - sharjeelsayed
https://github.com/hediet/vscode-drawio
======
tgv
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...](https://marketplace.visualstudio.com/items?itemName=tintinweb.graphviz-
interactive-preview) and
[https://marketplace.visualstudio.com/items?itemName=joaompin...](https://marketplace.visualstudio.com/items?itemName=joaompinto.vscode-
graphviz). Since graphviz is old, there are also command line tools to render
the output.

For more information about graphviz:
[https://graphviz.org/](https://graphviz.org/)

~~~
thiht
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?

~~~
chii
> 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.

~~~
dvtrn
_HN isn 't a place to merely advertise a product to gain traction and
marketing_

Today I learned.

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

~~~
dvtrn
_The irony._

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

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

------
gitgud
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

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

~~~
sah2ed
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).

~~~
wayneftw
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.

~~~
mook
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).

------
davidjgraph
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://github.com/jgraph/drawio-integration)

[https://desk.draw.io/support/solutions/articles/16000042544-...](https://desk.draw.io/support/solutions/articles/16000042544-embed-
mode)

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

Very neat!

~~~
bjonnh
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.

------
eddiegroves
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.

~~~
alexandargyurov
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.

~~~
jimmcslim
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...](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)

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

[3] [https://c4model.com/](https://c4model.com/)

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

mermaid js website :
[https://mermaidjs.github.io/#/](https://mermaidjs.github.io/#/)

------
choward
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.

~~~
dragonsh
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.

~~~
philliphaydon
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.

~~~
vijaybritto
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!!

~~~
WorldMaker
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.

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

~~~
WorldMaker
[https://code.visualstudio.com/updates/v1_45#_faster-
syntax-h...](https://code.visualstudio.com/updates/v1_45#_faster-syntax-
highlighting)

[https://github.com/microsoft/vscode/pull/95958](https://github.com/microsoft/vscode/pull/95958)

~~~
vijaybritto
Thanks a tonne!!

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

------
eXpl0it3r
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](https://www.diagrams.net/blog/move-diagrams-net)

~~~
Gehinnn
That's a planned feature!

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

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

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

[https://monodraw.helftone.com](https://monodraw.helftone.com)

------
jonny383
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?

~~~
davidjgraph
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.

~~~
Gehinnn
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!

------
thanksforfish
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!

------
mjbrusso
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!

~~~
lukevers
Yes, and it’s pretty great.

[https://marketplace.visualstudio.com/items?itemName=auchenbe...](https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-
browser-preview)

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

~~~
eddiegroves
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.

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

~~~
2mol
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.

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

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

~~~
autoconfig
See point 3.

------
TechBro8615
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.

~~~
Gehinnn
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](https://github.com/hediet/vscode-drawio/issues)

~~~
TechBro8615
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](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)

------
p2t2p
I sleep and dream when VS Code turns into Emacs.

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

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

Neat project.

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

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

~~~
floo
Security reasons apparently. This is news to me too.

[https://www.diagrams.net/blog/move-diagrams-
net](https://www.diagrams.net/blog/move-diagrams-net)

------
tuananh
now, do one for excalidraw.com

------
philliphaydon
This is crazy awesome!

