4 ms·

Show HN: Collaboratively Edit Diagrams in VS Code with Draw.io

142 points by Gehinnn 6y ago

Gehinnn 6y ago
With the release of version 1.0 today, the Draw.io integration extension for VS Code got many new features. One of those features is the advanced support for liveshare. Besides content synchronization, cursors and selections of participants are synchronized - this is crucial for collaboration. A detailed list of all changes can be found in the changelog (https://github.com/hediet/vscode-drawio/blob/14209ad462028cbf7013bc8e094bf0fc6e811d30/CHANGELOG.md#100---2020-10-04 https://github.com/hediet/vscode-drawio/blob/14209ad462028cb...).
stevesimmons 6y ago
Can anyone share opinions on when to use say Miro versus Draw.io? Ideally for collaborative editing, and then incorporating in GitHub Markdown, Jira and Confluence. I dither between the various options, don't commit to any, and end up not drawing the picture I really want to make...
- Gehinnn 6y ago
  I don't know miro, but with this extension for vscode you get both a solution for collaborative editing and for github markdown embedding. You can create drawio diagrams that are valid svg files!
- scanny 6y ago
  Miro’s UX is fantastic, ‘it’s quite smooth and responsive to use. I can’t think of many advantages Draw has over it, other than the lack of paywall on useful features I used to love draw, but Miro just feels better.
blntechie 6y ago
Nice, spending lot of time with draw.io nowadays and didn’t realize they have a VS Code extension.
huy 6y ago
There's also dbdiagram.io that focuses exclusively on database diagrams. Nice thing about it is you can just write simple DSL code and they render the diagrams automatically. The downside is that they don't support collaborative editing yet.
- deleted 6y ago
  [deleted]
lukasdanin 6y ago
Thanks a lot for these! I don't know if I'm going to use real time collaboration precisely, but porting Draw.io to VSCode allowed me to have a much better experience in personal projects. I've always used Draw.io to draw workflows and graphical to-do lists when bootstrapping these type of repositories, and now I don't have to leave my editor to do all of this work.
markawesome 6y ago
While I enjoy tools like draw.io---I much prefer something like XMind because I don't want to have to manually connect nodes, and it becomes overly tedious. Tools like draw.io are designed primarily for point and click, and people that love moving their mouse around constantly. This doesn't make me feel very productive, when I can use keyboard shorcuts to create an entire diagram in half the time and then go back and customize the nodes, adding boxes, etc. Unfortunately there doesn't appear to be a good markup generator for this type of diagramming or mind mapping. All the ones I've searched for fall short of the basic features compared to something like XMind, which is unfortunate. PlantUML is descent, and so is Graphviz, but they both fall short. Markmap as well fails tremendously in only offering linear designs. I hope some coder will see this and explore using YAML and a markup formating for creating diagrams, mindmaps, etc. Or just using markdown, but adding features for boxes, summary nodes, etc.
- jcims 6y ago
  Not sure if this has anything to do with what you had in mind, but user veuxdo pointed me at it earlier today https://www.ilograph.com/ https://www.ilograph.com/ I found it interesting anyway. Everything from yaml, automated layout, drilldown, etc.
  - markawesome 6y ago
    While I'm only interested in an open source solution, the YAML formatting they are using is almost exactly the style I was looking for. That would be a huge improvement to the current tooling available. I didn't see anything though, without signing up, that indicates that this would work well for mindmapping as well and implementing features like summaries: https://xmind-help.github.io/en/summary.html https://xmind-help.github.io/en/summary.html
  - c3c 6y ago
    I build https://sourcespy.com https://sourcespy.com to achieve the same goal - automated layout, drilldown but also ability to pull up the diagram contents from the code.
deleted 6y ago
[deleted]
lwhi 6y ago
I love draw.io .. looking forward to trying this out.
ReD_CoDE 6y ago
I wish Draw.io was textual/visual, something like PlantUML but in interactive way I mean you be able to drag & drop components, as well as see its "easy-to-use" textual code to customize each component Also, I wish it was like "node-editors"

142 points by Gehinnn 6y ago

With the release of version 1.0 today, the Draw.io integration extension for VS Code got many new features. One of those features is the advanced support for liveshare. Besides content synchronization, cursors and selections of participants are synchronized - this is crucial for collaboration. A detailed list of all changes can be found in the changelog (https://github.com/hediet/vscode-drawio/blob/14209ad462028cbf7013bc8e094bf0fc6e811d30/CHANGELOG.md#100---2020-10-04 https://github.com/hediet/vscode-drawio/blob/14209ad462028cb...).

stevesimmons 6y ago

Can anyone share opinions on when to use say Miro versus Draw.io? Ideally for collaborative editing, and then incorporating in GitHub Markdown, Jira and Confluence. I dither between the various options, don't commit to any, and end up not drawing the picture I really want to make...

Gehinnn 6y ago
I don't know miro, but with this extension for vscode you get both a solution for collaborative editing and for github markdown embedding. You can create drawio diagrams that are valid svg files!
scanny 6y ago
Miro’s UX is fantastic, ‘it’s quite smooth and responsive to use. I can’t think of many advantages Draw has over it, other than the lack of paywall on useful features I used to love draw, but Miro just feels better.

blntechie 6y ago

Nice, spending lot of time with draw.io nowadays and didn’t realize they have a VS Code extension.

huy 6y ago

There's also dbdiagram.io that focuses exclusively on database diagrams. Nice thing about it is you can just write simple DSL code and they render the diagrams automatically. The downside is that they don't support collaborative editing yet.

deleted 6y ago
[deleted]

lukasdanin 6y ago

Thanks a lot for these! I don't know if I'm going to use real time collaboration precisely, but porting Draw.io to VSCode allowed me to have a much better experience in personal projects. I've always used Draw.io to draw workflows and graphical to-do lists when bootstrapping these type of repositories, and now I don't have to leave my editor to do all of this work.

markawesome 6y ago

While I enjoy tools like draw.io---I much prefer something like XMind because I don't want to have to manually connect nodes, and it becomes overly tedious. Tools like draw.io are designed primarily for point and click, and people that love moving their mouse around constantly. This doesn't make me feel very productive, when I can use keyboard shorcuts to create an entire diagram in half the time and then go back and customize the nodes, adding boxes, etc. Unfortunately there doesn't appear to be a good markup generator for this type of diagramming or mind mapping. All the ones I've searched for fall short of the basic features compared to something like XMind, which is unfortunate. PlantUML is descent, and so is Graphviz, but they both fall short. Markmap as well fails tremendously in only offering linear designs. I hope some coder will see this and explore using YAML and a markup formating for creating diagrams, mindmaps, etc. Or just using markdown, but adding features for boxes, summary nodes, etc.

jcims 6y ago
Not sure if this has anything to do with what you had in mind, but user veuxdo pointed me at it earlier today https://www.ilograph.com/ https://www.ilograph.com/ I found it interesting anyway. Everything from yaml, automated layout, drilldown, etc.
- markawesome 6y ago
  While I'm only interested in an open source solution, the YAML formatting they are using is almost exactly the style I was looking for. That would be a huge improvement to the current tooling available. I didn't see anything though, without signing up, that indicates that this would work well for mindmapping as well and implementing features like summaries: https://xmind-help.github.io/en/summary.html https://xmind-help.github.io/en/summary.html
- c3c 6y ago
  I build https://sourcespy.com https://sourcespy.com to achieve the same goal - automated layout, drilldown but also ability to pull up the diagram contents from the code.

deleted 6y ago

[deleted]

lwhi 6y ago

I love draw.io .. looking forward to trying this out.

ReD_CoDE 6y ago

I wish Draw.io was textual/visual, something like PlantUML but in interactive way I mean you be able to drag & drop components, as well as see its "easy-to-use" textual code to customize each component Also, I wish it was like "node-editors"