关于 mermaid
mermaid 是根据需求生成 Mermaid 图表代码的技能,会选择合适的图表类型并参考对应语法文档,涵盖流程图、时序图、统计图和架构图等。
主要功能
- 01根据需求选择图表类型
- 02查阅对应类型的语法文档
- 03生成 Mermaid 代码
- 04应用主题和样式
- 05按可直接渲染的格式输出代码
适用场景
- 01绘制流程或决策步骤
- 02梳理 API 交互或类结构
- 03展示时间线、数据或架构
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ wh-2099/ mermaid-skill --skill mermaid安装后在 Claude Code 中输入/mermaid确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/architecture.mdblock.mdc4.mdclassDiagram.mdconfig-configuration.mdconfig-directives.mdconfig-layouts.mdconfig-math.mdconfig-theming.mdconfig-tidy-tree.mdcynefin.mdentityRelationshipDiagram.mdeventmodeling.mdexamples.mdflowchart.mdgantt.mdgitgraph.mdishikawa.mdkanban.mdmindmap.mdpacket.mdpie.mdquadrantChart.mdradar.mdrailroad.mdrequirementDiagram.mdsankey.mdsequenceDiagram.mdstateDiagram.mdswimlanes.md详细介绍
Mermaid 图表生成器
根据用户需求生成高质量的 Mermaid 图表代码。
工作流
- 理解需求:分析用户描述,确定最合适的图表类型
- 阅读文档:阅读对应图表类型的语法参考
- 生成代码:按照规范生成 Mermaid 代码
- 应用样式:应用合适的主题和样式配置
图表类型参考
选择合适的图表类型并阅读对应文档:
| 类型 | 文档 | 使用场景 |
|---|---|---|
| 流程图 | 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 | 用户体验流程 |
| ZenUML | zenuml.md | 时序图(代码风格) |
配置与主题
输出规范
生成的 Mermaid 代码应:
- 包含在 ```mermaid 代码块中
- 语法正确,可直接渲染
- 结构清晰,换行和缩进恰当
- 使用语义明确的节点命名
- 在需要时添加样式,以改善视觉效果
输出示例
flowchart TD
A[Start] --> B{Condition}
B -->|Yes| C[Execute]
B -->|No| D[End]
C --> D
用户需求:$ARGUMENTS
评论
支持 Markdown