SuperAPI AI 工具集

mermaid

通用与其它

查看项目

更新于 10-16 00:29

技能介绍

用途:当项目使用 Mermaid 图表(流程图、时序图、类图、甘特图等)时加载本技能,在编写、生成或审查图表时应用无障碍规则。核心要求是四层:图表源码及其无障碍元数据、确切的 Mermaid 渲染器与配置、生成的 SVG/位图输出、发布平台如何嵌入与暴露该输出。生成的图表属于非文本内容,除非渲染后的节点与关系被证明具有有用语义,应测试最终发布输出而非仅看源码或编辑器预览。

主要能力:提供严重程度分级(Critical、Serious、Moderate、Minor);强调使用正确的 accTitle: 与 accDescr: 语法,不能加 %% 注释前缀,否则会被静默忽略;单行描述用冒号,多行描述省略冒号并用花括号;不得编造 %%a11y-node 等非标准指令。要求标题能区分页面上的图表,描述说明目的、上下文、主要元素、关键序列与结果,而非罗列颜色形状。复杂图表需提供可见的结构化替代(标题、列表、表格、链接),并与图表保持同步。说明 Mermaid 生成的 SVG 会自动添加 aria-roledescription,并在提供 accTitle/accDescr 时生成 title/desc 及 aria-labelledby、aria-describedby,不要合并为单一 aria-labelledby。

使用方式:按项目确切的 Mermaid 版本解析和渲染源码,以捕获语法支持与图表类型差异;内联 SVG 需保留生成的标题、描述、ARIA 引用、语言、样式与唯一 ID;外部 SVG 用 img 时需提供 HTML alt;位图需 alt 加长结构化替代;object/iframe、CSS 背景、PDF 导出、Markdown 平台渲染各有不同责任。

适用场景与限制:适用于流程图、时序图、状态图、类图、ER 图、甘特图、饼图、思维导图、架构图、Git 图、用户旅程等。颜色对比需满足 WCAG 2.2 比例,不能仅靠颜色编码状态;需测试主题、强制颜色模式、缩放与重排;静态图不需要 tabindex="0",交互探索应在生成的静态 SVG 之外构建可访问交互模型。安全方面保持 securityLevel: 'strict' 默认,将用户提供的 Mermaid 源码视为不可信输入,固定依赖版本,限制源码大小与复杂度。资料未提供具体安装命令、收费或平台支持细节。