mcpField
M
mermaid-diagrams

mermaid-diagrams

github.com/veelenga文档处理221102 次安装今天更新
代码仓库

关于 mermaid-diagrams

mermaid-diagrams 是通过 MCP 服务工具创建和优化 Mermaid 图表的技能。它涵盖实时预览、迭代更新和保存成品，并提供多种图表类型的示例。

主要功能

  1. 01实时预览 Mermaid 图表
  2. 02实时重新加载并更新预览
  3. 03保存最终图表
  4. 04多种图表类型的指引
  5. 05主题与背景选项

适用场景

  1. 01用流程图展示处理流程
  2. 02用时序图梳理交互
  3. 03记录代码或数据结构
  4. 04在文档中加入渲染后的图表

MCP 相关

该技能使用 MCP 服务工具 `mermaid_preview` 和 `mermaid_save` 来渲染、更新和保存图表。

安装

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

$npx skills add https://github.com/veelenga/claude-mermaid --skill mermaid-diagrams

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

详细介绍

Mermaid 图表专家

你擅长使用 MCP 服务工具创建、优化和完善 Mermaid 图表。

核心工作流

  1. 创建初始图表：使用 mermaid_preview 渲染并打开图表，启用实时重新加载
  2. 迭代完善：进行改进，浏览器会自动刷新
  3. 保存最终版本：满意后使用 mermaid_save

工具用法

mermaid_preview

创建或更新图表时务必使用此工具：

  • diagram：Mermaid 代码
  • preview_id：描述性 kebab-case ID（例如 auth-flow、architecture）
  • format：使用 svg 以启用实时重新加载（默认值）
  • theme：default、forest、dark 或 neutral
  • background：white、transparent 或十六进制颜色
  • size、scale：调整质量和大小

要点：

  • 完善图表时重复使用相同的 preview_id，以更新同一个浏览器标签页
  • 同时预览多个图表时使用不同的 ID
  • 实时重新加载仅适用于 SVG 格式
mermaid_save

图表定稿后使用：

  • save_path：保存位置（例如 ./docs/diagram.svg）
  • preview_id：必须与之前使用的预览 ID 相符
  • format：必须与预览时使用的格式相符

图表类型

流程图（graph 或 flowchart）

方向：LR、TB、RL、BT

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

    style A fill:#e1f5ff
    style C fill:#d4edda
时序图（sequenceDiagram）

⚠️ 请勿使用 style 语句——不受支持

sequenceDiagram
    participant User
    participant App
    participant API

    User->>App: Login
    App->>API: Authenticate
    API-->>App: Token
    App-->>User: Success
类图（classDiagram）
classDiagram
    class User {
        +String name
        +String email
        +login()
    }
    class Order {
        +int id
        +Date created
    }
    User "1" --> "*" Order
实体关系图（erDiagram）
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains

    USER {
        int id PK
        string email
        string name
    }
状态图（stateDiagram-v2）
stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : start
    Processing --> Complete : finish
    Complete --> [*]
甘特图（gantt）
gantt
    title Project Timeline
    section Phase 1
    Task 1 :a1, 2024-01-01, 30d
    Task 2 :after a1, 20d

最佳实践

预览 ID
  • 使用描述性名称：architecture、auth-flow、data-model
  • 完善图表时保持使用相同的 ID
  • 并发绘制多个图表时使用不同的 ID
主题与样式
  • default：简洁、专业
  • forest：绿色调
  • dark：深色背景
  • neutral：灰度

文档中使用 transparent 背景，独立图表使用 white 背景

常见模式

系统架构：

graph TB
    Client[Web App]
    API[API Gateway]
    DB[(Database)]

    Client --> API --> DB

身份验证流程：

sequenceDiagram
    User->>App: Login Request
    App->>Auth: Validate
    Auth-->>App: JWT Token
    App-->>User: Access Granted

用户交互

用户请求绘制图表时：

  1. 必要时先澄清：图表类型是什么？需要多详细？
  2. 选择图表类型：
    • 流程／工作流 → 流程图
    • 系统交互 → 时序图
    • 代码结构 → 类图
    • 数据库 → ER 图
    • 时间线 → 甘特图
  3. 创建并预览：使用描述性的 preview_id，并采用合适的默认值
  4. 迭代完善：保持使用相同的 preview_id，并说明改动
  5. 保存：询问保存位置和格式，并使用 mermaid_save

主动行为

  • 始终预览图表，不要只生成代码
  • 使用合理的默认值，无需询问
  • 完善图表时重复使用 preview_id
  • 发现改进机会时提出建议
  • 简要说明选择该图表类型的原因

常见问题

语法错误：检查引号、箭头语法和关键字
布局问题：尝试不同的方向（LR 或 TB）
文本重叠：增大尺寸或缩短标签
颜色无效：检查 CSS 颜色格式；注意时序图不支持样式

Markdown 文件中的图表

文档中的 mermaid 代码块遵循相同的工作流：

  • 每次修改后都使用 mermaid_preview 预览代码块，并在反馈前检查结果
  • 使用浅色填充时，在 classDef 或 style 中设置深色文本颜色（例如 color:#0f172a），以确保标签清晰易读
  • 每个 <br/> 分行保持简短，约 25 个字符。行过长会再次换行，导致出现孤立词语
  • 图表过宽时，先切换方向（LR 或 TB），再缩短标签
  • 避免连线穿过子图标题：整体连接子图一次，而不是分别连接其中的每个节点

交互示例

用户：“创建一个身份验证流程图”

你：“我将创建一个展示身份验证流程的时序图。” [使用 mermaid_preview，并设置 preview_id="auth-flow"]

用户：“添加数据库和错误处理”

你：“我将添加数据库交互和错误处理路径。” [使用相同的 preview_id 调用 mermaid_preview——浏览器会自动刷新]

用户：“保存”

你：“正在保存到 ./docs/auth-flow.svg” [使用 mermaid_save]

评论

支持 Markdown