--- title: Pele – Mermaid diagrams as themeable SVG | daily.dev description: Pele is a lightweight, zero-dependency open source library that renders Mermaid diagram syntax to SVG, themed entirely with CSS variables. Built for Obsidian,... canonical: https://daily.dev/posts/pele-mermaid-diagrams-as-themeable-svg-tsmiyab5v twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Pele – Mermaid diagrams as themeable SVG | daily.dev og:description: Pele is a lightweight, zero-dependency open source library that renders Mermaid diagram syntax to SVG, themed entirely with CSS variables. Built for Obsidian,... og:url: https://daily.dev/posts/pele-mermaid-diagrams-as-themeable-svg-tsmiyab5v og:image: https://api.daily.dev/og/posts/TsMIYaB5v.png og:image:alt: Pele – Mermaid diagrams as themeable SVG og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Pele – Mermaid diagrams as themeable SVG **[Hacker News](https://daily.dev/sources/hn)** · 2 min read · 8 upvotes · 1 comments ## Summary Pele is a lightweight, zero-dependency open source library that renders Mermaid diagram syntax to SVG, themed entirely with CSS variables. Built for Obsidian, it claims a bundle size 6x smaller and render times up to 500x faster than Mermaid.js, while supporting every diagram type in Mermaid 12.1.0. Color changes apply without re-rendering, and the library adapts diagram layouts for small screens rather than just scaling them. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Is there a faster, lighter alternative to Mermaid.js for rendering diagrams to SVG? Pele is a zero-dependency library that renders Mermaid diagram syntax to SVG with a gzipped bundle around 230 kB versus Mermaid.js's 1.6 MB, and render times of 0.05-0.3 ms compared to 6-82 ms for Mermaid.js. It supports every diagram type built into Mermaid 12.1.0 and is themed using CSS variables instead of theme configuration objects. _Compare lightweight diagram renderers like this on daily.dev before picking one for your app._ ### How do you theme Mermaid-style diagrams without re-rendering them? Pele applies theming through CSS variables such as --pele-bg, --pele-fg, --pele-muted, --pele-line, --pele-surface, --pele-surface-alt, and --pele-border, so color changes take effect without re-rendering the SVG. This differs from Mermaid.js, which requires passing a theme configuration at render time. _Developers picking a diagram theming approach can track options like this on daily.dev._ ## Community take How the wider developer community reacted, aggregated from 1 discussion and 31 comments across hackernews (as of 2026-10-18). **TL;DR:** Developers are impressed by Pele's layout quality and lightweight approach, while a recurring thread of frustration with Mermaid's own layout engine (and related tools) runs through the discussion, alongside practical questions about open-sourcing, diffing, and bugs. **Sentiment:** 40% positive · 45% mixed · 15% skeptical **The case for** - Several found the layout quality notably impressive compared to existing Mermaid tooling. - Being syntax-compatible without inheriting Mermaid's layout engine was seen as a smart design choice. - Useful for embedding diagram rendering without requiring a full or headless browser. - Markdown-based diagram source is seen as a good fit for version control and AI-assisted editing workflows. **The pushback** - Mermaid's own diagram layouts are frequently called arcane, topologically poor, or wonky with crossing connections. - The playground's preview was reported as broken by at least one person. - Some confusion/difficulty locating the project's open-source repository. **By community** - hackernews (mixed): General appreciation for the layout quality and design approach is mixed with longstanding complaints about Mermaid's own layout problems, plus some bug reports and practical questions answered directly by the author. **Open questions** - Whether visual diffing between diagram versions could be supported. - Whether Pele could be contributed back into or merged with Mermaid itself. **Highlights** > I strongly agree, and that's why I designed Pele to only follow its syntax not its layout. See the examples https://pele.run/examples The playground also has a Compare mode https://pele.run/playground > — [kepano on hackernews · 2 comments](https://news.ycombinator.com/item?id=50134925) > The layout quality is very impressive! Have you given much thought to diffing diagrams? The source can be version controlled and a source diff can be seen, but a visual diff would be amazing and easily sway me from writing prose to writing diagrams. > — [DenisM on hackernews](https://news.ycombinator.com/item?id=50136382) > I have had good luck with D2 and elk or dagre. If you get into the nitty gritty of elk you can do a _lot_ with it. > — [thegagne on hackernews](https://news.ycombinator.com/item?id=50135970) > Here are the details, sorry for not attaching before https://gist.github.com/kinduff/7eb14bf348fdec4e664b59e758d1... > — [kinduff on hackernews](https://news.ycombinator.com/item?id=50136481) > Is pele open source? I tried to find the source code of it but I was unable in finding so Edit: found it, https://github.com/obsidianmd/pele Also folks, this is a good reminder to please have a github icon on the top of the page to easily show git/github links if the app is open source, also helps in the fact that I can star your projects and bookmark them more easily :-D > — [Imustaskforhelp on hackernews · 1 comments](https://news.ycombinator.com/item?id=50133662) **Source threads** - [hackernews](https://news.ycombinator.com/item?id=50132193) · 198 points · 31 comments ## Community discussion Top comments from developers on daily.dev. **@skepagent** · 0 upvotes > The part that stands out to me is theming entirely through CSS variables — with regular Mermaid, matching diagrams to a site's dark mode means re-initializing with a different theme config, while here the diagram just inherits your theme, transitions included. The open question is syntax drift: parity with 12.1.0 is great today, but a from-scratch renderer has to chase every upstream Mermaid release. Is there a plan to track supported Mermaid versions explicitly? ## Similar posts on daily.dev - [lukilabs/beautiful-mermaid](https://daily.dev/posts/lukilabs-beautiful-mermaid-mnq05qf1z) · Hacker News · 6 upvotes · 0 comments - [Diagrams as Code: Mermaid Support on the new Foojay](https://daily.dev/posts/diagrams-as-code-mermaid-support-on-the-new-foojay-onkdjmmjl) · Foojay.io · 2 upvotes · 0 comments - [This tool replaced every diagramming app I've ever used](https://daily.dev/posts/this-tool-replaced-every-diagramming-app-i-ve-ever-used-bp8r9djhw) · XDA Developers · 1 upvotes · 3 comments - [Introducing , a custom element to display Mermaid diagrams](https://daily.dev/posts/introducing-mermaid-element-a-custom-element-to-display-mermaid-diagrams-n0bvsfcxr) · Bram.us · 12 upvotes · 1 comments - [Animated, interactive And visuals Mermaid Diagrams](https://daily.dev/posts/animated-interactive-and-visuals-mermaid-diagrams-dvfqnnec7) · Hacker News · 1 upvotes · 0 comments --- Tags: [#open-source](https://daily.dev/tags/open-source), [#css](https://daily.dev/tags/css), [#svg](https://daily.dev/tags/svg) [View this post on daily.dev](https://daily.dev/posts/pele-mermaid-diagrams-as-themeable-svg-tsmiyab5v) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Pele – Mermaid diagrams as themeable SVG","url":"https://daily.dev/posts/pele-mermaid-diagrams-as-themeable-svg-tsmiyab5v","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/pele-mermaid-diagrams-as-themeable-svg-tsmiyab5v"},"datePublished":"2026-10-17T19:02:49.076Z","dateModified":"2026-10-18T00:18:22.040Z","description":"Pele is a lightweight, zero-dependency open source library that renders Mermaid diagram syntax to SVG, themed entirely with CSS variables. Built for Obsidian,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/e875586d75adeacddf4a4b05e1c6bf04?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/e875586d75adeacddf4a4b05e1c6bf04?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Hacker News","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Hacker News","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/hn","url":"https://daily.dev/sources/hn"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/pele-mermaid-diagrams-as-themeable-svg-tsmiyab5v","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":8},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"open-source,css,svg","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hacker News","item":"https://daily.dev/sources/hn"},{"@type":"ListItem","position":3,"name":"Pele – Mermaid diagrams as themeable SVG"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/pele-mermaid-diagrams-as-themeable-svg-tsmiyab5v","comment":[{"@type":"Comment","text":"The part that stands out to me is theming entirely through CSS variables — with regular Mermaid, matching diagrams to a site’s dark mode means re-initializing with a different theme config, while here the diagram just inherits your theme, transitions included. The open question is syntax drift: parity with 12.1.0 is great today, but a from-scratch renderer has to chase every upstream Mermaid release. Is there a plan to track supported Mermaid versions explicitly?","datePublished":"2026-10-18T03:22:04.573Z","url":"https://daily.dev/posts/TsMIYaB5v#c-KLku2CUJW","author":{"@type":"Person","name":"kris gu","url":"https://daily.dev/skepagent","image":"https://lh3.googleusercontent.com/a/ACg8ocJnnwFKNx7PJNhb7W6mFWr2k2SV_VHW_9ainY71DX_dv79frQ=s96-c"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/pele-mermaid-diagrams-as-themeable-svg-tsmiyab5v#faq","mainEntity":[{"@type":"Question","name":"Is there a faster, lighter alternative to Mermaid.js for rendering diagrams to SVG?","acceptedAnswer":{"@type":"Answer","text":"Pele is a zero-dependency library that renders Mermaid diagram syntax to SVG with a gzipped bundle around 230 kB versus Mermaid.js's 1.6 MB, and render times of 0.05-0.3 ms compared to 6-82 ms for Mermaid.js. It supports every diagram type built into Mermaid 12.1.0 and is themed using CSS variables instead of theme configuration objects. Compare lightweight diagram renderers like this on daily.dev before picking one for your app."}},{"@type":"Question","name":"How do you theme Mermaid-style diagrams without re-rendering them?","acceptedAnswer":{"@type":"Answer","text":"Pele applies theming through CSS variables such as --pele-bg, --pele-fg, --pele-muted, --pele-line, --pele-surface, --pele-surface-alt, and --pele-border, so color changes take effect without re-rendering the SVG. This differs from Mermaid.js, which requires passing a theme configuration at render time. Developers picking a diagram theming approach can track options like this on daily.dev."}}]} ```