메뉴
Generates Mermaid.js v11 diagrams — flowcharts, sequence, class, state, ER, Gantt, timelines, and 24+ types. Covers CLI rendering to SVG/PNG/PDF, JS API integration, theming, and accessibility.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | mermaidjs-v11 |
| description | Generates Mermaid.js v11 diagrams — flowcharts, sequence, class, state, ER, Gantt, timelines, and 24+ types. Covers CLI rendering to SVG/PNG/PDF, JS API integration, theming, and accessibility. |
Create text-based diagrams using Mermaid.js v11 declarative syntax. Convert code to SVG/PNG/PDF via CLI or render in browsers/markdown files.
Basic Diagram Structure:
{diagram-type}
{diagram-content}
Common Diagram Types:
flowchart - Process flows, decision treessequenceDiagram - Actor interactions, API flowsclassDiagram - OOP structures, data modelsstateDiagram - State machines, workflowserDiagram - Database relationshipsgantt - Project timelinesjourney - User experience flowsSee references/diagram-types-core.md and references/diagram-types-planning.md / references/diagram-types-technical.md for all 24+ types.
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.
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-commands.md for Docker, flags, and troubleshooting.
See references/cli-workflows.md for config files, Node.js API, and CI/CD patterns.
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-browser.md for React, Vue, and Markdown integration.
See references/integration-api.md for API methods and advanced rendering patterns.
Common Options:
theme: "default", "dark", "forest", "neutral", "base"look: "classic", "handDrawn"fontFamily: Custom font specificationsecurityLevel: "strict", "loose", "antiscript"See references/configuration-options.md for core options, layout, security.
See references/configuration-theming.md for theme variables, icons, math, accessibility.
Load references/examples-core.md, references/examples-data.md, and references/examples-advanced.md for real-world diagram patterns.
references/diagram-types-core.md - Flowchart, sequence, class, state, ER, Gantt syntaxreferences/diagram-types-planning.md - Journey, kanban, C4, architecture, pie, data vizreferences/diagram-types-technical.md - Git graph, timeline, mindmap, packet, ZenUMLreferences/configuration-options.md - Config options, layout, security, validationreferences/configuration-theming.md - Themes, theme variables, icons, math, accessibilityreferences/cli-commands.md - CLI install, commands, flags, Docker, troubleshootingreferences/cli-workflows.md - Config files, Node.js API, CI/CD workflowsreferences/integration-browser.md - HTML, React, Vue, Markdown embeddingreferences/integration-api.md - JS API methods, events, advanced patternsreferences/examples-core.md - Architecture, API docs, state machines, CI/CDreferences/examples-data.md - Database schemas, OOP class diagrams, REST mapsreferences/examples-advanced.md - Planning, C4, git branching, infra, data vizReviews code comments across languages before a PR opens. Use when finishing a development branch, before merging, or when a pr create was blocked pending comment review.
Create, promote, categorize, and validate skills for the kettleofskills marketplace. Use when syncing dotfiles skills into the marketplace, adding skills, assigning categories, or preparing a release.
Build Go terminal UIs (TUIs) and CLIs with charmbracelet — Bubble Tea runtime, Lip Gloss styling, Bubbles components, Glamour markdown, Harmonica animation, BubbleZone mouse. For any bubbletea TUI.
Copier templating — author copier.yml templates (questions, Jinja, _tasks, migrations), scaffold via `copier copy`, sync via `copier update`. Use for copier.yml, .copier-answers.yml, or .jinja.
Copyparty portable file server (HTTP/WebDAV/FTP/SFTP/SMB). This skill should be used when deploying via Docker/pip/NixOS, configuring accounts/volumes, indexer, hooks, or forward-auth IdP integration.
Sway tiling Wayland compositor on NixOS. This skill should be used when configuring programs.sway, GPU rendering (Intel/AMD/NVIDIA), Wails/webkit2gtk fixes, xdg portals, home-manager, or wallpapers.