As-Is vs To-Be Process Map in Mermaid
Show today's process and the new process side by side, with the changed steps in colour. Use two subgraphs and classDef in the free Mermaid live editor, with an expense claim before and after.
Step by step
Before and after
- As-is vs to-be. Stakeholders want to see what will change. Draw today's process (the as-is) next to the new one (the to-be), and colour the steps that change. The example is an expense claim, before and after.
- Diagram type. In the Mermaid live editor, clear the code and type flowchart LR. LR means left to right, which puts the two processes side by side.
flowchart LR
The as-is
- As-is subgraph. Start with today's process. Type subgraph, a short ID and the title in square brackets: subgraph ASIS[As-is]. direction TB makes the steps inside run top to bottom. The first two steps are Claim sent and Print form. Add the rest of the steps, Manager signs paper, Finance retypes claim and Claim paid, each linked with -->. Type end to close the subgraph. Until you do, the subgraph is still open and Mermaid greys out the drawing. Today's process now sits inside a labelled box: 5 shapes from Claim sent to Claim paid.
subgraph ASIS[As-is] direction TB A1([Claim sent]) --> A2[Print form]A2 --> A3[Manager signs paper] A3 --> A4[Finance retypes claim] A4 --> A5([Claim paid]) end
The to-be
- To-be subgraph. Put the new process in a second subgraph, TOBE[To-be], also with direction TB. Give its shapes new IDs (B1, B2 and so on) so they never clash with the as-is. The claimant now fills an online form. Add Manager approves online and Claim paid, then close the subgraph with end. The line ASIS ~~~ TOBE uses 3 tildes to make an invisible link between the 2 subgraphs. This keeps the as-is on the left. Now there are 2 boxes side by side: the as-is on the left and the to-be on the right. But nobody can tell yet which steps changed.
subgraph TOBE[To-be] direction TB B1([Claim sent]) --> B2[Fill online form]B2 --> B3[Manager approves online] B3 --> B4([Claim paid]) end ASIS ~~~ TOBE
Colour the changes
- classDef. Make 2 colour styles with classDef. Type the style name, then fill and stroke, each with a colon and a hex colour code, and a comma between them. old is light red (#ffd6d6) and new is light green (#d5f5d5).
classDef old fill:#ffd6d6,stroke:#c0392b classDef new fill:#d5f5d5,stroke:#2e8b57 - class. Now put the styles on the shapes. Type class, the IDs with commas between them, and the style name. class A2,A3,A4 old marks the as-is steps that change or go. class B2,B3 new marks the new steps. Now the changes stand out. Red steps leave, green steps arrive, and the uncoloured steps, Claim sent and Claim paid, stay the same.
class A2,A3,A4 old class B2,B3 new - Read the changes. Look at Finance retypes claim. Nothing on the green side matches it, so the step is gone. That is where the time saving is. The manager still approves, but online, so the claim never waits for paper. It's the same job done a new way, so Manager approves online is green.
Recap
- The rules. To recap: put the as-is and the to-be in 2 subgraphs with different IDs, side by side. Make a classDef for old and new, and use class to colour the steps that change.
What is the difference between as-is and to-be?
The as-is map shows how the process works today, including the workarounds and the waiting. The to-be map shows how it should work after the change. You need both: the as-is proves you understand the problem, and the to-be is what the sponsor signs off and the team builds.
An easy way to remember it: as-is is today, warts and all. To-be is the agreed future, with every step someone still has to do, not just the nice ones.
How to capture the as-is before you draw it
Talk to the people who do the work, not only their managers, and if you can, watch them do it once. Write down each step in their words, who does it, and where the work waits, such as an inbox, an approval or a spreadsheet. Note the pain points and one or two simple numbers, like how long an approval takes or how many requests come in each week.
Then read the steps back to them before you draw anything final. People often remember a missing step only when they hear the list out loud.
Turn the 2 maps into a gap list
Once both maps sit side by side, list every difference: steps removed, steps added, and steps that change owner. For each one, write who is affected and what has to be built or changed, such as a new form, a report or a training note. The red and green colours in this diagram make that list quick to write, and the list becomes the starting point for your requirements.
Common mistakes
- Reusing the same IDs in both subgraphs. If both processes use A2, Mermaid treats it as one shape, so it shows up in only one box. Give the to-be its own IDs, like B1 and B2, even when the step text is the same.
- Forgetting end after a subgraph. Every subgraph needs its own end. If one is missing, the next lines fall inside the open box and Mermaid can't draw the diagram until every subgraph is closed.
- Linking a step to a shape in the other box. When a shape inside a subgraph links to a shape outside it, Mermaid ignores that subgraph's direction TB and the layout changes. Link the subgraphs themselves with ASIS ~~~ TOBE instead.
- Using end as step text. A shape labelled end in all lowercase breaks the flowchart, because end closes a subgraph. Write End or END, or use a clearer label like Claim paid.
When a business analyst uses this
In a process improvement workshop, type the current approval steps into the as-is subgraph and the proposed steps into the to-be. Red for removed steps and green for new ones lets the sponsor see exactly what changes before they sign off the to-be process.
Questions people ask
How do I put two Mermaid subgraphs side by side?
Start with flowchart LR, give each subgraph direction TB, and add an invisible link such as ASIS ~~~ TOBE so the first box stays on the left.
How do I change the colour of a node in Mermaid?
Define a style with classDef, like classDef old fill:#ffd6d6,stroke:#c0392b, then apply it with class A4 old. For a one-off, style A4 fill:#ffd6d6 also works.
Can you draw the to-be without an as-is?
You can for a brand new process with nothing to compare. If a process already exists, skipping the as-is means you can miss the workarounds people rely on today, and you can't show the sponsor what changes.
