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. An as-is map shows how a process works today. A to-be map shows how it will work after the change. Put them on one page and everyone can see the change at a glance. The example is an online shop's order process.
- Blank diagram. Open draw.io and start a blank diagram.
The as-is map
- As-is row. From the General shapes, drag a Text shape onto the page and type As-Is. This top row shows the process today. Today, customers phone in their orders. Drag in a Rectangle from General and type Take phone order. Next, someone types the order into the system by hand. Add a second rectangle labelled Retype into system. Hover over Take phone order and drag its blue arrow to Retype into system to connect the 2 steps. Last, the order is shipped. Add a third rectangle labelled Ship order. Connect Retype into system to Ship order the same way. The as-is row is done.
The to-be map
- To-be row. Below it, drag in another Text shape and type To-Be. This bottom row shows the process after the change. Customers will now order on the website. Add a rectangle labelled Take web order, placed right under Take phone order. Shipping stays the same. Add a Ship order rectangle right under the first Ship order, so matching steps line up. Connect Take web order to Ship order. Web orders go straight into the system, so there is nothing to retype. The empty space under Retype into system shows the step being removed.
Colour the change
- Colour the change. Now colour the change. Select Retype into system and set its fill colour to a soft red (#F8CECC). Red means this step goes away. Then select Take web order and fill it soft green (#D5E8D4). Green means this step is new.
- The finished maps. Click an empty part of the page to deselect and see both maps. The steps that stay line up, red shows what goes away and green shows what is new.
Recap
- The rules. The rules: as-is on top, to-be below, line up the steps that stay, and colour what goes away and what is new. If you share the diagram, add a small key that explains the colours.
Common mistakes
- Drawing the two maps on separate pages. Readers then have to flip back and forth to find the difference. Put the as-is row on top and the to-be row directly below it on one page.
- Steps that stay don't line up. If the to-be Ship order sits in a different place, it looks like a different step. Place each step that stays directly under its as-is version, so only the real changes stand out.
- Filling the gap where a step was removed. Pulling the to-be steps closer together hides the change. Leave the space under the removed step empty and colour the removed step red in the as-is row.
- Colours with no key. Someone who wasn't in the room won't know that red means removed and green means new. Add a small key before you share the diagram.
When a business analyst uses this
In a workshop to agree a new ordering system, a business analyst shows the as-is and to-be maps on one page. The red and green steps show the business what is being removed and what is being added, and become the list of changes to confirm before sign-off.
Questions people ask
What is the difference between an as-is and a to-be process map?
An as-is map shows how a process works today. A to-be map shows how it will work after a change, such as moving phone orders to a website.
Is draw.io free?
Yes. draw.io is a free web app, and this whole diagram is built in it from a blank diagram using the General shapes.
How do you show changes between an as-is and a to-be process?
Line up the steps that stay, then colour the rest: soft red for steps that go away and soft green for new steps. Add a small key so readers know what the colours mean.
