feat: Support mermaid graph

[tcx4c70]

[tcx4c70]

An example:

[Aki-community]

I really like this work. I am personally using custom js to support this. May I ask what's the blocker for this pr to be merged?

[tcx4c70]

I really like this work. I am personally using custom js to support this. May I ask what's the blocker for this pr to be merged?

I was struggling with the failing tests and some issues of dependencies for the first few days of the PR. But now I think it's waiting for review.

[Aki-community]

@tcx4c70 Hi. I recently tried your PR and used it for a while. I have two feedbacks wondering if you have insights:

• mermaid graph is rendered/disappeared many times while llm is streaming the response
• generated graph sometimes is difficult to view in dark theme (better in light theme). And sometime it's less convenient than copy/paste the code to another editor because it doesn't support zoom in. Wondering if it's possible (or how to do it) to support adding a widget that offers zoom in/out function similar to how we view mermaid in github.

flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

[willydouhard]

@tcx4c70 Hi. I recently tried your PR and used it for a while. I have two feedbacks wondering if you have insights:

• mermaid graph is rendered/disappeared many times while llm is streaming the response
• generated graph sometimes is difficult to view in dark theme (better in light theme). And sometime it's less convenient than copy/paste the code to another editor because it doesn't support zoom in. Wondering if it's possible (or how to do it) to support adding a widget that offers zoom in/out function similar to how we view mermaid in github.

flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

Thank you for this PR @tcx4c70, have you been able to review these comments?