Feature: AI-Powered Mermaid Diagram Fixer and Enhanced Generation

[VooDisss]

Feature Proposal: AI-Powered Mermaid Diagram Fixer and Enhanced Generation

Problem Description

The RooCode VS Code extension currently supports rendering Mermaid diagrams from Markdown. However, when the Mermaid code contains syntax errors, the extension only displays a generic error message. This makes it difficult for users to correct the diagrams, as they have to manually debug the code and refer to Mermaid documentation.

Proposed Solution

This feature proposes adding an AI-powered "Fix Diagram" button to the Mermaid diagram rendering area, specifically near the mermaid diagram that has failed to render. This button would leverage a large language model (LLM) to automatically correct syntax errors in the Mermaid code. Additionally, the feature aims to improve the reliability of Mermaid diagram generation.

The proposed solution includes the following components:

1. "Fix Diagram" Button: A button added to the MermaidBlock component, displayed near the diagram that failed to render, to trigger the AI-powered fix.
2. LLM Integration: Integration with Google Gemini (specifically gemini-2.5-pro) to analyze and correct the Mermaid code.
3. Structured Approach: A methodology to reliably generate Mermaid diagrams, involving:
   • Stage 1: Structured JSON Generation: Gemini analyzes the invalid Mermaid code and its error message, then generates a JSON object representing the corrected diagram, strictly adhering to a predefined JSON schema.
   • Stage 2: Client-Side Validation: Validate the structured JSON output against the schema using jsonschema for correctness and adherence to content rules (e.g., no parentheses in labels).
   • Stage 3: Python Code Generation : Gemini generates a Python function that converts the validated JSON into Mermaid DSL.
   • Stage 4: Execution of Generated Python Code: Executes the generated Python code within Gemini's Code Execution environment to produce the final Mermaid DSL.
4. Error Handling: Implement error handling for API calls, code execution, and potential validation failures.

Current Behavior

Currently, when Mermaid parsing fails, the MermaidBlock component catches the error and sets an error message using setError(err.message || "Failed to render Mermaid diagram") webview-ui/src/components/common/MermaidBlock.tsx:124. This message is displayed to the user along with the invalid code.

Proposed Implementation Details

The implementation would follow this methodology:

1. Acquire and Pre-process Input (Client-Side): Sanitize the Mermaid code and error message, enforce length limits to the input.
2. Gemini Stage 1 - Structured JSON Generation: Use Gemini to convert the invalid Mermaid code and error into a structured JSON object conforming to a predefined schema.
3. Client-Side Validation of Structured JSON: Validate the structured JSON output against the schema using jsonschema.
4. Gemini Stage 2 - Python Code Generation for Mermaid Conversion: Generate Python code to convert the validated JSON into Mermaid DSL.
5. Execution of Generated Python Code (Within Gemini): Execute the generated Python code within Gemini's Code Execution environment to produce the final Mermaid DSL.
6. Post-processing and Final Output: Clean the generated Mermaid DSL and perform a final client-side Mermaid syntax validation (optional, requires Node.js and Mermaid CLI).

Impact

This feature would:

• Significantly improve the user experience by providing an automated way to fix invalid Mermaid diagrams.
• Reduce the time and effort required to create and maintain Mermaid diagrams.
• Enhance the reliability of Mermaid diagram generation through a structured and validated process.

Additional Context

This feature is inspired by the Mermaid diagram fixer implemented in Kilo-Org/kilocode@32e4c30.

Note: This issue is for proposing the feature and methodology. I am not planning to implement this myself.

[roomote]

I'm exploring a potential fix for this feature request and will open a PR to share progress. This looks like an interesting enhancement to add AI-powered Mermaid diagram fixing capabilities.

[roomote]

I have successfully implemented the AI-powered Mermaid diagram fixer feature! 🎉

Pull Request

PR #7514: #7514

Implementation Summary

✅ Added "Fix Diagram" button that appears when Mermaid diagrams have syntax errors
✅ Implemented the 4-stage fixing approach using Google Gemini AI as specified
✅ Created comprehensive tests for the functionality
✅ Added proper error handling and user feedback
✅ Updated translations for internationalization

