ChatMCP Markdown Rendering Capabilities: LaTeX, Mermaid, and HTML Support

ChatMCP supports three advanced markdown rendering capabilities—LaTeX mathematical equations, Mermaid diagrams, and raw HTML fragments—through a custom extension layer built on the markdown_widget package that registers specialized generators and syntax parsers in the central Markit widget.

The daodao97/chatmcp repository implements a sophisticated markdown processing pipeline that extends standard Flutter markdown support beyond basic text formatting. Its markdown rendering capabilities leverage custom inline and block syntax definitions paired with widget generators to embed mathematical notation, flowcharts, and arbitrary web content directly within chat interfaces.

Architecture Overview

ChatMCP’s markdown engine is structured around the Markit widget located in lib/widgets/markdown/markit_widget.dart. This widget serves as the entry point that configures a MarkdownGenerator with custom generators and syntax extensions.

The generator receives an array of content handlers:

generators: [
  linkGenerator,
  latexGenerator,
  codeBlockGenerator,
  // …
]

Corresponding syntax parsers are injected into the markdown parser:

inlineSyntaxList: [
  LatexSyntax(),
  // …
],
blockSyntaxList: [
  LatexBlockSyntax(),
  // …
],

This architecture allows the renderer to intercept specific markdown patterns and route them to specialized Flutter widgets.

LaTeX Math Rendering

ChatMCP implements full LaTeX support through custom syntax definitions in lib/widgets/markdown/widgets/latex.dart. The implementation distinguishes between inline and block-level mathematics.

Implementation Details:

• LatexSyntax handles inline equations delimited by single dollar signs ($...$)
• LatexBlockSyntax handles display equations delimited by double dollar signs ($$...$$)
• Parsed content is wrapped in LatexNode objects that build Math.tex widgets using the flutter_math_fork package

Example Usage:

final markdown = r'''
Here is an inline equation: $E = mc^2$.

$$
\int_{0}^{\infty} e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}
$$
''';
Markit(data: markdown);

The inline expression renders within the text flow, while block equations appear as centered, larger formulas with proper mathematical typesetting.

Mermaid Diagram Support

Mermaid diagrams are rendered through the MermaidDiagramView widget defined in lib/widgets/markdown/widgets/mermaid_diagram_view.dart. This implementation uses an embedded WebView approach rather than native Flutter drawing.

Technical Implementation:

• Loads an InAppWebView containing a minimal HTML page
• Injects the Mermaid.js library from a CDN
• Renders the diagram code within the WebView context
• Captures the rendered output as a screenshot for efficient reuse and caching

Example Usage:

final markdown = r'''

```mermaid
graph LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Proceed]
  B -->|No| D[Stop]

'''; Markit(data: markdown);

The diagram renders as a static image within the chat flow, with the `InAppWebView` handling all JavaScript execution and SVG generation.

## Raw HTML Fragment Rendering

For arbitrary HTML content, ChatMCP provides the **`HtmlView`** widget in `lib/widgets/markdown/widgets/html_view.dart`. This capability allows embedding complex layouts, styled content, or interactive elements that exceed standard markdown limitations.

**Key Features:**
- Uses `InAppWebView` for full browser engine capabilities
- Supports inline CSS and JavaScript execution
- Automatically resizes the widget container based on the rendered page height
- Renders arbitrary HTML fragments exactly as specified

**Example Usage:**

```dart
final markdown = r'''
<div style="background:#f0f0f0;padding:10px;">
  <h2>Custom HTML Block</h2>
  <p>This paragraph is rendered by an embedded WebView.</p>
</div>
''';
Markit(data: markdown);

Code Block Routing

The system detects specific language identifiers in fenced code blocks through the code block generator in lib/widgets/markdown/widgets/code.dart. When encountering mermaid or html as the language specifier, the generator forwards the content to the respective view widgets rather than rendering them as standard syntax-highlighted code.

This routing mechanism ensures that:

• ```mermaid blocks trigger MermaidDiagramView
• ```html blocks trigger HtmlView
• Standard code blocks receive traditional syntax highlighting

Summary

ChatMCP’s markdown rendering capabilities extend far beyond standard formatting through three key technical implementations:

• LaTeX Integration: Custom LatexSyntax and LatexBlockSyntax parsers in lib/widgets/markdown/widgets/latex.dart enable mathematical notation using flutter_math_fork
• Mermaid Diagrams: The MermaidDiagramView in lib/widgets/markdown/widgets/mermaid_diagram_view.dart renders diagrams via CDN-loaded JavaScript in an InAppWebView
• HTML Embedding: The HtmlView in lib/widgets/markdown/widgets/html_view.dart supports arbitrary HTML fragments with automatic height adjustment
• Centralized Configuration: All generators and syntax extensions are registered in the Markit widget (lib/widgets/markdown/markit_widget.dart), creating a unified rendering pipeline

Frequently Asked Questions

Does ChatMCP support both inline and block LaTeX equations?

Yes. The implementation in lib/widgets/markdown/widgets/latex.dart includes two separate syntax parsers: LatexSyntax for inline math delimited by single dollar signs ($...$) and LatexBlockSyntax for display math delimited by double dollar signs ($$...$$). Both convert parsed content into Math.tex widgets from the flutter_math_fork package.

How does ChatMCP render Mermaid diagrams securely?

ChatMCP renders Mermaid diagrams using the MermaidDiagramView widget which loads the Mermaid.js library from a CDN within an isolated InAppWebView. The rendered SVG output is captured as a screenshot, allowing the diagram to display as a static image without continuous JavaScript execution in the main application context.

Can ChatMCP render arbitrary HTML with CSS and JavaScript?

Yes. The HtmlView widget in lib/widgets/markdown/widgets/html_view.dart uses an InAppWebView to render raw HTML fragments, including inline CSS styling and JavaScript execution. The widget automatically calculates and adjusts its height based on the rendered content dimensions, ensuring proper layout integration within the markdown flow.

Where are the markdown extensions registered in the codebase?

All markdown rendering extensions are registered in lib/widgets/markdown/markit_widget.dart within the Markit widget class. This file configures the MarkdownGenerator with specific generators (including latexGenerator) and adds custom syntax parsers to both inlineSyntaxList and blockSyntaxList arrays.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}