Skills 市场看到了 mermaid-diagrams，热度还不错。由于我自己也非常喜欢用 mermaid 作图，于是下下来学习了下，果然还是有些收获。
PS：Mermaid 是一个广泛使用的开源项目，它的语法，在大模型的的训练数据里本来就有，所以一般的 Agent，天然就"会写" Mermaid 代码。现在很多 Agent，本身也内置了 Mermaid 的渲染，在对话框中直接就能看到效果（如 Cursor）。
那为什么还要研究下这个 Skill 呢，按理说不是都没必要装吗？一是学习它的 Skill 写法，二是其 Skill 中透露的细节，进一步指向了内部的实现过程。
老规矩，先直接展示效果。
可以直接看到，在使用了这个 Skill 后，可以很快输出自己想要的图，并且效果还错，既有图，还有图的"代码"。
PS：因为是截图的，左边的时序图，其实没有截取完整。
我自己看了下，感觉画出来的很专业。如觉得不好看，还能直接让它换主题，当然，也可以直接拷贝 mmd "代码"，去官网上自己重新配置风格。
例如，这是我比较喜欢的一种风格样式。
接下来，主要分析下 Mermaid Diagrams Skill。
主要组成如下，可以明显看出来，是一份结构化的提示词知识文档，专门用来增强 AI Agent 在生成 Mermaid 图表方面的能力。
核心机制：当用户触发相关意图时，Agent 读取这份文档，将其内容注入到自己的上下文（context）中，从而获得绘图领域的专业知识。
设计思路：主文件轻量 + 引用文件按需加载。SKILL.md 只包含通用知识和快速示例，具体类型的深度语法放在 references/ 子目录，Agent 可以按需 Read 对应文件，以此支持"渐进式披露"原则。
SKILL.md 中，开篇跟其他 Skills 一样，表达的此 Skill 基本的信息，如名称、版本、描述、触发时机等。
接下来，SKILL.md 主要是按照如下章节展开：
可以看出，整体上，有两个非常明显的亮点：
1，渐进式纰漏（即知识分层加载）；
2，示例驱动（对应的是 Quick Start Examples）
整体工作流程如下：
另外，对于生成的图，可以直接导出成图片。对应的，Skill 中描述如下：
这其中，技术上的实现过程，比较有意思:
下面解释下为什么要这么设计：
因为 Mermaid 本质上是一个前端渲染库，它的核心逻辑运行在浏览器的 JS 引擎里，依赖 DOM 操作来生成 SVG。
要在命令行（没有浏览器的环境）输出图片，最直接的方式就是"带一个浏览器"，这就是为什么安装 mmdc 要顺带下载整个 Chromium 的原因。 这也解释了几个现象：
- 为什么 mmdc 安装包很大（需要 Chromium）
- 为什么导出速度比较慢（需要启动浏览器进程）
- 为什么在无 GUI 的服务器上也能用（Chromium 支持无头模式）
这样整个流程下来，在完整的工作流场景中，就可以串起来。如小龙虾的场景中，可以将生成好的图，直接发回给用户，真正实现工作流的完整闭环。