Mermaidjs V11

This lets Claude generate diagrams using Mermaid.js v11's text-based syntax, covering all 24+ diagram types from flowcharts and sequence diagrams to Gantt charts and ER diagrams. It includes the CLI commands for rendering to SVG/PNG/PDF, JavaScript integration patterns, and configuration options for themes and styling. Honestly, the skill is more of a reference manual than anything clever. Use it when you need Claude to output properly formatted Mermaid syntax for documentation or when you want it to help convert diagrams to images via the CLI. The examples and syntax references make it actually useful instead of Claude guessing at Mermaid formatting.

skills.sh installs: 370
GitHub stars: 2.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mrgoonie/claudekit-skills --skill mermaidjs-v11 --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

```mermaid
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
```

Configuration via Frontmatter:

```mermaid
---
theme: dark
---
flowchart LR
    A --> B
```

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

CLI Usage

Convert .mmd files to images:

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

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

SKILL.md on GitHub

Details

Repository: github.com/mrgoonie/claudekit-skills
Categories: Backend & APIs, Documentation, Code Review & Quality, Productivity & Planning, Sales & Marketing, Design & UI/UX, CLI & Terminal, Office & Documents
First seen: Jun 3, 2026