Skip to main content

​
Installation

Mermaid can be installed and used in multiple ways depending on your project setup. Choose the method that best fits your needs.

​
Package managers

Install Mermaid as a dependency in your project using your preferred package manager: 
npm install mermaid
The current stable version of Mermaid is 11.12.2. The package includes TypeScript definitions out of the box.

​
CDN

For quick prototyping or simple projects, you can load Mermaid directly from a CDN without any installation: 
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

​
unpkg

<script type="module">
  import mermaid from 'https://unpkg.com/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>
Using the CDN is perfect for HTML pages, demos, and experimentation. For production applications, we recommend installing via a package manager for better version control and build optimization.

​
Module formats

Mermaid is distributed as an ES module. When you install the package, you get:
  • ES Module: mermaid.core.mjs (main entry point)
  • TypeScript types: mermaid.d.ts

​
Using with ES modules

import mermaid from 'mermaid';

​
Package exports

The package provides the following exports: 
{
  ".": {
    "types": "./dist/mermaid.d.ts",
    "import": "./dist/mermaid.core.mjs",
    "default": "./dist/mermaid.core.mjs"
  }
}

​
Verify installation

After installation, you can verify that Mermaid is properly installed by importing it in your JavaScript file: 
import mermaid from 'mermaid';

console.log(mermaid);
// Should output the mermaid object with methods like initialize, render, parse, etc.

​
Requirements

Mermaid is designed to work in modern JavaScript environments:
  • Browser support: Modern browsers with ES module support
  • Node.js: For server-side rendering or build tools
  • TypeScript: Full type definitions included

​
Dependencies

Mermaid relies on several powerful libraries:
  • D3.js - For graphical layout and drawing
  • dagre-d3-es - For directed graph layouts
  • cytoscape - For advanced graph layouts
  • DOMPurify - For sanitizing user input
  • KaTeX - For mathematical notation rendering
All dependencies are bundled with Mermaid, so you don’t need to install them separately.

​
Next steps

Now that you have Mermaid installed, let’s create your first diagram:

Quickstart

Follow our quickstart guide to render your first diagram in minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us