Skip to content

feat: one-click fix mermaid error#10874

Draft
EurFelux wants to merge 22 commits intov2from
feat/fix-mermaid
Draft

feat: one-click fix mermaid error#10874
EurFelux wants to merge 22 commits intov2from
feat/fix-mermaid

Conversation

@EurFelux
Copy link
Copy Markdown
Collaborator

What this PR does

2025-10-22.07-27-13.mov

Fixes #10834

Why we need it and why it was done in this way

The following tradeoffs were made:

The following alternatives were considered:

Links to places where the discussion took place:

Breaking changes

If this PR introduces breaking changes, please describe the changes and the impact on users.

Special notes for your reviewer

Checklist

This checklist is not enforcing, but it's a reminder of items that could be relevant to every PR.
Approvers are expected to review this list.

Release note


Implement a custom hook to track pending states with cache persistence. The hook provides methods to set and check pending status for given IDs, with automatic cleanup of undefined values.
- Add new general-purpose spinner component with multiple variants
- Rename old Spinner component to SearchSpinner to clarify its purpose
- Update lucide-react dependency to v0.546.0
Introduce a new BlockingOverlay component to handle modal overlays with click handling and visibility control. The component includes click event propagation prevention and supports custom styling through className.
- Add mermaid_fix tool to handle and fix mermaid diagram errors
- Implement pending state tracking for async operations
- Add error callback to MermaidPreview component
- Update i18n strings for mermaid error handling
- Extend cache schema with pending_map for task tracking
- Add mermaid_fix translations for all supported languages
- Complete missing translations marked with "[to be translated]"
- Convert array to object for accessibility description in zh-cn
Add setError to the dependency array to prevent stale closure issues
Ensure the correct tool ID is used for cleanup and wrap fixCode in arrow function to maintain context
Move event processing function to a reusable hook to improve code reuse and enable promise-based completion tracking
Move code block editing functionality from Messages component to useEditCodeBlock hook for better reusability and maintainability
The event form cannot obtain handler completion status via promise. Plan to use useContext for topicId and useEditCodeBlock for editing.
Update test snapshots to reflect changes in component styling and structure
Add mock for @cherrystudio/ui components in CodeBlock tests
@alephpiece
Copy link
Copy Markdown
Collaborator

alephpiece commented Oct 22, 2025

Note

This issue/comment/review was translated by Claude.

I have a few questions:

  • Is the scope limited to cases where mermaidjs reports errors? Or does it also include cases where there are no errors but the syntax is indeed incorrect based on the intent?
  • Should we use quick model to fix "incorrect" mermaid code generated by any model?
  • The "incorrect" code generated by the model itself doesn't seem very representative?

We could create more practical test cases to try, referring to:


Original Content

有几个疑问:

  • 适用范围是 mermaidjs 报错的情形吗?还是也包括没有报错但从意图来说的确有语法错误的情况?
  • 使用 quick model 来解决任意模型生成的错误 mermaid 代码吗?
  • 模型自己生成的错误代码似乎没有代表性?

可以多构造几个实际的测试用例试试,参考:

@EurFelux EurFelux linked an issue Oct 22, 2025 that may be closed by this pull request
4 tasks
Clean up code by removing unnecessary setError parameter that was not being used effectively. This simplifies the component interfaces and reduces potential error handling confusion.
@EurFelux
Copy link
Copy Markdown
Collaborator Author

EurFelux commented Oct 22, 2025

Note

This issue/comment/review was translated by Claude.

  1. The fix button only appears when the MermaidPreview component throws an exception. However, both mermaidError || renderError are currently used together. I'm not entirely sure if we only need to capture syntax errors in the code itself, whether we should just use mermaidError without renderError. In any case, both are being used now.

Cases where there are indeed syntax errors based on intent

This situation is like when writing code has logical errors - the compiler won't report errors for you. This doesn't fall within the scope of this feature's fixes.

  1. I believe that using the quick model is sufficient for the task of fixing mermaid code based on error messages.

  2. I've tried some test cases and it's indeed unstable. I'll optimize the prompt further.


Original Content
  1. 需要MermaidPreview组件有抛出异常才能触发修复按钮出现。不过现在是同时用了mermaidError || renderError,我不太确定如果只要捕获代码本身语法错误的话,是不是只需要mermaidError而不需要renderError,总之都用上了。

