mcpField
M
mermaidjs-v11

mermaidjs-v11

github.com/mrgoonieDocuments2.2k365 installsUpdated 30w ago
Repository

About mermaidjs-v11

mermaidjs-v11 is a skill for creating text-based diagrams with Mermaid.js v11, for people producing diagrams in Markdown, browsers, or via the CLI. It covers diagram syntax, configuration, and integration options.

Key features

  1. 01Write declarative diagram syntax
  2. 02Create flowcharts, sequence diagrams, and more
  3. 03Configure themes and visual styles
  4. 04Export SVG, PNG, or PDF with the CLI
  5. 05Integrate with JavaScript and Markdown

Use cases

  1. 01Diagram API interaction flows
  2. 02Show database relations and data models
  3. 03Create project timelines
  4. 04Embed diagrams in Markdown documents

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mrgoonie/claudekit-skills --skill mermaidjs-v11

After installing, type/mermaidjs-v11in Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
cli-usage.md
configuration.md
diagram-types.md
examples.md
integration.md

Details

From the project README

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

Comments

Markdown supported