mcpField
M
mermaidjs-v11

mermaidjs-v11

github.com/mrgoonie文档处理2.2k365 次安装30 周前更新
代码仓库

关于 mermaidjs-v11

mermaidjs-v11 是用于编写 Mermaid.js v11 文本图表的技能，面向需要在 Markdown、浏览器或命令行中创建和导出图表的用户。它涵盖多种图表语法、配置和集成方式。

主要功能

  1. 01编写声明式图表语法
  2. 02创建流程图和时序图等
  3. 03配置主题与外观
  4. 04通过 CLI 导出 SVG、PNG 或 PDF
  5. 05集成 JavaScript 与 Markdown

适用场景

  1. 01绘制 API 交互流程
  2. 02呈现数据库关系和数据模型
  3. 03制作项目时间线
  4. 04在 Markdown 文档中嵌入图表

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/mermaidjs-v11确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

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

详细介绍

Mermaid.js v11

概述

使用 Mermaid.js v11 声明式语法创建基于文本的图表。通过 CLI 将代码转换为 SVG/PNG/PDF，或在浏览器/Markdown 文件中渲染。

快速入门

基本图表结构：

{diagram-type}
  {diagram-content}

常见图表类型：

  • flowchart - 流程、决策树
  • sequenceDiagram - 参与者交互、API 流程
  • classDiagram - OOP 结构、数据模型
  • stateDiagram - 状态机、工作流
  • erDiagram - 数据库关系
  • gantt - 项目时间线
  • journey - 用户体验流程

参见 references/diagram-types.md，了解全部 24+ 种图表类型及其语法。

创建图表

Markdown 内联代码块：

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

通过 Frontmatter 配置：

```mermaid
---
theme: dark
---
flowchart LR
    A --> B
```

注释： 使用 %% 前缀添加单行注释。

CLI 用法

将 .mmd 文件转换为图像：

# 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

参见 references/cli-usage.md，了解 Docker、批量处理和高级工作流。

JavaScript 集成

嵌入 HTML：

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

参见 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，了解：

  • 架构图
  • API 文档流程
  • 数据库架构
  • 项目时间线
  • 状态机
  • 用户旅程图

资源

  • references/diagram-types.md - 全部 24+ 种图表类型的语法
  • references/configuration.md - 配置、主题、无障碍功能
  • references/cli-usage.md - CLI 命令和工作流
  • references/integration.md - JavaScript API 和嵌入方式
  • references/examples.md - 实用模式和用例

评论

支持 Markdown