用途:该技能提供在 GitHub Markdown 中创建专业 Mermaid 图表的指导,适用于架构图、系统流程文档、数据管道可视化、流程图等场景。
主要能力与原则:使用深色填充配浅色描边,保证明暗模式下均可读;子图填充设为 none 以适配任意背景;使用圆角形状,如 ([text]) 表示胶囊形、((text)) 表示圆形;不使用 Font Awesome 图标,因为 GitHub 不支持 fa:fa-*,会渲染为文本;子图标签需加引号,如 subgraph Name["Label Text"];classDef 样式定义在顶部便于维护。
使用方式:编写 Mermaid 代码后渲染并自查。可用命令 npx -y @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.png -b "#0d1117" 生成图片,diagram.mmd 中只放 Mermaid 代码,不含围栏标记;也可用 mermaid.live 快速预览。以读者视角检查起点终点是否清晰、箭头是否可追踪、相关节点是否邻近、有无孤立节点。若线条缠绕,应调整布局而非仅改颜色,例如用泳道布局、减少次要连线、将节点放在使用处附近、用单条连线锚定孤立组、将横切关注点汇聚到少数节点。
限制与注意事项:GitHub 的 Mermaid 渲染器不支持 Font Awesome 图标;多行标签应使用 <br/> 而非 \n;含空格的子图标签必须加引号,否则解析错误;避免浅色填充配深色文字,避免给子图设置彩色填充。颜色配对可参考深色填充与浅色描边的组合,如 #374151 配 #d1d5db、#5b21b6 配 #ddd6fe 等。