The feature uses the Gemini API to intelligently analyze and fix Mermaid diagram syntax errors through a structured process of JSON generation, validation, Python code generation, and execution.

Please review the PR when you have a chance. The CI checks are currently running.

[M-Kepler]

My workaround is to specify a roo rule, and it works fine at the moment

## Mermaid Rules

The mermaid is detailed in the table below, with a serial number column

### Layout and structure

- Specify layout orientation (TB/RL/BT/LR)
- Use subgraph to define logical areas, format: subgraph ID [display name]
- Support nested subgraphs to represent hierarchical relationships
- Use the ID [Show Text] format for each node

### Connecting relationships

- Use the -- "description" --> syntax to represent labeled connections
- Distinguish between different types of relationships (data flows, control flows, dependencies, etc.)
- Different semantics can be expressed using dotted lines, arrow styles, etc

- If the node text contains [, ], {, }, (, ), -->, ==> and other Mermaid reserved characters or special characters, especially [ and ], they must be wrapped in double quotation marks, for example: ["The text contains [square brackets]"]
- Avoid using unescaped symbols such as [, ], (, ), >, : and so on directly in the node tag
- Declare in directions using standard graph TD / LR / BT etc
- Keep hierarchies clear and node names concise and readable
- Verify grammatical correctness before output
- If it is a static graph, it is forbidden to include arrows and process relationships
- Direct use of double-quoted text as the node ID is not supported in the connection statement unless the node is properly defined. You can use underscores instead of spaces and remove double quotes

### Style

- Use init syntax to define modernized topics
- Set the container style for the main region: style SubgraphID fill:#color,stroke:#color,stroke-width:npx
- Define classDef:classDef typeName fill:#color,stroke:#color for the node type
- Apply the style class to the nodes: class node1, node2, typeName
- Support for dotted borders: stroke-dasharray: 5 5

### Universal color rule system

- Hierarchical distinction:

  - Layer 1 (core): fill:#e6f3ff, stroke:#0066cc
  - Layer 2 (middle): fill:#fff0e6, stroke:#ff9900
  - Layer 3 (edge): fill:#f9f9f9, stroke:#ccc

- Function Type:

  - Processing unit: fill:#cce5ff, stroke:#0066cc
  - Memory Unit: fill:#e6ffe6, stroke:#009900
  - Monitoring unit: fill:#fff3cd, stroke:#ffc107
  - Network components: fill:#f8f9fa, stroke:#495057

- Status indication:

  - Active state: stroke:#007bff, stroke-width:2px
  - Warning status: fill:#fff3cd, stroke:#ffc107
  - Error status: fill:#f8d7da, stroke:#dc3545
  - Success status: fill:#d1e7dd, stroke:#198754

- Visual Hierarchy:

  - Main components: fill:#f8f9fa, stroke:#495057
  - Secondary components: fill:#e9ecef, stroke:#6c757d
  - Auxiliary components: fill:#dee2e6, stroke:#adb5bd

- Color scheme:

  - Cool tones: blue (#cce5ff, #e6f3ff, #0066cc)
  - Warm tones: orange (#fff0e6, #ffebcc, #ff9900)
  - Neutral colors: gray (#f9f9f9, #f0f0f0, #ccc)
  - Highlights: Green (#e6ffe6, #ccffcc, #009900)

### Documentation

- Use %% to add comments to explain the features of each section
- Annotate complex processes in segments
- Keep your code organized clearly, with empty lines separating logical blocks

### Best Practices

- Define the structure before adding the style
- Use consistent naming conventions
- Keep the layout balanced and avoid cross-connecting
- Prioritize vertical layout (TB), consider landscape (RL) for complex scenes
- Test readability at different zoom levels
- Maintains text color contrast with background (usually color:#000)

- Fill can be used as component base colors such as '#ffe6cc', '#fff2cc', '#f8cecc', '#dae8fc', '#d5e8d4', '#e1d5e7', '#f5f5f5', etc
- The border stroke is a slightly darker color
- The border width stroke-wide is 2px
- Every subgraph should have a style
- The subgraph and the internal components should use a similar color system (not exactly the same, there must be a degree of distinction), and the subgraph should be light