agentsclimarketplace

Mermaid generator

Skill unix2dos/skills/mermaid-generator

My personal collection of handcrafted AI agent skills — original prompting modules for code quality, knowledge exploration, and daily productivity.

Install
npx -y skills add unix2dos/skills --skill mermaid-generator

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Only invoke when explicitly requested via "画图"、"图表"、"流程图"、"mermaid"、"@mermaid-generator". Do NOT auto-trigger.

SKILL.md

5.4 KB, as published. Nobody here has run it

Mermaid 图表生成

根据用户描述选择最合适的 Mermaid 图表类型,生成语法正确、配色专业的代码。

⚠️ Obsidian 兼容模式: 默认使用 Obsidian 兼容语法,避免 <br/> 换行、subgraph ID["标题"] 等不兼容写法。

核心原则

🎯 语法安全规则(必须遵守)

所有文本标签必须用双引号包裹,以避免括号、冒号、特殊符号导致的语法错误。

%% ✅ 正确写法
A["用户登录(必填)"] --> B["验证: 检查密码"]

%% ❌ 错误写法 - 会导致解析失败
A[用户登录(必填)] --> B[验证: 检查密码]

🎨 配色策略

使用 %%{init}%% 配置主题变量,这是最通用的配色方式,兼容所有图表类型:

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#3B82F6', 'primaryTextColor': '#1E3A5F', 'primaryBorderColor': '#2563EB', 'lineColor': '#60A5FA', 'secondaryColor': '#10B981', 'tertiaryColor': '#F59E0B'}}}%%

⚠️ 图表类型语法限制(必须遵守)

不同图表类型支持的样式语法不同,混用会导致渲染失败!

语法支持的图表类型说明
classDef + class仅 flowchart流程图专属
style 关键字classDiagram, erDiagram类图/ER图
themeVariables所有类型推荐使用
%% ❌ 错误:在 sequenceDiagram 中使用 classDef(会报错)
sequenceDiagram
    classDef client fill:#4F46E5  %% 不支持!

%% ✅ 正确:sequenceDiagram 只能用 themeVariables
%%{init: {'themeVariables': {'actorBkg': '#4F46E5'}}}%%
sequenceDiagram
    participant C as "客户端"

推荐配色板(明亮蓝专业风格):

用途颜色Hex
主色(流程/重点)明亮蓝#3B82F6
成功/完成翠绿#10B981
警告/注意琥珀#F59E0B
错误/危险红色#EF4444
信息/辅助天蓝#0EA5E9
连接线浅蓝#60A5FA

Instructions

Step 1: 分析用户需求,决定图表类型

根据用户描述的内容,选择最适合的图表类型:

场景关键词推荐图表Mermaid 语法
步骤、流程、决策、分支、判断流程图flowchart TD / flowchart LR
调用、请求、响应、交互、消息、API时序图sequenceDiagram
类、接口、继承、属性、方法、OOP类图classDiagram
状态、转换、触发、生命周期状态图stateDiagram-v2
表、字段、关系、数据库、主键外键ER 图erDiagram
任务、排期、里程碑、项目进度甘特图gantt
占比、比例、分布饼图pie
用户体验、流程体验、情感曲线用户旅程图journey
分支、合并、提交、版本Git 图gitGraph
层级、分类、脑图、知识结构思维导图mindmap
历史、事件、时间节点时间线timeline
需求、依赖、层级结构需求图requirementDiagram
块、模块、架构、系统组件块图block-beta
象限、评估、二维分类象限图quadrantChart
XY 坐标、趋势、数据点XY 图xychart-beta
环绕桑基图、流量分布桑基图sankey-beta

Step 2: 生成 Mermaid 代码

参考 chart-templates.md 中的完整模板生成代码。

写完代码后,输出前过一遍这三条:

检查项正确 ✅错误 ❌
所有节点标签有双引号A["文字(说明)"]A[文字(说明)]
配色用对了语法flowchart 用 classDef;其他图表只用 %%{init themeVariables}%%在 sequenceDiagram 里写 classDef
<br/> 换行多行内容拆成多个节点A["第一行<br/>第二行"]

输出格式:

## [图表类型名称]

> 选择理由: [一句话解释]

​```mermaid
[完整的 Mermaid 代码]
​```

### 图表说明
[简要解释图表结构和关键节点]

### 自定义提示
[告诉用户如何修改以适应自己的需求]

错误排查指南

常见错误原因解决方案
Parse error标签含特殊字符用双引号包裹所有标签
Unexpected token括号/冒号未转义["文本(说明)"]["类型: 描述"]
主题不生效init 语法错误检查 JSON 格式,使用单引号
样式不显示classDef 名称不匹配确保 class 引用正确的 classDef 名称
classDef 语法错误在不支持的图表中使用classDef 仅支持 flowchart,其他类型用 themeVariables
sequenceDiagram 渲染失败混用了 class/classDef 语法移除 classDef,改用 themeVariables 配色
边标签渲染失败使用多个竖线分隔`-->
mindmap 解析失败init 配置或 root 语法移除 %%{init}%%,使用 root[文本],2 空格缩进
Unsupported markdown: listObsidian 不支持 <br/>subgraph ID["标题"]去掉 <br/>,改用 subgraph ID [标题](无引号)

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.