3 ms·

Ask HN: Do you have a setup for drawing sequence diagrams with draw.io?

21 points by thisisabug 4y ago

Do you have a setup or preferences for drawing sequence diagrams with draw.io? What settings work best for you?

rektide 4y ago
Apologies for not answering the question, but, wow after doing a couple diagrams in mermaid.js, I've found it to be so much easier & better than everything else I've ever done. Write what you want in text & it does the work to lay it out. https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/
- mdaniel 4y ago
  I agree with this response[1]: draw.io is the wrong level of abstraction for sequence diagrams, in my opinion. It'd be like asking how to make sequence diagrams in Google Slides: possible, but crazy 1: although in my specific case, I get more utility out of PlantUML but same-same
- alixanderwang 4y ago
  D2's a new diagramming language just added sequence diagrams too: https://d2lang.com/tour/sequence-diagrams https://d2lang.com/tour/sequence-diagrams. (disclaimer: i work on this)
officialchicken 4y ago
Draw a skinny vertical rectangle - this will be the lifetime line of the class. Go to the properties panel on the bottom right of the window, select 'add anchor points' under the 'edit' dropdown. I find 5-8 on the left works well. Then edit the rectangle so that it's only pixel wide (drag, edit, etc.) and set the width to one and linetype dashed. Drag this entity to your toolbar for reuse now and in the future. Now you can attach arrows to any of the anchor points.
jantypas 4y ago
Draw.io can get by, but for sequence diagrams, there's little better than WebSequenceDiagrams.com or in a pinch, LucidCharts.
darrenallen85 4y ago
I Love draw.io BUT for sequence diagrams I definitely recommend https://sequencediagram.org/ https://sequencediagram.org/ - quick to create diagrams - can use text to create or drag / type - configurable to style diagrams as u need - runs in browser - no server required - familiar syntax - similar to plantuml and other variants
0x54MUR41 4y ago
May I ask a question? Why do you have to draw a sequence diagram with draw.io? This response below is not going to answer your question. Previously, I was using draw.io to draw sequence diagrams. I didn't have "fancy" setup. It was pretty straightforward. I drew diagram components, like actor, boundary, control, message, and lifeline and connected them one by one. This took so much effort and time. Then, I moved on and used PlantUML [0]. This tool helped me to produce a sequence diagram using text. The text will be rendered into a diagram. I didn't need to draw. It saved my time a lot. [0]: https://plantuml.com/sequence-diagram https://plantuml.com/sequence-diagram
- thisisabug 4y ago
  I like plantuml as well. I use it with all my preferences saved in vscode's user snippets. draw.io is seems to be preferred option at work as draw.io diagrams can be embedded into documentation (e.g., confluence) and are editable in future.
  - 0x54MUR41 4y ago
    Ah, got it. Actually, PlantUML is available as a plugin on Confluence. I am currently using the plugin at work. Since PlantUML supports converting a diagram to a SVG file, it should be embedable with other platforms too. The good thing about PlantUML is that it's a text-based diagram tool. You can put the text in version control, like Git so you will know the revision history.

21 points by thisisabug 4y ago

Do you have a setup or preferences for drawing sequence diagrams with draw.io? What settings work best for you?

Apologies for not answering the question, but, wow after doing a couple diagrams in mermaid.js, I've found it to be so much easier & better than everything else I've ever done. Write what you want in text & it does the work to lay it out. https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/

mdaniel 4y ago
I agree with this response[1]: draw.io is the wrong level of abstraction for sequence diagrams, in my opinion. It'd be like asking how to make sequence diagrams in Google Slides: possible, but crazy 1: although in my specific case, I get more utility out of PlantUML but same-same
alixanderwang 4y ago
D2's a new diagramming language just added sequence diagrams too: https://d2lang.com/tour/sequence-diagrams https://d2lang.com/tour/sequence-diagrams. (disclaimer: i work on this)

officialchicken 4y ago

Draw a skinny vertical rectangle - this will be the lifetime line of the class. Go to the properties panel on the bottom right of the window, select 'add anchor points' under the 'edit' dropdown. I find 5-8 on the left works well. Then edit the rectangle so that it's only pixel wide (drag, edit, etc.) and set the width to one and linetype dashed. Drag this entity to your toolbar for reuse now and in the future. Now you can attach arrows to any of the anchor points.

jantypas 4y ago

Draw.io can get by, but for sequence diagrams, there's little better than WebSequenceDiagrams.com or in a pinch, LucidCharts.

darrenallen85 4y ago

I Love draw.io BUT for sequence diagrams I definitely recommend https://sequencediagram.org/ https://sequencediagram.org/ - quick to create diagrams - can use text to create or drag / type - configurable to style diagrams as u need - runs in browser - no server required - familiar syntax - similar to plantuml and other variants

0x54MUR41 4y ago

May I ask a question? Why do you have to draw a sequence diagram with draw.io? This response below is not going to answer your question. Previously, I was using draw.io to draw sequence diagrams. I didn't have "fancy" setup. It was pretty straightforward. I drew diagram components, like actor, boundary, control, message, and lifeline and connected them one by one. This took so much effort and time. Then, I moved on and used PlantUML [0]. This tool helped me to produce a sequence diagram using text. The text will be rendered into a diagram. I didn't need to draw. It saved my time a lot. [0]: https://plantuml.com/sequence-diagram https://plantuml.com/sequence-diagram

thisisabug 4y ago
I like plantuml as well. I use it with all my preferences saved in vscode's user snippets. draw.io is seems to be preferred option at work as draw.io diagrams can be embedded into documentation (e.g., confluence) and are editable in future.
- 0x54MUR41 4y ago
  Ah, got it. Actually, PlantUML is available as a plugin on Confluence. I am currently using the plugin at work. Since PlantUML supports converting a diagram to a SVG file, it should be embedable with other platforms too. The good thing about PlantUML is that it's a text-based diagram tool. You can put the text in version control, like Git so you will know the revision history.