mermaidjs-v11 by mrgoonie/claudekit-skills
npx skills add https://github.com/mrgoonie/claudekit-skills --skill mermaidjs-v11使用 Mermaid.js v11 的声明式语法创建基于文本的图表。通过 CLI 将代码转换为 SVG/PNG/PDF,或在浏览器/Markdown 文件中渲染。
基本图表结构:
{diagram-type}
{diagram-content}
常用图表类型:
flowchart - 流程图、决策树sequenceDiagram - 参与者交互图、API 流程classDiagram - 面向对象结构图、数据模型图stateDiagram - 状态机图、工作流图erDiagram - 数据库关系图gantt - 项目时间线图广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
journey - 用户体验流程图查看 references/diagram-types.md 获取全部 24+ 种图表类型的语法。
行内 Markdown 代码块:
```mermaid
flowchart TD
A[开始] --> B{决策}
B -->|是| C[操作]
B -->|否| D[结束]
```
通过 Frontmatter 配置:
```mermaid
---
theme: dark
---
flowchart LR
A --> B
```
注释: 使用 %% 前缀进行单行注释。
将 .mmd 文件转换为图像:
# 安装
npm install -g @mermaid-js/mermaid-cli
# 基本转换
mmdc -i diagram.mmd -o diagram.svg
# 使用主题和背景
mmdc -i input.mmd -o output.png -t dark -b transparent
# 自定义样式
mmdc -i diagram.mmd --cssFile style.css -o output.svg
查看 references/cli-usage.md 获取 Docker、批量处理和高级工作流信息。
HTML 嵌入:
<pre class="mermaid">
flowchart TD
A[客户端] --> B[服务器]
</pre>
<script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });</script>
查看 references/integration.md 获取 Node.js API 和高级集成模式。
常用选项:
theme: "default", "dark", "forest", "neutral", "base"look: "classic", "handDrawn"fontFamily: 自定义字体规范securityLevel: "strict", "loose", "antiscript"查看 references/configuration.md 获取完整的配置选项、主题和自定义信息。
加载 references/examples.md 查看:
references/diagram-types.md - 全部 24+ 种图表类型的语法references/configuration.md - 配置、主题、可访问性references/cli-usage.md - CLI 命令和工作流references/integration.md - JavaScript API 和嵌入references/examples.md - 实用模式和用例每周安装量
160
代码仓库
GitHub 星标数
1.9K
首次出现
2026 年 1 月 22 日
安全审计
安装于
claude-code132
opencode129
gemini-cli121
codex115
cursor109
antigravity101
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.md for all 24+ types with syntax.
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-usage.md for Docker, batch processing, and advanced workflows.
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.
Common Options:
theme: "default", "dark", "forest", "neutral", "base"look: "classic", "handDrawn"fontFamily: Custom font specificationsecurityLevel: "strict", "loose", "antiscript"See references/configuration.md for complete config options, theming, and customization.
Load references/examples.md for:
references/diagram-types.md - Syntax for all 24+ diagram typesreferences/configuration.md - Config, theming, accessibilityreferences/cli-usage.md - CLI commands and workflowsreferences/integration.md - JavaScript API and embeddingreferences/examples.md - Practical patterns and use casesWeekly Installs
160
Repository
GitHub Stars
1.9K
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
claude-code132
opencode129
gemini-cli121
codex115
cursor109
antigravity101
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
113,700 周安装