Discourse Pele

Customization Theme component
, ,

AI-generated summary

Discourse Pele is an official theme component that renders Mermaid diagrams using Pele, offering performance improvements of up to 500x speed and 6x smaller size with no external dependencies. It supports CSS variables for theming and is available on Pro, Business, and Enterprise plans.

Users can insert diagrams via the composer’s gear menu or by using standard Mermaid syntax in posts and chat messages. The component is compatible with existing Discourse Mermaid diagrams, requiring no changes to current code. Features include fullscreen viewing with zoom controls. Note that graphs are not rendered in emails.

Support, bug reports, UX feedback, and feature requests should be posted in the respective Meta categories tagged with pele. The repository is available at github.com/discourse/discourse-pele-theme-component.

1
:discourse2: Summary Discourse Pele renders Mermaid diagrams with Pele: 6x smaller, up to 500x faster, no dependencies, theme-able with CSS variables.
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-pele-theme-component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Usage

```mermaid
flowchart LR
  A --> B
```

flowchart LR
  A --> B

Diagrams can also be inserted from the composer’s :gear: menu → Diagram, and opened fullscreen with zoom.

Works in posts and chat messages. Uses the same syntax as Discourse Mermaid, so existing diagrams render without any changes.

Learn more about the supported diagrams on the official website: https://pele.run

:warning: Graphs won’t be rendered in emails

Translations

Name Default
diagram Diagram
view_fullscreen View fullscreen
rendering_error Unable to render diagram: %{message}
zoom_in Zoom in
zoom_out Zoom out
reset_zoom Reset zoom

:discourse2: Hosted by us? Theme components are available to use on our Pro, Business and Enterprise plans.

5 Likes