본문으로 건너뛰기
cccskills
무료GitHub에 공개

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills

실행 점수 미검증

설치 방법 보기

포함된 파일(6)

  • SKILL.md3.1 KB
  • references/cli-usage.md4.1 KB
  • references/configuration.md4.6 KB
  • references/diagram-types.md4.9 KB
  • references/examples.md7.0 KB
  • references/integration.md5.7 KB

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:

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

aesthetic

무료

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills2.2천2026년 4월 3일 업데이트

ai-multimodal

무료

Process and generate multimedia content using Google Gemini API. Capabilities include analyze audio files (transcription with timestamps, summarization, speech understanding, music/sound analysis up to 9.5 hours), understand images (captioning, object detection, OCR, visual Q&A, segmentation), process videos (scene detection, Q&A, temporal analysis, YouTube URLs, up to 6 hours), extract from documents (PDF tables, forms, charts, diagrams, multi-page), generate images (text-to-image, editing, composition, refinement). Use when working with audio/video files, analyzing images or screenshots, processing PDF documents, extracting structured data from media, creating images from text prompts, or implementing multimodal AI features. Supports multiple models (Gemini 2.5/2.0) with context windows up to 2M tokens.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills2.2천2026년 4월 3일 업데이트

backend-development

무료

Build robust backend systems with modern technologies (Node.js, Python, Go, Rust), frameworks (NestJS, FastAPI, Django), databases (PostgreSQL, MongoDB, Redis), APIs (REST, GraphQL, gRPC), authentication (OAuth 2.1, JWT), testing strategies, security best practices (OWASP Top 10), performance optimization, scalability patterns (microservices, caching, sharding), DevOps practices (Docker, Kubernetes, CI/CD), and monitoring. Use when designing APIs, implementing authentication, optimizing database queries, setting up CI/CD pipelines, handling security vulnerabilities, building microservices, or developing production-ready backend systems.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills2.2천2026년 4월 3일 업데이트

better-auth

무료

Implement authentication and authorization with Better Auth - a framework-agnostic TypeScript authentication framework. Features include email/password authentication with verification, OAuth providers (Google, GitHub, Discord, etc.), two-factor authentication (TOTP, SMS), passkeys/WebAuthn support, session management, role-based access control (RBAC), rate limiting, and database adapters. Use when adding authentication to applications, implementing OAuth flows, setting up 2FA/MFA, managing user sessions, configuring authorization rules, or building secure authentication systems for web applications.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills2.2천2026년 4월 3일 업데이트

bunny

무료

Integrate Bunny.net services (CDN, Storage, Stream, DNS, Edge Scripting, Shield, Magic Containers, Optimizer, Database). Use when building with Bunny.net APIs, deploying to Bunny CDN, uploading files to Edge Storage, managing video streaming, configuring DNS zones, writing edge scripts, setting up WAF/DDoS protection, deploying containers, or optimizing images. Triggers on "bunny", "bunnycdn", "b-cdn", "pull zone", "edge storage", "bunny stream".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills2.2천2026년 4월 3일 업데이트

chrome-devtools

무료

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mrgoonie/claudekit-skills2.2천2026년 4월 3일 업데이트

mrgoonie의 스킬 모두 보기

이 스킬의 문제 신고