Mermaid logo

Mermaid enables developers to generate diagrams and flowcharts from plain‑text descriptions, simplifying documentation within code repositories. The Mermaid logo as clean SVG, in brand color and mono. Copy it, download it, or install it as a typed React component.

Brand color: #ff3670
Categories: Libraries
Variants: 2 SVG files
Website: mermaid.js.org
Source: gilbarbara/logos · CC0

Sponsor

CVMalinThe clever CV, built to land interviews

Use the Mermaid logo

shadcn CLI

npx shadcn@latest add @logoforge/mermaid

Works out of the box — @logoforge is in the official shadcn directory. Prefer your AI editor? Use the MCP server.

React

import { MermaidLogo } from "@/components/logos/mermaid";

<MermaidLogo className="size-8" />
<MermaidLogo variant="mono" />          {/* currentColor */}

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256"><title>Mermaid</title><path fill="#ff3670" d="M256 44.19C256 19.8 236.2 0 211.81 0H44.19C19.8 0 0 19.8 0 44.19v167.62C0 236.2 19.8 256 44.19 256h167.62c24.39 0 44.19-19.8 44.19-44.19z"/><path fill="#fff" d="M212.818 58.067C175.27 56.46 140.792 79.563 128 114.9c-12.792-35.337-47.27-58.44-84.818-56.833-1.25 29.795 13.003 58.209 37.635 75.02a46.42 46.42 0 0 1 20.124 38.361v26.563h54.123v-26.563a46.42 46.42 0 0 1 20.119-38.361c24.639-16.805 38.895-45.223 37.635-75.02"/></svg>

Download

Related logos

Mermaid and the Mermaid logo are trademarks of their respective owner. Logoforge is not affiliated with or endorsed by Mermaid; the logo is provided to refer to the product. Follow the brand's own guidelines. Own this brand and want it removed? Contact us — handled within 72 hours.