Mermaid Awesome：在 Markdown 里生成可渲染的 Mermaid 图表与架构图

前言¶

README、Wiki、Issue 里经常需要流程图、时序图或轻量架构图。手绘截图难维护，单独开在线绘图工具又和文档脱节。Mermaid 用文本描述图表，多数 Markdown 渲染器可直接预览；但语法类型多、细节容易写错，交给通用对话往往要反复改稿。

下面介绍 SkillHub 上的社区 Skill Mermaid Awesome（坐标 @user_c1d16043/mermaid-awesome）：它把「写 Mermaid、改 Mermaid、选对图类型」收敛成 Agent 可遵循的指引，输出仍落在 Markdown 原生 mermaid 代码块里，便于在 GitHub、GitLab、文档站等处渲染。

这是什么¶

Mermaid Awesome 是一套面向智能体的 Skill（基于通用 SKILL.md 格式），发布者为 SkillHub 用户 user_c1d16043（页面标注作者 Loong10K），来源为 community，当前版本 1.0.1，分类 dev-programming。标签 requires_api_key=false，安装与使用不依赖额外 API Key。

官方简介说明：Mermaid 是基于 JavaScript、用接近 Markdown 的文本定义图表的工具；该 Skill 提供创建与修订 Mermaid 图的综合指引，适用于在 Markdown 文档、GitHub、GitLab、Wiki、博客等场景里画图或改图。当用户提到 Mermaid、需要 Markdown 文档配图，或需要能在 Markdown 渲染器里直接显示的图表时，应启用此 Skill。

核心功能¶

依据 SkillHub 页面与 API 资料，可核实的能力如下。

覆盖多种图表类型：官方表述为 23+ 种，包括但不限于流程图（flowchart）、时序图（sequence）、类图（class）、状态图（state）、ER 图、甘特图（Gantt）、饼图、象限图、Git 图、C4、思维导图（mindmap）、时间线（timeline）等。
面向 Markdown 工作流：产出以 Markdown 友好的 Mermaid 源码为主，强调在 README、文档站、代码托管平台的渲染链路里可用。
创建与修订：适用于从零生成图表，也适用于在已有 Mermaid 片段上修改结构或语法。
触发语义明确：用户意图包含 draw、create、generate、visualize、flowchart、architecture diagram 等，或明确提到 Mermaid、Markdown 配图时，Skill 说明要求 Agent 优先走该 Skill。

该 Skill 是「写作与选型指引」，不替代本地 Mermaid CLI 或站点自带的渲染器；最终能否预览仍取决于你所用的 Markdown 环境是否支持 Mermaid。

安装与启用¶

SkillHub 提供两种常见方式：用 CLI 安装到当前 Agent 的 skills 目录，或把安装提示词发给支持 Skill 的对话 Agent。

1、安装 SkillHub CLI（若尚未安装）¶

command -v skillhub && skillhub --version

未安装时可执行（完整安装，含默认 Skill）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

仅安装 CLI：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only

2、安装 Mermaid Awesome¶

安装时必须用 --dir 指向当前 Agent 识别的 skills 目录；装到错误路径时 Agent 可能无法加载。

skillhub install @user_c1d16043/mermaid-awesome --dir <你的 skills 目录>

常用路径示例（以 SkillHub 安装文档为准）：

Cursor：~/.cursor/skills/
Claude Code：~/.claude/skills/
Codex：~/.codex/skills/ 或项目下的 .agents/skills/

也可向 Agent 发送 SkillHub 页面给出的提示词：

请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_c1d16043/mermaid-awesome`。

安装后按你所用客户端的规则刷新或重启，使 Skill 被索引。

典型用法¶

Skill 本体是 Agent 侧指引，没有单独的 HTTP 服务。典型流程是：在对话里说明图表目的与约束，由 Agent 按 Skill 生成或修改 Mermaid，你再贴回 Markdown。

示例 1：在 README 里补一张请求链路时序图

对 Agent 说明参与方、调用顺序和关键分支，并要求输出 GitHub 可渲染的 Mermaid。核心片段通常放在 mermaid 围栏代码块内，例如：

sequenceDiagram
    participant U as 用户
    participant W as Web
    participant A as Auth API
    U->>W: 提交账号密码
    W->>A: POST /login
    A-->>W: JWT
    W-->>U: 设置会话

在 README 中为其加上二级标题等 Markdown 壳层后，在支持 Mermaid 的托管平台上即可预览。

示例 2：修订已有图表

把现有 mermaid 代码块与修改意图（例如「增加缓存节点」「把同步改成异步」）一并交给 Agent，让其按 Skill 调整语法并保持图类型一致。

示例 3：选型

需要甘特排期、ER 建模或轻量 C4 时，在需求里写清图表类型与读者对象；Skill 说明覆盖多种类型，Agent 应选用对应的 Mermaid 方言而非混用错误关键字。

适用场景与注意¶

适合谁

维护开源 README、内部设计文档、Wiki 的开发者，希望图表与文字同仓、可 diff。
已在 Cursor、Claude Code 等环境使用 Skills，希望统一「提到 Mermaid 就走同一套写法」的团队。

使用注意

渲染环境：本地编辑器、CI 预览、博客主题对 Mermaid 版本与支持类型不一致时，生成代码仍可能需要微调。
复杂度：极大型架构图在纯文本里可读性会下降，宜拆分多图或分层描述；Skill 侧重 Markdown 内嵌，不承诺替代专用建模交付物。
数据与评分：SkillHub API 抓取显示评分 100000、下载 987（页面统计会变动，以 SkillHub 为准）。

结尾¶

若你的痛点是「文档里缺图、图又必须跟着 Markdown 走」，Mermaid Awesome 把 Mermaid 的写法与类型选择交给 Agent 统一处理，输出仍是标准代码块，便于评审与版本管理。

SkillHub 页面：https://www.skillhub.cn/skills/user_c1d16043/mermaid-awesome
API 条目：https://api.skillhub.cn/user_c1d16043/mermaid-awesome
安装说明：https://skillhub.cn/install/skillhub.md