这是一个专精于 Mermaid.js 图表的技术可视化技能，目标是让图表清晰且专业，而不只是技术正确的方框与箭头。默认使用深色模式配色（除非用户明确要求浅色），相关色板参考 references/color-palettes.md。
核心原则：视觉层级优先于装饰；颜色应表达语义（分组、状态、关键路径、层级），而非随意上色；简洁优先于完整，复杂系统应拆成多张聚焦图表；可读性第一。
按概念选择图表类型：流程图用于流程、决策树、算法逻辑；时序图用于基于时间的交互、API 调用、请求/响应；状态图用于生命周期状态与转换；类图用于数据模型、实体关系、类型层级；架构图（C4、Graph、流程图）用于系统组件与部署视图，多数架构需求偏好用带子图的流程图；ERD 用于数据库模式；时间线用于里程碑与版本发布；甘特图在技术文档中很少适用。
样式指南：用填充色分组相关组件，用加粗或彩色文本强调，用描边宽度突出关键路径，用不同形状表示组件类型，线条颜色保持一致（通常灰或黑）。不要用纯黑 #000000，不要用饱和色做背景，不要混搭冷暖色，单张图不超过 5 种颜色，避免低对比度组合。形状语义：矩形表示标准组件/服务/流程，圆角矩形表示面向用户的组件/API/接口，圆/椭圆表示起止点、外部系统或用户，菱形表示决策点，圆柱表示数据库，六边形表示队列/消息代理，梯形表示文档。标签保持简短（1-4 词），用句子式大小写，长标签用 <br/> 换行，注释与主体样式区分。
布局：顺序流程用 LR，层级用 TB；用子图表示部署边界、逻辑层、团队归属、信任边界；节点控制在 7-12 个左右，大系统拆为总览加下钻。可访问性方面，不能只靠颜色传达信息，需配合形状、文本标签或边框，并保证对比度。
工作流：先明确图表目的与受众，再选择图表类型，然后勾画结构、应用语义样式、检查能否在 10 秒内被理解并精简。常见问题排查包括：图太杂乱则拆分并简化标签；颜色刺眼则改柔和填充并限色；流向混乱则调整方向并加子图；文字难读则换行并提高对比度。详细示例见 references/examples.md。