Incremental Mermaid diagrams

[slaiyer]

Like incremental lists, would love to have incrementally rendered Mermaid diagrams where there is a pause between rendering each new source line of - say - a flowchart TD.

flowchart TD
    A --> B  # renders up until here; pause
    A --> C  # re-render up until here; pause
    ...

[mfontanini]

This sounds great! Just curious what the UX should be, e.g. something like

```mermaid +render +incremental
flowchart TD
    A --> B
    # Some form of delimiter
    A --> C
```

The delimiter could be a pause or a ----------- or something like that? Do you know of any tools that do something like this to see how they deal with it?

[slaiyer]

I'm not aware of any such tools. I do have some thoughts, though. Mermaid comments begin with a %%. A reserved keyword as a comment (%% pause?) could indicate a delimiter between "blocks".

A relatively straightforward approach could render incrementally accumulating blocks and redraw/overlay them to emulate stepping.

The way the mermaid engine arranges nodes could make this a visually jarring experience due to increasing render size and nodes moving around as the render effectively reflows.

Consider this:

flowchart TD
    A --> B
    %% pause
    %% A --> C
    %% pause
    %% B --> D
    %% pause
    %% C --> D

flowchart TD
    A --> B
    %% pause
    A --> C
    %% pause
    B --> D
    %% pause
    %% C --> D

flowchart TD
    A --> B
    %% pause
    A --> C
    %% pause
    B --> D
    %% pause
    C --> D

[kiernan]

Perhaps we could render the full thing, but use different styles to hide parts that shouldn't be revealed yet.