As-Is vs To-Be Process Map in draw.io
An as-is map shows how a process works today, and a to-be map shows how it will work after the change. Learn how to draw both in the free draw.io web app, one above the other, and colour what goes away and what is new, using an online shop's order process.
Step by step
Today and tomorrow
- As-is vs to-be. Before you change a process, show how it works today and how it will work after. That's an as is and a to be map. Put them together, and everyone sees the change at a glance. Here's ours.
- Blank diagram. Start a blank diagram in draw.io.
The as-is map
- As-is row. First, a title for the top row. Drag in the text shape and type as is. This row shows the process today. Today, customers phone in their orders. Add a rectangle. Take phone order. Then someone types the order into the system by hand. Add that step. Connect them with the blue arrow. Last, the order is shipped. And connect it.
The to-be map
- To-be row. Now the bottom row. Add another text shape and type to be. This is the process after the change. Customers will order on the website. Put the new first step right under the old one. Shipping stays the same. Put it under the old ship order, so the steps line up. Connect them. Web orders go straight into the system, so there's nothing to retype. See the gap? That's the step we remove.
Colour the change
- Colour the change. Now colour the change. Select retype into system, click fill color, and pick a soft red. Red means this step goes away. Then select take web order and fill it soft green. Green means this step is new.
- The finished maps. Click away to see both maps. Same steps line up, red goes away, and green is new. Nobody has to hunt for the change.
Recap
- The rules. So, draw the as is on top and the to be below, line up the steps that stay, and colour what goes away and what's new. Add a small key if you share it. Subscribe for more draw.io tips for business analysts.
