SkillsAdd

mrgoonie/claudekit-skills

mermaidjs-v11

Create diagrams and visualizations using Mermaid.js v11 syntax.

First seen Jan 22, 2026

Installation

$ npx skills add mrgoonie/claudekit-skills --skill mermaidjs-v11
View on skills.sh ↗ GitHub repository ↗

Summary

  • 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.

Also in this package

Other skills from mrgoonie/claudekit-skills · top by installs.

npx skills add mrgoonie/claudekit-skills
backend-development 2.1K sequential-thinking 1.7K threejs 1.2K devops 972 chrome-devtools 732 aesthetic 702 ui-styling 617 debugging 556 problem-solving 555 media-processing 550

Browse all from mrgoonie/claudekit-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 2.2K
Default branch main
Open issues 7
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,136 B
  • docs SUMMARY.md 505 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 353 installs

SKILL.md

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

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

````

Configuration via Frontmatter: ````markdown

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