Pele is a specialized rendering engine designed to convert Mermaid diagrams—a popular markdown-based tool for creating flowcharts, sequence diagrams, and Gantt charts—into SVG (Scalable Vector Graphics) format. Unlike many standard Mermaid implementations that may require a full browser environment or complex runtime dependencies to calculate layouts, Pele is built to be small, synchronous, and highly portable. It is designed to work directly in environments where heavy dependencies are undesirable, such as in specialized documentation tools or automated workflows.
The image serves as a promotional graphic highlighting the high-performance nature of the Pele rendering engine.
The core mechanism of Pele centers on its independence from heavy runtimes and its use of CSS variables for styling. By leveraging CSS variables, Pele allows users to customize colors, fonts, and border radii dynamically. Because these styles are handled via CSS rather than hardcoded into the SVG generation process, the diagrams can adapt to theme changes instantly without requiring a re-render of the underlying geometry. The tool supports every diagram type built into Mermaid version 12.1.0, and its parsers are validated against Mermaid's official parser specifications using differential fuzzing to ensure high accuracy.
While Pele offers significant performance benefits and ease of integration, it operates with specific architectural trade-offs. To maintain its small footprint and synchronous nature, it uses its own layout engine and visual style rather than mirroring the exact rendering of the official Mermaid library. This means that while it is compatible with Mermaid's syntax, the final visual output may differ slightly in aesthetic from the standard MermaidJS output. Additionally, for developers concerned with bundle size, Pele provides a modular architecture that allows for the registration of individual diagram types or lazy loading, ensuring that only the necessary components are included in the final application.",