mermaid-generator

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

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: list	Obsidian 不支持 <br/> 或 subgraph ID["标题"]	去掉 <br/>，改用 subgraph ID [标题]（无引号）