Flowchart with images (Excalidraw)
Mixing screenshots into a flowchart is something only a canvas editor does well, and it is very effective for support and training material.
#What this example shows
Screenshots embedded directly in the scene.
A flow drawn around and between them.
Images locked so the arrows can be drawn over them.
#How to build it
Step | What you do |
|---|---|
1 | Paste or drag each screenshot onto the canvas. |
2 | Resize them to a consistent width, then lock them. |
3 | Draw the flow arrows between them, binding each arrow to its images. |
4 | Add short labels on the arrows saying what the user does. |
5 | Group each step with its screenshot so the pair moves together. |
#Making it your own
Image data is stored with the diagram, so the scene stands alone.
Resize large screenshots before importing; they make the diagram heavy.
Crop tightly. A full desktop screenshot wastes most of the space.
#Related
Rough on purpose, and quicker for it.
