name: mermaid description: 创建美观Mermaid图表的指南，适用于GitHub Markdown（兼容深色/浅色模式，无图标）。

Mermaid 图表技能

本技能提供创建美观、专业的Mermaid图表的指导，确保在GitHub上正确渲染，并兼容深色和浅色模式。

核心原则

使用深色填充配浅色边框 — 确保在深色和浅色模式下均可读
将子图填充设置为 none — 允许子图适应任何背景
使用圆角形状 — ([文本]) 用于椭圆形，((文本)) 用于圆形
不使用Font Awesome图标 — GitHub不支持 fa:fa-* 图标，它们会渲染为文本
引用子图标签 — 使用 subgraph Name["标签文本"] 语法
在顶部定义classDef样式 — 将所有样式集中在一起以便维护

黄金法则：深色填充 + 浅色边框

实现深色/浅色模式兼容性的关键见解：

classDef myStyle fill:#深色,stroke:#浅色,stroke-width:2px,color:#fff

填充（Fill）: 使用较深的色调（节点背景）
边框（Stroke）: 使用同一色系的较浅色调（边框）
颜色（Color）: 始终为 #fff（深色背景上的白色文本）

这种方法确保无论页面背景如何，节点都清晰可读。

GitHub兼容模板

这是用于GitHub渲染的Mermaid图表的规范模板：

flowchart TD
    %% --- 色彩调色板与样式 ---
    %% 深色填充 + 浅色边框 = 在深色和浅色模式下均可读
    classDef user fill:#374151,stroke:#d1d5db,stroke-width:2px,color:#fff
    classDef primary fill:#5b21b6,stroke:#ddd6fe,stroke-width:2px,color:#fff
    classDef secondary fill:#1e40af,stroke:#bfdbfe,stroke-width:2px,color:#fff
    classDef accent fill:#c2410c,stroke:#fed7aa,stroke-width:2px,color:#fff
    classDef success fill:#047857,stroke:#a7f3d0,stroke-width:2px,color:#fff

    %% --- 节点 ---
    User((用户)):::user
    User --> Action(["执行操作"]):::user

    Action --> Primary

    subgraph Primary["主要组件"]
        direction TB
        Step1(["步骤 1"]):::primary
        Step2(["步骤 2"]):::primary
        Step1 --> Step2
    end

    subgraph Secondary["次要组件"]
        direction TB
        Process(["处理"]):::secondary
    end

    Primary --> Secondary
    Secondary --> Output(["输出"]):::success

    %% --- 子图样式 ---
    %% fill:none 允许子图适应任何背景
    style Primary fill:none,stroke:#8b5cf6,stroke-width:2px,stroke-dasharray:5 5,color:#8b5cf6
    style Secondary fill:none,stroke:#3b82f6,stroke-width:2px,color:#3b82f6

色彩配对示例

选择任何你喜欢的颜色——只需遵循深色填充 + 浅色边框的模式：

填充（深色）	边框（浅色）	效果
`#374151`	`#d1d5db`	灰色
`#5b21b6`	`#ddd6fe`	紫色
`#1e40af`	`#bfdbfe`	蓝色
`#c2410c`	`#fed7aa`	橙色
`#047857`	`#a7f3d0`	绿色
`#b91c1c`	`#fecaca`	红色
`#0f766e`	`#99f6e4`	青色

这些只是示例。使用适合你图表的任何颜色——原则才是关键。

子图语法

❌ 错误 — 导致解析错误

subgraph MyGroup [带空格的标签]

✅ 正确 — 引用标签

subgraph MyGroup["带空格的标签"]

节点形状

❌ 错误 — 方括号显得生硬

A[方形节点]

✅ 正确 — 使用圆角形状

A(["椭圆形"])     %% 圆角末端 - 用于大多数节点
B((圆形))              %% 圆形 - 用于用户/参与者
C{{"决策"}}          %% 六边形用于决策
D[(数据库)]            %% 圆柱体用于数据库/存储

子图样式

❌ 错误 — 彩色填充在深色模式下会失效

style MySubgraph fill:#f0f9ff,stroke:#3182ce

✅ 正确 — 透明填充适应任何背景

style MySubgraph fill:none,stroke:#8b5cf6,stroke-width:2px,stroke-dasharray:5 5,color:#8b5cf6

关键点：

fill:none 使背景透明
stroke-dasharray:5 5 创建虚线边框（可选，看起来更简洁）
color:#... 将子图标签颜色设置为与边框匹配

链接样式

A --> B              %% 实线箭头
A -.-> B             %% 虚线箭头
A -.->|标签| B      %% 带标签的虚线箭头
A ==> B              %% 粗箭头

完整示例

flowchart TD
    classDef user fill:#374151,stroke:#d1d5db,stroke-width:2px,color:#fff
    classDef process fill:#5b21b6,stroke:#ddd6fe,stroke-width:2px,color:#fff
    classDef decision fill:#c2410c,stroke:#fed7aa,stroke-width:2px,color:#fff
    classDef success fill:#047857,stroke:#a7f3d0,stroke-width:2px,color:#fff

    User((用户)):::user
    User --> Request(["发出请求"]):::user

    Request --> Process

    subgraph Process["处理流程"]
        direction TB
        Validate(["验证输入"]):::process
        Execute(["执行逻辑"]):::process
        Validate --> Execute
    end

    Execute --> Check{{"成功？"}}:::decision
    Check -->|是| Done(["完成"]):::success
    Check -->|否| Request

    style Process fill:none,stroke:#8b5cf6,stroke-width:2px,stroke-dasharray:5 5,color:#8b5cf6

常见错误

❌ Font Awesome图标（GitHub不支持它们）

A[fa:fa-user 用户]  %% 渲染为字面文本

❌ 浅色填充配深色文本

classDef bad fill:#ffffff,stroke:#000000,color:#000000  %% 在深色模式下不可见

❌ 彩色子图填充

style Sub fill:#e0f2fe  %% 在浅色与深色模式下看起来不同

❌ 未引用的带空格子图标签

subgraph Sub [我的标签]  %% 解析错误！

快速参考

flowchart TD
    %% 1. 定义样式：深色填充 + 浅色边框 + 白色文本
    classDef myStyle fill:#深色,stroke:#浅色,stroke-width:2px,color:#fff

    %% 2. 使用圆角形状
    Node(["文本"]):::myStyle

    %% 3. 引用子图标签
    subgraph Sub["我的标签"]
        Inner(["内部"])
    end

    %% 4. 使用 fill:none 样式化子图
    style Sub fill:none,stroke:#颜色,stroke-width:2px,color:#颜色

何时使用此技能

在创建以下内容时调用此技能：

用于PR的架构图
系统流程文档
数据管道可视化
流程图
GitHub Markdown中的任何图表

GitHub特定注意事项

无Font Awesome — GitHub的Mermaid渲染器不支持FA图标
无HTML — 不能在节点标签中使用 <br> 或其他HTML
引用带空格的标签 — subgraph X["标签"] 而不是 subgraph X [标签]
本地测试 — 使用 mermaid.live 在提交前预览