[Home](/index.md) › [Icons](/icons.md) › Mermaid

# Mermaid

Mermaid is an open-source JavaScript library that renders flowcharts, sequence diagrams, Gantt charts and more from Markdown-like text, built into GitHub and GitLab.

## At a glance

- **Page**: https://devicons.io/icons/mermaid/
- **Website**: https://mermaid.js.org/
- **Also known as**: Mermaid.js, MermaidJS, Mermaid diagrams, mermaid-js
- **Tags**: [Data Visualization](/icons/tag/data-visualization/), [Documentation](/icons/tag/documentation/), [Markdown](/icons/tag/markdown/), [JavaScript](/icons/tag/javascript/), [Open Source](/icons/tag/open-source/)
- **Version added**: 1.3.0

## Files

Each file is one variant of this logo. The component name is derived from the file name.

| File | Component | Color SVG | Monochrome SVG | Font class |
| --- | --- | --- | --- | --- |
| `mermaid` | `Mermaid` | https://devicons.io/devicons/icons/mermaid.svg | https://devicons.io/devicons/font/mermaid.svg | `devicons devicons-mermaid` |

## Install and use

```bash
npm install @dev.icons/react  # or @dev.icons/vue, @dev.icons/svelte
```

### React

```tsx
import { Mermaid } from "@dev.icons/react";
// Monochrome (inherits currentColor):
// import { Mermaid } from "@dev.icons/react/mono";

<Mermaid size={32} alt="Mermaid logo" />
```

### Vue

```vue
<script setup>
import { Mermaid } from "@dev.icons/vue";
</script>

<template>
  <Mermaid :size="32" alt="Mermaid logo" />
</template>
```

### Svelte

```svelte
<script>
  import { Mermaid } from "@dev.icons/svelte";
</script>

<Mermaid size={32} alt="Mermaid logo" />
```

### Raw SVG

```html
<img src="https://devicons.io/devicons/icons/mermaid.svg" alt="Mermaid logo" width="48" height="48" />
```

### Icon font

```css
@import "devicons/css"; /* npm install devicons */
```

```html
<i class="devicons devicons-mermaid"></i>
```

## About the Mermaid logo

The Mermaid icon is a white mermaid tail fin on a pink (#FF3670) rounded square. This is the version the project ships as the favicon of its documentation site.

The pink tile reads well on light and dark backgrounds.

## When to use this logo

Use Mermaid in diagram tool comparisons, docs-as-code guides, Markdown editor feature lists and READMEs that embed diagrams. It pairs naturally with PlantUML, Excalidraw, Markdown, GitHub and Docusaurus.

## Related icons

- [D3](/icons/d3.md)
- [Dimer](/icons/dimer.md)
- [Apache Superset](/icons/apache-superset.md)
- [Asciidoctor](/icons/asciidoctor.md)
- [Awesome](/icons/awesome.md)
- [Babel](/icons/babel.md)
- [Baseline](/icons/baseline.md)
- [Docusaurus](/icons/docusaurus.md)

## Browse the catalog
- Previous: [Mercurial](/icons/mercurial.md)
- Next: [Meshy](/icons/meshy.md)
- [All icons](/icons.md)