draw.io
Arrange shapes, edit labels, and connect steps in your browser, then export the diagram as an SVG file.
Overview
The draw.io online editor runs at app.diagrams.net. Add shapes to the canvas, label them, and use connectors to show how the steps relate to one another.
The official getting-started guide explains the shape libraries, canvas, and format panel. This entry focuses on basic flowchart editing, not untested integrations.
Why it is useful
You do not need to redraw every line when moving a step. In our test, dragging a connected node kept the arrow attached to both shapes, making it easier to revise the layout while working out the process.
Good fit for
Developers explaining a feature’s flow, product teams documenting work steps, and teachers preparing diagram examples.
Try it when
We created two rectangles labeled Start and End and connected them with an arrow. Moving End to the right changed the connector’s path while keeping it attached to the same node.
We also exported and downloaded an SVG through the File menu, then confirmed that the file contained both labels and embedded diagram data. The official export guide distinguishes image formats from options that preserve diagram data. Choose a format with later edits in mind.
Before using it
Keep an editable source file, not just an image for display. If a diagram contains internal architecture or sensitive information, check its storage location and sharing scope. We did not test SVG re-import, cloud storage, collaboration, or other export formats.
