Rich Text, LaTeX, & Mermaid
Relevant source files
The following files were used as context for generating this wiki page:
The Conduit project renders model outputs using native Flutter surfaces instead of standard web views. This system processes Markdown to display syntax-highlighted code, LaTeX mathematical formulas, and Mermaid diagrams directly within the mobile application.
The rendering pipeline transforms raw text from the model into a block model. It uses the conduit_markdown package for preprocessing and custom syntax handling, ensuring compatibility with mobile Flutter renderers and desktop DOM renderers.
Sources: README.md:162-171, packages/conduit_markdown/pubspec.yaml:1-8
Markdown & Rich Text Architecture
Conduit handles Markdown through a multi-layered approach. The conduit_markdown package provides pure-Dart preprocessing and defines custom syntaxes used by the project. The application utilizes the markdown package for core parsing and flutter_highlight for syntax highlighting within code blocks.
Component Overview
| Component | Function |
|---|---|
conduit_markdown | Preprocesses text and implements custom Conduit syntaxes. |
markdown | Provides the base Markdown parsing engine. |
flutter_highlight | Renders syntax-highlighted code blocks with copy and preview support. |
parchment | Backs the Fleather note editor with document model codecs. |
Sources: packages/conduit_markdown/pubspec.yaml:1-15, pubspec.yaml:57-61, pubspec.yaml:113-115, README.md:164-165
Data Flow for Text Rendering
The following diagram illustrates how raw model output is converted into rendered UI components.
The pipeline ensures that complex structures like code and math are separated from standard text for specialized rendering.
Sources: packages/conduit_markdown/pubspec.yaml:1-8, README.md:162-171
LaTeX Mathematical Rendering
Conduit supports LaTeX and mathematical notation through the flutter_tex library. This allows the display of complex equations within chat transcripts and notes. The system includes dedicated assets for styling and logic to support TeX rendering in a mobile environment.
TeX Assets and Dependencies
The project includes specific CSS and JavaScript files to support TeX rendering within the Flutter environment:
assets/flutter_tex.css: Provides styling for mathematical formulas.assets/flutter_tex.js: Contains JavaScript logic required by the TeX renderer.flutter_texpackage: The primary dependency for mathematical typesetting.
Sources: pubspec.yaml:108, pubspec.yaml:166-167, assets/flutter_tex.css, assets/flutter_tex.js
LaTeX Implementation Mapping
| File Path | Role |
|---|---|
lib/shared/widgets/markdown/renderer/latex_preprocessor.dart | Identifies and prepares LaTeX blocks for rendering. |
assets/flutter_tex.js | Executes the math-to-visual transformation logic. |
pubspec.yaml | Declares flutter_tex: ^5.2.6 as a core dependency. |
Sources: tool/platform_ui_allowlist.yaml:498-502, pubspec.yaml:108, assets/flutter_tex.js
Mermaid Diagram Rendering
Conduit renders Mermaid diagrams natively using a dedicated internal renderer. This implementation avoids the overhead of a general-purpose web browser for simple architectural or flow visualizations.
Mermaid Core and Flutter Packages
The system is divided into two distinct internal packages located in the third_party/ directory:
- mermaid_core: The core logic for parsing and representing Mermaid structures.
- mermaid_flutter: The Flutter-specific implementation for drawing the diagrams as native widgets.
Sources: pubspec.yaml:69-73, pubspec.yaml:81-85
Rendering Process
This sequence avoids the use of external web views by keeping the parsing and painting logic within the Dart/Flutter environment.
Sources: pubspec.yaml:69-73, README.md:162-171, packages/conduit_markdown/pubspec.yaml:1-8
Technical Specifications
The rendering system must remain compatible with multiple compilation targets, specifically supporting dart compile js for desktop DOM rendering and standard AOT compilation for mobile.
Configuration and Constraints
- Target Compatibility: Preprocessing must stay compilable with
dart compile js. - Platform UI Seam: The project is migrating existing UI uses to a "platform UI seam" to better handle adaptive Material and Cupertino interfaces.
- Asset Bundling: The
flutter_texassets are explicitly bundled in thepubspec.yamlto ensure availability during runtime.
Sources: packages/conduit_markdown/pubspec.yaml:6-8, tool/platform_ui_allowlist.yaml:4-10, pubspec.yaml:166-167
Conduit provides a robust, native rendering engine that handles complex data types like LaTeX and Mermaid diagrams without relying on traditional web-wrapped shells. By utilizing specialized Dart packages like conduit_markdown and mermaid_core, the application maintains high performance and UI consistency across mobile and desktop platforms.