SuperAPI AI 工具集

github-mermaid-diagrams

写作与研究

查看项目

更新于 10-15 21:37

技能介绍

用途:为 GitHub Markdown 编写和改良 Mermaid 图表,使其在浅色与深色两种主题下都能清晰渲染。GitHub 的 Mermaid 渲染器与 mermaid.live 或本地工具行为不同,例如深色模式会把文字覆盖为浅灰、边标签出现不透明底色、细边线几乎不可见等,本技能归纳了应对这些问题的写法。

主要能力:提供一套经测试的配色方案,节点填充采用中到深色并显式写 color:#fff,保证两种主题下文字可读;给出容器(subgraph)的中性色调建议,因为标题无法直接设置样式;要求加入 init 块以修正边标签背景和线色,并在图末添加边线样式;同时列出应避免的做法,如浅色填充、标签内 HTML 斜体、classDef 加 class 关键字等。

使用方式:先按配色规范编写 Mermaid 代码并保存为 .mmd 文件,再用官方 Mermaid CLI 本地渲染验证,例如:npx -y @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.png -b white -s 2;模拟深色模式可用 -t dark;查看 PNG 检查文字、边线与标签的可读性,迭代调整后再推送到 GitHub 并切换主题抽查。批量处理时可用 shell 循环遍历 *.mmd 文件。

适用场景:在 GitHub 仓库的 README、文档或 Issue 中嵌入流程图、时序图、状态图、类图、ER 图等,尤其适合需要兼顾深色模式阅读体验的项目。

限制:部分细节如各主题下具体渲染差异可能仍受 GitHub 版本影响;资料提示图表节点建议控制在 20 个以内,超出宜拆分;具体某类图表的完整语法需参阅其 references/DIAGRAM_TYPES.md。