# Mermaidjs V11

Create diagrams and visualizations using Mermaid.js v11 syntax.

- Repository: https://github.com/mrgoonie/claudekit-skills (2229 stars)
- Category: Design
- License: see repository
- Last updated: 2026-04-03
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -g -a claude-code -y`
Codex: `npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -g -a codex -y`
Cursor: `npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -g -a cursor -y`
Gemini CLI: `npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add mrgoonie/claudekit-skills`

## Description

Create diagrams and visualizations using Mermaid.js v11 syntax. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, timelines, architecture diagrams, or any of 24+ diagram types. Supports JavaScript API integration, CLI rendering to SVG/PNG/PDF, theming, configuration, and accessibility features. Essential for documentation, technical diagrams, project planning, system architecture, and visual communication.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Mermaid.js v11

## Overview

Create text-based diagrams using Mermaid.js v11 declarative syntax. Convert code to SVG/PNG/PDF via CLI or render in browsers/markdown files.

## Quick Start

**Basic Diagram Structure:**
```
{diagram-type}
  {diagram-content}
```

**Common Diagram Types:**
- `flowchart` - Process flows, decision trees
- `sequenceDiagram` - Actor interactions, API flows
- `classDiagram` - OOP structures, data models
- `stateDiagram` - State machines, workflows
- `erDiagram` - Database relationships
- `gantt` - Project timelines
- `journey` - User experience flows

See `references/diagram-types.md` for all 24+ types with syntax.

## Creating Diagrams

**Inline Markdown Code Blocks:**
````markdown
```mermaid
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
```
````

**Configuration via Frontmatter:**
````markdown
```mermaid
---
theme: dark
---
flowchart LR
    A --> B
```
````

**Comments:** Use `%% ` prefix for single-line comments.

## CLI Usage

Convert `.mmd` files to images:
```bash
# Installation
npm install -g @mermaid-js/mermaid-cli

# Basic conversion
mmdc -i diagram.mmd -o diagram.svg

# With theme and background
mmdc -i input.mmd -o output.png -t dark -b transparent

# Custom styling
mmdc -i diagram.mmd --cssFile style.css -o output.svg
```

See `references/cli-usage.md` for Docker, batch processing, and advanced workflows.

## JavaScript Integration

**HTML Embedding:**
```html
<pre class="mermaid">
  flowchart TD
    A[Client] --> B[Server]
</pre>
<script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });</script>
```

See `references/integration.md` for Node.js API and advanced integration patterns.

## Configuration & Theming

The rest: https://github.com/mrgoonie/claudekit-skills/blob/HEAD/.claude/skills/mermaidjs-v11/SKILL.md