从意图来说的确有语法错误的情况

这种情况就像是,写程序有逻辑错误时,编译器不会为你报错一样。这个不属于该功能的修复范围。

  1. 我判断对于根据报错信息修复mermaid代码这个任务只要用quick model就足够了

  2. 弄了一些用例测了下,确实不稳定,我再优化下prompt。

Clarify output format requirements and add detailed steps for error analysis
Provide concrete examples for both fixable and unfixable cases
@alephpiece
Copy link
Copy Markdown
Collaborator

alephpiece commented Oct 22, 2025

Note

This issue/comment/review was translated by Claude.

Is the quick model more of a smaller, faster model? Is it reliable to have it fix errors made by conversation models?


Original Content

quick model 可能更多是个较小较快的模型?让它修复对话模型制造的错误靠谱吗?

@EurFelux
Copy link
Copy Markdown
Collaborator Author

EurFelux commented Oct 22, 2025

Is the quick model more of a smaller, faster model? Is it reliable to have it fix errors made by conversation models?

Note

This issue/comment/review was translated by Claude.

Providing error information and code as context is actually not a very difficult task. I can complete it using smaller models like qwen-flash. However, if the error information itself is not clear, using better models won't improve the results much. Inserting additional rules in the prompt might yield better results.


Original Content

提供错误信息和代码作为上下文的话其实并不是很困难的任务,我用qwen-flash这样的小模型也能完成。但如果错误信息本身不清晰的话,换更好的模型效果也不佳。在prompt额外插入一些规则或许效果会更好。

@DeJeune
Copy link
Copy Markdown
Collaborator

DeJeune commented Oct 22, 2025

Note

This issue/comment/review was translated by Claude.

The best approach is to introduce artifacts. Whenever users request to generate mermaid-compliant diagrams, call the built-in mermaid prompt to generate them. The results might be better than fixing errors afterward.


Original Content

最佳的方式是引入制品,只要用户要求生成符合mermaid的图,就调用内置的mermaid提示词去生成。效果可能比反过来修复错误好点

@EurFelux
Copy link
Copy Markdown
Collaborator Author

The best approach is to introduce artifacts. Whenever users request to generate mermaid-compliant diagrams, call the built-in mermaid prompt to generate them. The results might be better than fixing errors afterward.

As an extra page?

@DeJeune
Copy link
Copy Markdown
Collaborator

DeJeune commented Oct 28, 2025

The best approach is to introduce artifacts. Whenever users request to generate mermaid-compliant diagrams, call the built-in mermaid prompt to generate them. The results might be better than fixing errors afterward.

As an extra page?

Not needed; simply split a area in the chat interface for this purpose. This area can also be used to render html/pdf, etc.

@EurFelux
Copy link
Copy Markdown
Collaborator Author

The best approach is to introduce artifacts. Whenever users request to generate mermaid-compliant diagrams, call the built-in mermaid prompt to generate them. The results might be better than fixing errors afterward.

As an extra page?

Not needed; simply split a area in the chat interface for this purpose. This area can also be used to render html/pdf, etc.

That sounds like a independent module. What's the design?

@DeJeune
Copy link
Copy Markdown
Collaborator

DeJeune commented Oct 28, 2025

#6397

@DeJeune
Copy link
Copy Markdown
Collaborator

DeJeune commented Oct 28, 2025

we can reuse a component introduced in this PR #5193 when it is merged

@EurFelux
Copy link
Copy Markdown
Collaborator Author

EurFelux commented Oct 28, 2025

Note

This issue/comment/review was translated by Claude.

It's great to create and show mermaid diagrams with pre-defined prompt in the panel. But the quick fix tool in code blocks is still fine, right?

Or should we move all the interactions to the canvas?


Original Content

It's great to create and show mermaid diagrams with pre-defined prompt in the panel. But the quick fix tool in code blocks is still fine, right?

Or should we move all the interactions to the canvas?

@EurFelux EurFelux marked this pull request as draft October 28, 2025 14:05
@0xfullex 0xfullex added this to the v2.0.0 milestone Oct 29, 2025
@EurFelux EurFelux linked an issue Dec 7, 2025 that may be closed by this pull request
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: fix ai-generated mermaid code [功能]: mermaid流程图智能修复功能

5 participants