mcpField
M
mermaid

mermaid

github.com/wh-2099设计与 UI299174 次安装12 周前更新
代码仓库

关于 mermaid

mermaid 是根据需求生成 Mermaid 图表代码的技能,会选择合适的图表类型并参考对应语法文档,涵盖流程图、时序图、统计图和架构图等。

主要功能

  1. 01根据需求选择图表类型
  2. 02查阅对应类型的语法文档
  3. 03生成 Mermaid 代码
  4. 04应用主题和样式
  5. 05按可直接渲染的格式输出代码

适用场景

  1. 01绘制流程或决策步骤
  2. 02梳理 API 交互或类结构
  3. 03展示时间线、数据或架构

安装

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

$npx skills add https://github.com/wh-2099/mermaid-skill --skill mermaid

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

包含的文件

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

references/
architecture.md
block.md
c4.md
classDiagram.md
config-configuration.md
config-directives.md
config-layouts.md
config-math.md
config-theming.md
config-tidy-tree.md
cynefin.md
entityRelationshipDiagram.md
eventmodeling.md
examples.md
flowchart.md
gantt.md
gitgraph.md
ishikawa.md
kanban.md
mindmap.md
packet.md
pie.md
quadrantChart.md
radar.md
railroad.md
requirementDiagram.md
sankey.md
sequenceDiagram.md
stateDiagram.md
swimlanes.md

详细介绍

Mermaid 图表生成器

根据用户需求生成高质量的 Mermaid 图表代码。

工作流

  1. 理解需求:分析用户描述,确定最合适的图表类型
  2. 阅读文档:阅读对应图表类型的语法参考
  3. 生成代码:按照规范生成 Mermaid 代码
  4. 应用样式:应用合适的主题和样式配置

图表类型参考

选择合适的图表类型并阅读对应文档:

类型文档使用场景
流程图flowchart.md流程、决策、步骤
时序图sequenceDiagram.md交互、消息传递、API 调用
类图classDiagram.md类结构、继承、关联
状态图stateDiagram.md状态机、状态转换
ER 图entityRelationshipDiagram.md数据库设计、实体关系
甘特图gantt.md项目规划、时间线
饼图pie.md比例、分布
思维导图mindmap.md层级结构、知识图谱
时间线timeline.md历史事件、里程碑
Git 图gitgraph.md分支、合并、版本
象限图quadrantChart.md四象限分析
需求图requirementDiagram.md需求可追溯性
C4 图c4.md系统架构(C4 模型)
桑基图sankey.md流动、转换
XY 图表xyChart.md折线图、柱状图
块图block.md系统组件、模块
数据包图packet.md网络协议、数据结构
看板kanban.md任务管理、工作流
架构图architecture.md系统架构
雷达图radar.md多维比较
矩形式树状图treemap.md层级数据可视化
用户旅程图userJourney.md用户体验流程
ZenUMLzenuml.md时序图(代码风格)

配置与主题

输出规范

生成的 Mermaid 代码应:

  1. 包含在 ```mermaid 代码块中
  2. 语法正确,可直接渲染
  3. 结构清晰,换行和缩进恰当
  4. 使用语义明确的节点命名
  5. 在需要时添加样式,以改善视觉效果

输出示例

flowchart TD
    A[Start] --> B{Condition}
    B -->|Yes| C[Execute]
    B -->|No| D[End]
    C --> D

用户需求:$ARGUMENTS

评论

支持 Markdown