pele_dart

pele_dart renders Mermaid diagrams to SVG in pure Dart. It is fast, synchronous, has zero browser or JavaScript dependencies, and outputs both themeable CSS-variable SVG and static SVG 1.1 ready for Flutter.

Ported 1:1 from Pele (obsidianmd/pele) by Steph Ango and the Obsidian team.

Highlights

• Pure Dart: Synchronous layout and SVG rendering with zero WebView, zero JavaScript runtime, and zero Flutter SDK dependency in the core package.
• 100% Upstream Parity: Version-locked 1:1 to obsidianmd/pele across every supported diagram family and test suite (see Upstream Tracking).
• 2.2x Faster in Native AOT: Renders the full showcase corpus in ~10.2 ms (43.8 µs mean per diagram)—up to 4.5x faster on complex diagrams than JavaScript (see Performance Benchmarks).
• Flutter & Web Ready: Emit static SVG 1.1 attributes for Flutter's vector_graphics_compiler (SvgOutputMode.flattened) or theme-reactive CSS variables (SvgOutputMode.cssVariables).
• Safe by Default: Escapes diagram text, filters unsafe URLs, and enforces configurable size and complexity budgets.

Visual Showcase

Every diagram below is a standalone SVG generated directly by pele_dart in pure Dart.

→ Browse the Full Visual Diagram Gallery (All Supported Diagram Families)

Flowchart

Sequence Diagram	Class Diagram

Custom Styling & Palettes

Use the built-in light and dark palettes, supply a custom PelePalette, or style nodes with Mermaid classDef directives (see Theming & Customization):

Default Light Palette

Catppuccin Mocha Palette

Quick Start

dart pub add pele_dart

Pure Dart

import 'package:pele_dart/pele_dart.dart';

void main() {
  const source = '''
flowchart LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Ship It]
  B -->|No| D[Revise]
''';

  final RenderResult result = render(
    source,
    const RenderOptions(
      outputMode: SvgOutputMode.flattened,
      palette: PelePalette.light,
    ),
  );

  print('${result.type} (${result.width}x${result.height})');
  print(result.svg);
}

Flutter Vector Graphics

final result = render(
  mermaidSource,
  RenderOptions(
    outputMode: SvgOutputMode.flattened,
    palette: isDark ? PelePalette.dark : PelePalette.light,
  ),
);

final Uint8List vectorBytes = encodeSvg(
  xml: result.svg,
  debugName: 'mermaid_${result.type}',
  enableClippingOptimizer: false,
  enableMaskingOptimizer: false,
  enableOverdrawOptimizer: false,
);

Documentation

Guide	Description
API User Manual	Complete reference for render, parse, detectType, supports, PelePalette, PeleError, custom resolvers, and Flutter integration.
Visual Diagram Gallery	Rendered SVG outputs and Mermaid source for all supported diagram families—Flowchart, Sequence, Class, State, ER, C4, Architecture, Sankey, XY Chart, Gantt, Kanban, Mindmap, Radar, Timeline, and more.
Performance Benchmarks	Native Dart AOT vs JavaScript benchmarks across the full gallery corpus and phase breakdowns.
Pele Studio Guide	Guide to Pele Studio, the macOS 3-way visual and SVG diff workbench.

Architecture & Maintainer Docs: Architecture & Internals · Upstream Tracking · Upstream Sync Guide · Contributing Guide

Credits & License

pele_dart is a pure-Dart port of Pele (obsidianmd/pele), created by Steph Ango and the Obsidian team. All credit for the original parser architecture, deterministic layout algorithms, and visual design system belongs to the upstream authors.

• pele_dart: Copyright (c) 2026 Tony Kinnis — MIT License.
• Upstream obsidianmd/pele: Copyright (c) 2026 kepano — MIT License.
• Built-in Icons: Includes icon paths from Lucide — ISC License.