BA Prince the B.A. Subscribe

Home / Mermaid for Business Analysts

As-Is vs To-Be Process Map in Mermaid

Quick answer

Put the as-is and the to-be in 2 subgraphs inside a flowchart LR, so they sit side by side. Give each subgraph its own IDs. Then make 2 colour styles with classDef and apply them with class, so the steps that change stand out.

    classDef old fill:#ffd6d6,stroke:#c0392b
    classDef new fill:#d5f5d5,stroke:#2e8b57

As-Is vs To-Be Process Map in Mermaid

Watch on YouTube Subscribe

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.

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 one Mermaid node sit in two subgraphs?

No. Each ID is one shape, so it shows in only one box. Give each process its own IDs, like A1 and B1, even when the step text is the same.

More in Mermaid for Business Analysts

Generate a Mermaid Diagram With AI (ChatGPT, Claude, Gemini)