Mermaidjs v11

Skill VoDaiLocz/kilo-kit-mcp/skills/writing-docs/mermaidjs-v11

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.From its SKILL.md

Install

npx -y skills add VoDaiLocz/kilo-kit-mcp --skill mermaidjs-v11

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

24 stars24 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.1 KB, 682 tokens by cl100k_base, as published. Nobody here has run it

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

# 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:

<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

Common Options:

theme: "default", "dark", "forest", "neutral", "base"
look: "classic", "handDrawn"
fontFamily: Custom font specification
securityLevel: "strict", "loose", "antiscript"

See references/configuration.md for complete config options, theming, and customization.

Practical Patterns

Load references/examples.md for:

Architecture diagrams
API documentation flows
Database schemas
Project timelines
State machines
User journey maps

Resources

references/diagram-types.md - Syntax for all 24+ diagram types
references/configuration.md - Config, theming, accessibility
references/cli-usage.md - CLI commands and workflows
references/integration.md - JavaScript API and embedding
references/examples.md - Practical patterns and use cases

What ships with it: 5 files

26.3 KB alongside SKILL.md

references/

Gives 0 of the 12 instructions most diagrams charts skills give in 682 tokens

Counted across 397 of the 418 authors here whose files we hold, read 2026-09-06

Quote labels containing special charactersin 18 of 397, across 17 files
Choose the right diagram type for the datain 15 of 397, across 13 files
Create a detailed Mermaid diagramin 12 of 397, across 11 files
Validate Mermaid syntax before outputin 11 of 397, across 9 files
Wrap diagrams in fenced Mermaid code blocksin 11 of 397
Read the reference file for the chosen diagram typein 10 of 397, across 6 files
Label every connection descriptivelyin 8 of 397, across 7 files
Use stateDiagram-v2 for state diagramsin 7 of 397
Declare the diagram type on the first linein 7 of 397
Keep one concept per diagramin 7 of 397
Cap diagrams at 15 nodes and split over 20in 7 of 397
Describe the diagram before generating itin 7 of 397

Said here and by no other author read

write diagrams in mermaid v11 declarative syntax
configure diagrams via frontmatter
install @mermaid-js/mermaid-cli globally with npm
convert .mmd files to images with mmdc
set theme and background via mmdc flags
embed diagrams in HTML using pre class mermaid

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.