7 ms·

I use drawio, as those diagrams are quite future proof (drawio is open source, very old and you can embed diagrams in svg files) but also very expressive (you c

I use drawio, as those diagrams are quite future proof (drawio is open source, very old and you can embed diagrams in svg files) but also very expressive (you can even use latex inside drawio diagrams). Since I created a drawio integration extension for VS Code, I tend to create much more diagrams during coding, as they are really cheap to create. There is also an extension for IntelliJ and the diagrams work nicely in github readme files. After moving diagrams closer to code, I noticed that it is much easier to keep them in sync with the code base. Especially as PRs changing the code structure can include diagram changes at the same time. I use them to model simplified class diagrams for documentation purposes, to model data flows, to create primitive mockups, to show the relationship between UI components (as embedded screenshots) and to show component dependencies. I try to follow UML, but I don't care about machine readability and prefer readability over UML compliance. You can find some uses-cases of those diagrams here (https://dev.to/hediet/create-diagrams-in-vs-code-with-draw-io-32pd https://dev.to/hediet/create-diagrams-in-vs-code-with-draw-i...).

kenoph 5y ago
Just FYI: draw.io uses SVG foreignObjects for styling the text in the diagrams. That means that to get a proper rendering of the resulting SVG you need to look at it in a browser. If not, it has a fallback text element, but you lose the styling. I lost many hours due to this :/ other than that, I like it a lot
- Gehinnn 5y ago
  Sadly, this is a known problem. Theoretically, you can use Chrome headless to render such SVGs into PDFs.
notRobot 5y ago
Draw.io is amazing! It has now been renamed to diagrams.net: https://app.diagrams.net/ https://app.diagrams.net/ Github repo: https://github.com/jgraph/drawio https://github.com/jgraph/drawio It's very easy to self-host, especially on Github Pages: https://github.com/jgraph/drawio#running https://github.com/jgraph/drawio#running There's also desktop apps for Windows, GNU/Linux, Mac and Chrome OS: https://github.com/jgraph/drawio-desktop/releases/latest https://github.com/jgraph/drawio-desktop/releases/latest
- capableweb 5y ago
  At first, the naming change seems useless. At second thought, it might help with discovery as "draw" is very generic (end up calling it "draw io"). Third thought is why did they chose something generic again, instead of creating a unique name? The name draw.io seems to be everywhere in the code/documentation/community/stack overflow still and even searching for "draw io" shows "Draw.io - Diagrams.net" which just adds to the confusion. Probably either names would have been fine, but at least be consistent about it.
  - Gehinnn 5y ago
    Afaik they only wanted to get rid of the io tld, as it is quite insecure.
    - pcthrowaway 5y ago
      What makes the .io TLD insecure?
      - samoraai 5y ago
        From their blog: “ There are two major problems with .io domains: The first is that the islands which should own the domain suffix, don’t, thanks to a wonderful piece of modern day British Imperialism. If you ever feel the need to donate to us, please give it to a more worthy cause. Secondly, there was a security issue with the .io domain. In 2017, a researcher managed to take control of four of the seven authoritative name servers for the .io domain. We accept that mistakes can happen, strong processes limit the chances of them happening, but they still can. However, the domain administrator made no attempt, at any time, to communicate with anyone about the issue. We’ve no evidence to suggest there is anything to be worried about, but the complete lack of communications means we have lost trust in whoever controls .io domains.” https://www.diagrams.net/blog/move-diagrams-net https://www.diagrams.net/blog/move-diagrams-net
kwanbix 5y ago
draw.io is great, however, isn't the question about what type of diagrams do we do instead of what software do we use to do diagrams? I am confused.
tda 5y ago
Thanks for the extension! Don't make that meany diagrams but when I do I use it. Much easier than going to the draw.io in the browser as the extension can easily access the files in the source code
simlevesque 5y ago
Could you add a link to your extension please ?
- Gehinnn 5y ago
  You can find it here: https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio https://marketplace.visualstudio.com/items?itemName=hediet.v... Like draw.io, it is open source! (https://github.com/hediet/vscode-drawio https://github.com/hediet/vscode-drawio)
jimbob45 5y ago
Came here to say this. It’s free and it does a great job.
gonzo41 5y ago
Yeah my top 3 is websequencediagrams, PowerPoint and draw.io All depends on the information I'm trying to convey and the formality, Truthfully, PowerPoint is my goto for explaining flow and quick 'this speaks to that' style network stuff. I also get a bit of millage from time to time out of the Graphviz online demos. I use those to throw together graph-ish stuff on the fly.

kenoph 5y ago

Just FYI: draw.io uses SVG foreignObjects for styling the text in the diagrams. That means that to get a proper rendering of the resulting SVG you need to look at it in a browser. If not, it has a fallback text element, but you lose the styling. I lost many hours due to this :/ other than that, I like it a lot

Gehinnn 5y ago
Sadly, this is a known problem. Theoretically, you can use Chrome headless to render such SVGs into PDFs.

notRobot 5y ago

Draw.io is amazing! It has now been renamed to diagrams.net: https://app.diagrams.net/ https://app.diagrams.net/ Github repo: https://github.com/jgraph/drawio https://github.com/jgraph/drawio It's very easy to self-host, especially on Github Pages: https://github.com/jgraph/drawio#running https://github.com/jgraph/drawio#running There's also desktop apps for Windows, GNU/Linux, Mac and Chrome OS: https://github.com/jgraph/drawio-desktop/releases/latest https://github.com/jgraph/drawio-desktop/releases/latest

capableweb 5y ago
At first, the naming change seems useless. At second thought, it might help with discovery as "draw" is very generic (end up calling it "draw io"). Third thought is why did they chose something generic again, instead of creating a unique name? The name draw.io seems to be everywhere in the code/documentation/community/stack overflow still and even searching for "draw io" shows "Draw.io - Diagrams.net" which just adds to the confusion. Probably either names would have been fine, but at least be consistent about it.
- Gehinnn 5y ago
  Afaik they only wanted to get rid of the io tld, as it is quite insecure.
  - pcthrowaway 5y ago
    What makes the .io TLD insecure?
    - samoraai 5y ago
      From their blog: “ There are two major problems with .io domains: The first is that the islands which should own the domain suffix, don’t, thanks to a wonderful piece of modern day British Imperialism. If you ever feel the need to donate to us, please give it to a more worthy cause. Secondly, there was a security issue with the .io domain. In 2017, a researcher managed to take control of four of the seven authoritative name servers for the .io domain. We accept that mistakes can happen, strong processes limit the chances of them happening, but they still can. However, the domain administrator made no attempt, at any time, to communicate with anyone about the issue. We’ve no evidence to suggest there is anything to be worried about, but the complete lack of communications means we have lost trust in whoever controls .io domains.” https://www.diagrams.net/blog/move-diagrams-net https://www.diagrams.net/blog/move-diagrams-net

kwanbix 5y ago

draw.io is great, however, isn't the question about what type of diagrams do we do instead of what software do we use to do diagrams? I am confused.

tda 5y ago

Thanks for the extension! Don't make that meany diagrams but when I do I use it. Much easier than going to the draw.io in the browser as the extension can easily access the files in the source code

simlevesque 5y ago

Could you add a link to your extension please ?

Gehinnn 5y ago
You can find it here: https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio https://marketplace.visualstudio.com/items?itemName=hediet.v... Like draw.io, it is open source! (https://github.com/hediet/vscode-drawio https://github.com/hediet/vscode-drawio)

jimbob45 5y ago

Came here to say this. It’s free and it does a great job.

gonzo41 5y ago

Yeah my top 3 is websequencediagrams, PowerPoint and draw.io All depends on the information I'm trying to convey and the formality, Truthfully, PowerPoint is my goto for explaining flow and quick 'this speaks to that' style network stuff. I also get a bit of millage from time to time out of the Graphviz online demos. I use those to throw together graph-ish stuff on the fly.