Content Mermaid
为技术流程和结构生成 Mermaid 图表。这是 content-diagrams 的快速语法驱动版：具有相同的视觉清晰度标准，但基于一种已能保证几何正确的语言构建，因此精力用于选择合适的图表类型和可读、一致的颜色系统，而非验证坐标。
与 content-diagrams 的关系
两种技能共享相同标准——可读文本、基于真实颜色系统而非装饰、清晰胜过密集——但 content-diagrams 手工计算其 SVG 几何，而本技能将几何完全交由 Mermaid 的布局引擎处理。根据图表实际查看的位置（原生 Mermaid 环境 vs. 仅显示静态图片的平台）在两者之间选择，而非习惯。若不确定，请询问——Mermaid 源代码若不经过真正的重新加工，无法干净地截图成为精美的独立图形。
为何此处没有验证循环
content-diagrams 将大部分精力花费在几何上：SVG 线段、矩形或标签只是 Claude 计算出的数字，而计算出的数字可能出错——因此需要渲染、截图、裁剪和检查。
Mermaid 完全消除了这种失败模式。节点宽度、文本换行、箭头路径以及元素之间的碰撞避免是渲染器的工作，而非 Claude 的——渲染器不会将标签放在矩形之上或将线条穿过形状。在此处重新引入验证循环（截取渲染后的图表、裁剪、检查重叠）只会浪费代币和延迟，确认工具已经保证的内容。
仍可能出错的是完全不同的方面，且完全是文本方面的：
- 语法错误（未闭合的括号、保留字用作节点 ID、箭头类型不匹配）
- 边引用了未定义的节点 ID
- 颜色对比度差（填充色和文本颜色彼此无法真正区分）
- 图表类型与内容的实际结构不匹配
因此，此处验证意味着：通读语法一次以检查正确性，检查每个 classDef 是否将填充色与真正对比的文本颜色配对，并确认图表类型与正在建模的内容匹配。无需图像渲染。
图表类型选择
根据内容实际的结构选择类型——这是 Mermaid 版的 content-diagrams 主题选择：
| 内容结构 | Mermaid 类型 |
|---|---|
| 带分支/循环的连续步骤（流程、工作流、算法） | flowchart TD（自上而下）或 LR（从左到右，适用于管道/时间线） |
| 服务/角色之间的消息时序（API 调用、协议交换） | sequenceDiagram |
| 实体状态及状态转换（生命周期、状态机） | stateDiagram-v2 |
| 数据模型 / 实体关系（模式、数据库表） | erDiagram |
| 面向对象结构（类、继承、接口） | classDiagram |
| 带持续时间和依赖的日程安排 | gantt |
| 无严格顺序的层次分解 / 头脑风暴 | mindmap |
| 时间线叙事（项目历史、版本历史） | timeline |
| 二维优先级分类（影响 vs. 工作量等） | quadrantChart |
不要将所有请求默认视为 flowchart——像“绘制我们的服务如何互相调用”这样的请求应使用 sequenceDiagram，即使很容易将其绘制为矩形和箭头；像“展示工单经过的状态”应使用 stateDiagram-v2，而不是用菱形代表状态的流程图。
颜色与可读性系统
这是手动验证仍然重要的一个方面，因为 Mermaid 会愉快地渲染不可读的颜色选择而不报错。
规则：每个 classDef 必须将填充色与经过刻意选择以与之对比的文本颜色配对——切勿让 color 未设置而寄希望于主题默认值有效。 Mermaid 自身的默认调色板（柔和的绿/粉/蓝配黑色文本）恰好可行，因为填充色和文本色是共同选择的；一旦你将 fill 覆盖为更饱和或更深的颜色，必须同时显式设置 color，否则你将重现一个常见缺陷：看起来可读的矩形，其文本与背景实际上对比度低。
两种调色板方案，选择一种并在一个图表的所有类中一致使用（不要混合使用）：
- 深色填充 / 白色文本（默认——久经考验、高对比度，在浅色和深色聊天主题中均易于阅读）：
classDef category1 fill:#1e3a5f,stroke:#0d1f33,stroke-width:2px,color:#ffffff - 浅色填充 / 深色文本 / 饱和描边（当图表需要视觉上放在遵循浅色填充约定的 content-diagrams SVG 旁边时使用）：
classDef category1 fill:#e1f0ff,stroke:#1e3a5f,stroke-width:2px,color:#1a1a1a
直接借用 content-diagrams 的规则：每个类别一种色相，在所有出现该类别的节点上应用——同一角色的每个节点使用相同的填充/描边颜色，而非一次性使用。按角色分配色相，例如：
- 蓝色 → 输入 / 数据 / 待办项
- 绿色 → 处理 / 活跃工作步骤
- 琥珀色或棕色 → 决策点 / 关口
- 紫色 → 输出 / 发布 / 终止状态
- 红色 → 反馈循环 / 失败路径 / 回顾
锁定画布，使其不依赖于主机的浅色/深色模式。 将 init 指令作为图表的第一行：
%%{init: {'theme': 'base', 'themeVariables': { 'fontFamily': 'Trebuchet MS, Verdana, Arial, sans-serif', 'fontSize': '16px', 'primaryColor': '#1e3a5f', 'primaryTextColor': '#ffffff', 'primaryBorderColor': '#0d1f33', 'lineColor': '#666666', 'background': '#ffffff' } } }%%
theme: 'base' 加显式的 themeVariables 意味着图表外观一致，无论宿主环境默认使用哪个 Mermaid 主题——不要仅依赖默认主题名称（default、dark、forest 等），因为那会将实际颜色交给渲染器决定。
字体大小：对于节点较多的图表，最小 16px；仅当图表足够简单且可读性无问题时才使用 14px。如果图表需要缩小到 14px 以下才能容纳标签，这同样是 content-diagrams 中“清晰优于密度”的信号——拆分图表或减少内容，不要进一步缩小文本。
不同图表类型的样式能力不同：flowchart、stateDiagram-v2 和 classDiagram 都支持逐个节点分配 classDef/class，因此逐节点使用上述类别颜色系统。sequenceDiagram、erDiagram 和 gantt 的逐个元素样式能力非常有限——对于这些类型，将精力放在 init 块的 themeVariables（sequencediagram 的 actorBkg、actorTextColor、noteBkgColor 等）上，而非期望节点级别的类能同样工作。
箭头语法
与手工编码的 SVG 不同，Mermaid 能自动放置箭头标签且位置合适——-->|label| 文本不会像手动定位的 SVG 标签那样落在图形上。因此，与 content-diagrams 的“将文本从箭头上移开，通过图例解码”的默认方式不同，直接标注箭头完全可行且通常更清晰。但仍需将标签保持为简短片段（“已批准”、“重试”、“失败时”），而非短语——标签是标记，不是句子。
保留线条样式用于与 content-diagrams 相同的宽泛区分：
- 实线箭头 (
-->) → 主要/正常流程 - 虚线箭头 (
-.->) → 反馈、可选路径或外部/间接交互 - 粗箭头 (
==>) → 强调或关键路径，谨慎使用
保持标签简短；使用子图分组
节点文本应为简短短语，而非句子——Mermaid 与其他工具一样，会笨拙地换行或溢出段落长度的标签。如果节点需要多行，请显式使用 <br/> 插入换行符，而非依赖自动换行在合理位置断行。
使用 subgraph 将相关步骤分组（例如，一个冲刺、一个部署阶段、一个服务边界内的所有内容）——它是 Mermaid 版的分组框，可通过自己的 style SubgraphName fill:...,stroke:... 行设置样式。不要嵌套子图超过一层；否则可读性会迅速下降。
工作流程
- 识别底层结构，在编写任何语法之前从上表中选择图表类型。
- 为出现的角色分配类别颜色（输入、处理步骤、决策、输出、反馈）——在编写 classDef 之前用一两句话勾勒出来，类似 content-diagrams 的“勾勒主题推理”步骤，以便用户希望调整某个部分时选择是可追溯的。
- 编写图表，以
%%{init: ...}%%指令开始，然后是结构，接着是classDef/class分配（或对于不支持逐个节点类的类型使用 themeVariables）。 - 自我检查语法——边上使用的每个节点 ID 都已定义；每个
classDef同时设置了fill和color；括号/引号已平衡；没有段落长度的标签。无需渲染，无需截图。 - 通过
create_file保存为.mermaid文件，使其内联渲染为构件，使用描述性别名：/mnt/user-data/outputs/<slug>.mermaid。使用present_files展示。 - 如果用户需要图表作为便携式静态图像（用于嵌入不支持 Mermaid 渲染的环境，或用于存档），请直接说明：此环境无法可靠地运行无头 Mermaid 到图像导出功能（这依赖于沙盒网络通常无法访问的 Chromium 下载）。指向 mermaid.live 以手动导出，或者如果实际需求是独立图形，请切换到
content-diagrams。
不应做的事情
- 不要覆盖
fill后却让classDef的color未设置——这正是本技能旨在避免的对比度错误。 - 不要在一个图表中混合使用深色填充和浅色填充方案。
- 不要将所有请求默认视为
flowchart——选择与实际结构（顺序、状态、ER 等）匹配的类型。 - 不要在此处重新引入 content-diagrams 的渲染/裁剪/验证循环——它解决的是 Mermaid 布局引擎不存在的问题。
- 不要在节点标签中放置段落长度的文本；使用
<br/>换行或减少内容。 - 不要嵌套子图超过一层。
- 不要在没有前提条件的情况下承诺从此沙盒导出干净的 PNG/SVG 图像，即说明无头 Mermaid 渲染在此处可能无法工作。