Text. Structure. Diagram.

Pele Mermaid Diagram Renderer Demos

Explore 33 diagram types. Edit the source, adjust the details, and save a diagram of your own.

Choose a starting point

Find a diagram

Diagram / example

Loading renderer

Live preview

Mermaid source

Canvas & appearance

Color palette

Diagram typeface

Font size 15 px

Diagram padding 24 px

Corner radius 6 px

Adapt diagram direction to available width Resolve custom icons Enable diagram links

Exports include the current colors and typeface.