Introducing <​mermaid-element>, a custom element to display Mermaid diagrams

~ Today I learned that CodePen supports Mermaid diagrams — Chris Coyier has a a whole collection with examples here — and I also learned that there is no custom element to show Mermaid diagrams … so I built one. ~ Looking at Chris’s demos, I see CodePen relies on Markdown code blocks with backticks (```mermaid) to render the diagrams. Seeing that in action got me wondering: is there a standalone custom element out there to drop Mermaid diagrams declaratively onto any web page? Turns out, there wasn’t. So I built one, assisted by Antigravity: <mermaid-element>. It’s a zero-config, dependency-free web component that renders Mermaid diagrams inside an open Shadow DOM. Simply import the script and put your Mermaid syntax directly inside the custom element: <script type="module" src="https://cdn.jsdelivr.net/npm/mermaid-element/index.js"></script> <mermaid-element> graph TD Client[Client Request] --> LB[Load Balancer] LB --> Server1[Server 01] LB --> Server2[Server 02] </mermaid-element>…