Editable diagrams from text

draw.io changed Arrange > Insert > Advanced > From Text so the diagram it generates stays editable. It's now placed in a layout container that keeps the text attached, so you can reopen it and update the diagram later.

Pick a diagram type in the dialog, replace the example text with your own (each type has its own format), and click Insert. draw.io draws and lays out the diagram on the canvas. To change it, click the pencil icon at the top left of the container. Edit a line to relabel its shape, and the shape keeps its style and size. Add a line to add a shape styled like its siblings. Delete a line to remove its shape and connectors.

Editing works in both directions. If you add and connect shapes inside the container, or relabel existing ones, the text description updates to match. Styles you apply inside the container are kept the next time you edit the text. In tree diagrams and mindmaps, a new indented child takes its style from its parent.

You can describe entity relationship diagrams, flowcharts, and directed graphs as lists with an arrow between each pair of nodes. You can also describe vertical, horizontal, radial, and balloon trees, and mindmaps, as indented outlines. The container is transparent with no outline by default, and you can drag it by the arrows at its top left or by its frame.

draw.io's Mermaid insert works in a similar way. The Mermaid source is stored in a container group you can re-edit. Restyling is kept when you regenerate the diagram, but repositioning and resizing are reset.