Mermaid Installation

Mermaid can be used in different ways: via a web page (script tag or module import), as an NPM package/CLI, or through tools and extensions. The easiest approach for many is to install the Mermaid NPM package and use its CLI or embed scripts. For example, to install with NPM:

npm install mermaid

You can also include Mermaid via CDN in a web page. Wrap your diagram in a <pre class="mermaid"> block:

<pre class="mermaid">
graph LR
  A --- B
  B --> C
  C --> D
</pre>

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@12/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

Try this code ❯

Quick Usage

Add the script to your HTML and put your diagram inside a code block with the class="mermaid" attribute:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.15.0/mermaid.min.js"></script>

<pre class="mermaid">
  graph TD
    A[Client] --> B[Server]
</pre>

Try this code ❯

This will render the diagram on page load. Mermaid looks for <pre> tags with class="mermaid" and converts their content to SVG.

Mermaid CLI

Mermaid provides a command-line interface (mmdc) to generate images from Mermaid files. The official mermaid-cli is installed via NPM:

npm install -g @mermaid-js/mermaid-cli

This mmdc tool takes a .mmd text file and outputs an SVG/PNG. For example:

mmdc -i diagram.mmd -o diagram.svg

This runs Mermaid headlessly and is useful in build scripts or CI pipelines.

VS Code and Editor Plugins

There are editor integrations for quick authoring. For Visual Studio Code, you can install the Mermaid Preview extension (by vknabel or Markus Glaser), which provides live preview and syntax highlighting for Mermaid code blocks in Markdown or .mmd files. Many static-site generators (like Docusaurus, Hugo, Jekyll) have plugins to convert Mermaid code in Markdown to diagrams.

GitHub and GitLab now natively render Mermaid code blocks (```mermaid) in Markdown files as diagrams. For quick testing without setup, use the Mermaid Editor.