creating-mermaid-diagrams

此技能专为开发人员、架构师与技术写作者设计，旨在协助创建高质量且兼容 GitHub 的视觉化技术文档。它提供了一套结构化的设计理念与专业配色方案，确保 Mermaid 图表在 GitHub 的亮色与深色模式下均具备良好的可读性。本技能支持各类图表类型，包括流程图、时序图、类图、实体关联图 (ERD)、状态机以及 Gantt 和 Kanban 等项目管理图表。

• 完整支持所有标准 Mermaid.js 图表类型，包括进阶的 C4Context、architecture-beta 与思维导图。

• 内置设计系统，强制要求每个生成的图表皆须包含 accTitle 与 accDescr，以符合无障碍访问标准。

• 提供 24 种经严格测试的专业配色主题（例如 Catppuccin, Nord, Tokyo Night），确保视觉一致性。

• 透过 mermaid-cli (mmdc) 提供本地预览功能，支持 SVG 与 PNG 导出以进行快速迭代。

• 支持基于 Gist 的整合预览，让用户在提交代码前，即可预览图表在 GitHub PR、Issue 与 Markdown 文件中的实际渲染效果。

• 提供自动化风格指引，强调结构、逻辑线条权重与语义化配色，减少不必要的视觉混乱。

• 当您需要阐明系统架构、记录 API 调用序列、规划决策流程树或视觉化数据库结构时，请使用此技能。

• 请确保所有节点 ID 使用蛇形命名法 (snake_case)，并针对包含特殊字符的标签使用引号，以避免在 GitHub 平台上渲染失败。

• 在设计阶段使用 preview.sh 脚本切换深浅模式，确保图表对所有协作者皆保持易读性。

• 请注意渲染限制：避免超过两层的复杂嵌套子图，节点数量应控制在 100 个以内以获得最佳性能，并请注意原生 GitHub 渲染器不支持点击事件与自定义 HTML/CSS。