A pure-Dart port of mermaid.js with native Flutter rendering — same source, side by side with the original.
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 each sample two ways: the original mermaid.js in your browser (left) and mermaid dart inside an embedded Flutter web view (right), so any difference is obvious at a glance.
The TeX math labels in diagrams are rendered with katex — the same pure-Dart port of KaTeX that powers 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, pure-Dart port of the Eclipse Layout Kernel's layered algorithm (orthogonal edges, clusters, no elkjs, no JavaScript). It is reusable on its own for any graph layout, such as package dependency visualizations. Explore it on the ELK layout page.
Nodes connected by edges for processes, decisions and flows — the most common Mermaid diagram.