# Memaid Diagrams, now on CodePen

Canonical: https://brew.new/templates/codepen/memaid-diagrams-now-on-codepen

Brand: codepen.io
Category: general

![Preview of Memaid Diagrams, now on CodePen](https://cdn.brew.new/email-preview-36d1e5299142ed13-tracking_r57thg35rcyktdtajhy2x6qj7s8e3n2p-1791926566584.png)

## Email content

Memaid Diagrams, now on CodePen

CodePen now supports Mermaid as a Block. It works two ways:

A .mmd or .mermaid file. This triggers the Mermaid block and converts these files into .svg files that can be used/previewed anywhere.

Within Markdown .md files with triple-backtick code blocks.

That second one doesn't trigger the Mermaid block specifically, but will honor a Mermaid config file if present. Usage is like this:

```mermaid

pie title How I spent the weekend

"Coding" : 8

"Debugging the coding" : 13

"Regret" : 3

```

Explore Mermaid Examples

— Team CodePen

CodePen, Inc. · 70 SW Century Dr #1019 Bend OR 97702

Unsubscribe

[Open and remix this design](https://brew.new/templates/codepen/memaid-diagrams-now-on-codepen)

[Browse email designs](https://brew.new/browse/templates)