Rendering AI-Generated Mermaid Diagrams to Product Quality: Pele Fills the Last Piece of Documentation Automation

The number of Mermaid diagrams that AI coding agents include in their outputs is rapidly increasing. However, default renderers struggle to handle themes and styles in detail, so using them directly in documents and product UI has limitations. Recently released Pele solves this problem by converting Mermaid syntax into SVG that can be themed with CSS variables. As a result, diagrams generated in Vibe Coding workflows can be turned into reusable assets with consistent branding.

Why AI Coding Tools Chose Mermaid as a Default Language

AI-based diagram generation tools are racing to provide features that convert text descriptions into Mermaid code. The flow of generating sequence diagrams, flowcharts, ERDs, and even C4 architecture diagrams from a single plain-text line has become familiar. Because Mermaid is a text-based syntax that fits inside Markdown code blocks, AI agents can generate it naturally, and developers can easily track changes through diffs and version control.

In practice, when doing vibe coding, agents often attach architecture diagrams as Mermaid code blocks in PR descriptions or team wikis. The problem is that the way these code blocks are rendered varies. The default mermaid.js renderer generates SVG, but styles are hardcoded inline, so embedding them in documents or products often clashes with brand colors. Without separating the presentation layer, even the best diagrams produced by AI are hard to use as real assets.

The Presentation Layer Gap Left by mermaid.js Default Rendering

mermaid.js is the de facto standard tool for rendering Mermaid code into SVG in the browser, but theme customization is cumbersome. To apply dark mode, corporate brand colors, or a specific font family, you often need to manipulate JavaScript configuration objects or directly override classes inside the generated SVG. This leads to inconsistent styles across teams, and diagrams generated by AI agents end up scattered in different looks across documents.

The perspective needed here is to keep Mermaid code as content and separate presentation into its own layer. If you can leave the code unchanged and control only the rendered output with CSS variables, the same diagram can be displayed in dark mode and light mode, each tailored to the brand. The tool that precisely targets this need is Pele.

Pele: A Lightweight Renderer That Produces Themeable SVG

Pele is a lightweight library that renders Mermaid syntax into themeable SVG. According to public information, its bundle size is about six times smaller than mermaid.js, it renders 100 to 500 times faster, and it has no external dependencies. It is compatible with the latest Mermaid syntax, so you can input AI-generated diagrams as they are.

Its most important feature is that theming is applied through CSS variables. Developers can inherit the colors, stroke widths, and font variables defined in their design system directly into Pele's output SVG. Because you can switch dark mode and apply branding with CSS alone, without separate JavaScript configuration, it's easy to integrate into product UI or team docs. This means you can keep the Mermaid code while separating only the presentation layer.

Practical Scenarios for Integrating into Vibe Coding Pipelines

For example, suppose an AI coding agent has generated a system architecture diagram as a Mermaid code block in a PR description. In the CI stage, you can build a script that extracts this code block, renders it to SVG with Pele, and inserts it into a team wiki or PR body with a consistent style. This eliminates the problem of mixed styles across PRs and allows you to save diagrams as files for reuse.

Furthermore, in vibe coding environments where documentation often accumulates before code, Pele plays a role beyond a simple renderer. Because it converts AI agent-generated diagrams into well-organized SVG assets with a proper presentation layer, teams can immediately incorporate results into wikis and products without the effort of redrawing documents or fixing styles. This is a key step in turning agent outputs from one-off text into continuously manageable assets.

Conclusion: The Last Puzzle Piece in Turning Agent Outputs into Assets

AI-generated Mermaid diagrams are now plentiful in quantity, but there was still a gap in presentation and management. Pele fills this gap with themeable SVG rendering, allowing developers to achieve both reusability and branding while preserving the Mermaid code. The pipeline from diagram generation to document integration in Vibe Coding workflows becomes much smoother.

However, rendered SVGs only become real assets when people review them and manage their versions. If your team wants to comfortably review AI-generated diagrams and analyses and store each save as an immutable version, a human-in-the-loop review layer like md-log is useful. When Pele handles the presentation layer and md-log handles review and archiving, the last puzzle piece of documentation automation is complete.

References

• Mermaid diagrams: an AI skill for project management
• AI Diagram Generator | MermaidViewer
• AI Flowchart Generator — Text to Mermaid Diagrams
• Pele · Mermaid diagrams as themeable SVG
• kepano on X: "This is Pele, my new rendering library for diagrams and charts, compatible with the latest Mermaid syntax. - 100-500× faster than mermaid.js - 6× smaller bundle - No dependencies - Easy to theme - Responsive to device width In pursuit of making Obsidian insanely fast and cohesively… / X
• Pele – Mermaid diagrams as themeable SVG | Hacker News
• kepano on X: "Pele renders Mermaid diagrams faster than you'd run from a volcano! Read the docs and try the playground: https://t.co/z0sKkAAlXL" / X
• Obsidian on X: "Pele is a fast, beautiful, open source renderer for Mermaid diagrams we created for the next version of Obsidian. You can already try it in the Pele playground and integrate it into your own apps." / X
• Octagonal typefaces