Create an editable flowchart from text with draw.io

Paste a short Mermaid example into draw.io to create a flowchart, then change its shapes and save a copy you can edit later. This free draw.io browser example uses fictional request handling and needs no account.

1. Start a blank diagram

1. Open the draw.io editor (opens in a new tab). If it asks where to store your file, choose Decide Later.
2. Choose File > New, name the file request-flowchart.drawio, select Blank Diagram and click Create. Continue in the new tab if one opens.

2. Paste the flowchart text

Mermaid describes a diagram using text. You can start by copying this example; no AI service is needed.

1. Choose Arrange > Insert > Mermaid.
2. Click Copy below, then replace the sample text in the Mermaid dialog with it.
3. Leave Diagram selected and click Insert. You should see five shapes with Yes and No branches.

Enlarge image

Mermaid input dialog with the example text and Diagram selected

×

Open full-size image

3. Edit a shape and check the paths

1. Double-click Prepare reply. Replace its label with Draft reply, then click empty space on the canvas.
2. Follow both branches. Yes should lead to Draft reply, then Send reply. No should lead to Ask for missing details, then back to the question.

Enlarge image

The request flowchart with Draft reply and Yes and No branches

×

The No branch returns to the question; the edited Yes branch leads to Draft reply.

Open full-size image

4. Save the original and a PNG

1. Choose File > Save as. Keep XML File (.drawio) as the type, choose Download under Where, then click OK.
2. Check your browser's downloads for request-flowchart.drawio. Repeat this save after later edits to keep an updated copy. Download saves a file copy; the editor may still show Unsaved changes.

Enlarge image

Save as dialog with XML File .drawio and Download selected

×

Open full-size image

1. Choose File > Export as > PNG. Set Size to Diagram and tick Include a copy of my diagram.
2. Click Export, choose Download and click OK. Keep the original .drawio file as well.

Enlarge image

PNG export settings with Include a copy of my diagram ticked

×

Open full-size image

5. Check that the PNG is editable

1. Create another Blank Diagram through File > New.
2. Choose File > Import from > Device and select the downloaded PNG.
3. Double-click Draft reply and change it to Review reply. The other shapes should remain separate. Do this in the check file so your original stays unchanged.

If a step fails

If Mermaid reports an error, paste the complete example again and check its quotes, brackets and arrows. If the result behaves as one image, reinsert the text with Diagram selected. If an exported PNG imports as a flat image, export it again with Include a copy of my diagram ticked. Keep the downloaded file for this check.

PDF layout and printing

If you need a PDF, draw.io's PDF export guide (opens in a new tab) explains the layout choices. In File > Export as > PDF, open Advanced. Use Crop for a page sized to the diagram, or Fit to 1 sheet across by 1 sheet down to scale it onto one sheet. Check the saved PDF for complete arrows and readable labels.

draw.io says PDF export sends the diagram to its PDF generator. For local PDF generation, use File > Print and choose your browser's PDF destination. The printing instructions (opens in a new tab) show the steps for Chrome and macOS. Keep the .drawio original for later edits.

Sources: draw.io Mermaid options (opens in a new tab); save formats (opens in a new tab); PNG export (opens in a new tab). Screenshots show the fictional example in the browser editor.