A pure-Dart port of mermaid.js with native Flutter rendering.
mermaid dart is a pure-Dart port of mermaid.js. It detects, parses and lays out the same diagram source into a backend-agnostic render scene, then paints that scene natively - no JavaScript, no WebView, no SVG round-trip. This page renders samples side by side: the original mermaid.js in your browser (left) and mermaid dart inside an embedded Flutter island.
The TeX math labels in diagrams are rendered with katex - a Dart port of KaTeX that brings its own three-way renderer comparison. mermaid dart reuses that backend-agnostic box tree to lay out math natively in Flutter.
The ELK layout option is powered by elk - a standalone, Dart port of the Eclipse Layout Kernel's layered algorithm (orthogonal edges, clusters, no elkjs, no JavaScript). It's mostly an approximation. It is reusable on its own for any graph layout, such as package dependency visualizations. Explore it on the ELK layout page.
The Flutter preview uses native Mermaid colors by default. Enable Material theme to map the active Material color and text roles into every Mermaid diagram family. The light/dark button switches brightness independently.
Add mermaid_flutter
from pub.dev to use the same widgets in your app.
MermaidView(
source: source,
theme: MaterialMermaidTheme.fromTheme(
Theme.of(context),
),
)Nodes connected by edges for processes, decisions and flows — the most common Mermaid diagram.