13 ms·
Create Diagrams in VS Code with Draw.io
- boomeranger 6y agoThis is so cool! I would love to see what kinds of people have used it for and built with this within VSCode.
- philliphaydon 6y agoThis is crazy awesome!
- erk__ 6y agoThis reminds me a bit of artists-mode in Emacs, though this has much nicer graphics.
- angrygoat 6y agoThis 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 6y agoYes 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.
- jaequery 6y agothis could be really cool if it can tie directly into your ORMs like TypeORM. does anyone know if something like it even exist?
- choward 6y agoIf 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 6y agoA 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 6y agoVSCode 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 6y agoYes 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 6y agoOne 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.
- tgv 6y agoThere 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=tintinweb.graphviz-interactive-preview https://marketplace.visualstudio.com/items?itemName=tintinwe... and https://marketplace.visualstudio.com/items?itemName=joaompinto.vscode-graphviz 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/ https://graphviz.org/
- rraghur 6y agoI 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/master/README.md https://github.com/asciidoctor/asciidoctor-vscode/blob/maste...
- 2mol 6y agoHow 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.
- minxomat 6y agoYeah really looking for a tool that produces output as nice as e.g. Dat documentation diagrams
- jiveturkey 6y agoYou're looking for a human illustrator, then. :D
- TeMPOraL 6y agoSeconded. 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 :/.
- davidjgraph 6y agoThe 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-embed-mode https://desk.draw.io/support/solutions/articles/16000042544-...
- jonny383 6y agoWow, 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 6y agoIn 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 6y agoI 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!
- Gehinnn 6y agoPlease 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!
- gitgud 6y agoI 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
- happymellon 6y agoBut IntelliJ is open source? https://github.com/JetBrains/intellij-community https://github.com/JetBrains/intellij-community
- nothis 6y agoDoes Community Edition have all features?
- enitihas 6y agoIt 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.
- chii 6y agounfortunately, 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).
- enitihas 6y agoYup, 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.
- quickthrower2 6y agoWow I didn't know about draw.io. That thing in itself is amazing.
- tuananh 6y agonow, do one for excalidraw.com
- hit8run 6y agoWhy did they rename draw.io to diagrams.net?
- floo 6y agoSecurity reasons apparently. This is news to me too. https://www.diagrams.net/blog/move-diagrams-net https://www.diagrams.net/blog/move-diagrams-net
- eddiegroves 6y agoSome history and downsides to the `io` domain: https://www.thewebmaster.com/hosting/2016/feb/27/io-tld-top-level-domain/ https://www.thewebmaster.com/hosting/2016/feb/27/io-tld-top-...
- eddiegroves 6y agoI'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 6y agoBeing 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.
- eddiegroves 6y agoGreat 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!
- jimmcslim 6y agoThis [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.plantuml https://marketplace.visualstudio.com/items?itemName=jebbs.pl... [2] https://github.com/RicardoNiepel/C4-PlantUML https://github.com/RicardoNiepel/C4-PlantUML [3] https://c4model.com/ https://c4model.com/
- mtsr 6y agoAfter 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.
- p2t2p 6y agoI sleep and dream when VS Code turns into Emacs.
- eXpl0it3r 6y agoThat 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 6y agoThat's a planned feature!
- kcindric 6y agoHow can I open my already existing draw.io XML files using this extension? Neat project.
- Gehinnn 6y agoShould work out of the box. You just need to rename them to *.drawio :D
- clktmr 6y agoIsn't this just opening the drawio editor in vscode? What's the point? (genuine question)
- 2mol 6y ago1. 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.
- joshschreuder 6y agoPlus 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.
- clktmr 6y agoAFAIK you can do this with the official offline version too. What's the point of embedding it in vscode especially?
- autoconfig 6y agoSee point 3.
- fadzlan 6y agoThe 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.
- devniel 6y agowow, it's great. I'm using plantuml, but I will try this when looking for more flexibility.
- eddiegroves 6y agoI 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.
- mjbrusso 6y agoVS 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 6y agoYes, and it’s pretty great. https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview https://marketplace.visualstudio.com/items?itemName=auchenbe...
- TechBro8615 6y agoLooks 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 6y agoCan 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 6y agoSorry, 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)
- thanksforfish 6y agoIs 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!
- simplyinfinity 6y agoSimilar (but not that fully featured) is the mermaid preview extension : https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid https://marketplace.visualstudio.com/items?itemName=bierner.... mermaid js website : https://mermaidjs.github.io/#/ https://mermaidjs.github.io/#/
- fulldecent2 6y agoNow if we could get this for Monodraw I would pay money for that https://monodraw.helftone.com https://monodraw.helftone.com