# ChatMCP Markdown Rendering Capabilities: LaTeX, Mermaid, and HTML Support > Discover ChatMCP's powerful markdown rendering. Effortlessly display LaTeX equations, Mermaid diagrams, and raw HTML with its custom extension layer. Enhance your technical content. - Repository: [刀刀/chatmcp](https://github.com/daodao97/chatmcp) - Tags: deep-dive - Published: 2026-02-28 --- **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: ```dart generators: [ linkGenerator, latexGenerator, codeBlockGenerator, // … ] ``` Corresponding syntax parsers are injected into the markdown parser: ```dart 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:** ```dart 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:** ```dart 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'''

Custom HTML Block

This paragraph is rendered by an embedded WebView.

'''; 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.