Pele
Pele is Pele is a lightweight open source library that renders Mermaid diagrams to SVG, themed with CSS variables.. It is ranked #462 on the Design Radar, in Design-to-code, first seen 14 days ago and shared in 2 posts (13.8k views).
Pele · Mermaid diagrams as themeable SVG Pele is a lightweight open source library that renders Mermaid diagrams to SVG, themed with CSS variables . How it works Write Mermaid syntax, Pele renders it to SVG. Try editing the example below. Mermaid 1 flowchart TD 2 A [ Mermaid text ] --> B { Flowchart? } 3 B -- Yes --> C [ Pele ] 4 B -- No --> D [ Mermaid ] 5 C --> E ([ SVG ]) 6 D --> E Pele Open in Playground Use CSS variables to set colors and fonts. Color changes apply without re-rendering. CSS 1 .pele { 2 --pele-bg : #fffcf0 ; 3 --pele-fg : #100f0f ; 4 --pele-muted : #6f6e69 ; 5 --pele-line : #100f0f ; 6 --pele-surface : #f2f0e5 ; 7…
What people said about Pele on X
10 websites every design engineer should bookmark 👇 1 - http://interfaces.dev — Deep dives into UI design, typography, animation and design engineering. 2 - http://squints.app — Inspect spacing, typography, colors and animations on live websites. 3 - http://pro.reactbits.dev — Premium animated React components, UI…
— @neropursue, 7 days ago · 294 likes · see the post
Diagrams, drawn with JavaScript คือเว็บโชว์ไดอะแกรม 4 ภาพสไตล์หนังสือนิทานยุคเก่า ที่ไม่มีไฟล์รูปภาพสักไฟล์ ทุกเส้นถูกวาดสดในเบราว์เซอร์ตอนเราเปิดอ่าน ปากกาเส้นเล็ก สีไม้ ตัวอักษรมือ ค่อยๆ ขึ้นมาทีละ stroke ผมเปิดดูแล้วนั่งมองนานกว่าที่คิด ภาพแรกเป็น radar chart ลมทั้งวันในหุบเขาสมมติ มีกังหันลม หมู่บ้าน…
— @peesamac, 14 days ago · 38 likes · see the post
Alternatives to Pele
- Wonder — We made a simple comparison so you can see the differences yourself!
- web.dev — Web performance and best practices
- hallmark — Open-source AI design skill
- skills — Skills for Designers and Engineers. Contribute to emilkowalski/skills development by creating an account on GitHub.
- CSS-Tricks — CSS-Tricks is where folks around the world come to learn about front-end code and everything related to it, including…
- Taste Skill — Taste Skill gives your AI agent good taste. Open-source skill files that stop AI from generating generic, boring…
Pele in numbers
- Rank on the Design Radar: #462 of 2644
- Shared in 2 posts by 2 accounts: @neropursue, @peesamac
- 13.8k views on those posts
- First seen 14 days ago, last shared 7 days ago
- Pricing seen by AGK Intelligence: open source
- Market: Design-to-code
FAQ
What is Pele?
Pele is a lightweight open source library that renders Mermaid diagrams to SVG, themed with CSS variables. It was first shared on X 14 days ago and is ranked #462 on the Design Radar.
Is Pele free?
It is open source.
Who shared Pele?
2 accounts on X, including @neropursue, @peesamac, in 2 posts totalling 13.8k views.
Every post is read and classified by AGK Intelligence: what it is, which market it belongs to, and whether the link is a real tool. 13.9k posts from 5k X accounts over the last 21 days, 2.6k tools, 17 markets. New posts are collected several times an hour and the full ranking is recomputed every hour — last update 2026-11-08 17:53 UTC. Full method.