ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Mermaid Radar Chart(radar-beta)完全指南:用多维雷达图做技能评估与性能对比

Mermaid Radar Chart(radar-beta)完全指南:用多维雷达图做技能评估与性能对比 Mermaid Radar Chartradar-beta完全指南用多维雷达图做技能评估与性能对比【免费下载链接】scientific-agent-skillsTurn any AI agent into an AI Scientist. The #1 Agent Skills library for science, used by 190,000 scientists worldwide. 165 ready-to-use validated skills plus 100 scientific databases covering biology, chemistry, medicine, and drug discovery. Compatible with Cursor, Claude Code, Codex, Pi, Antigravity, and the open Agent Skills standard.项目地址: https://gitcode.com/GitHub_Trending/cl/scientific-agent-skills本篇指南聚焦 scientific-agent-skills 仓库中markdown-mermaid-writing技能的 Radar Chart 图型参考文档radar.md完整讲解 Mermaidradar-beta的适用场景、核心语法axis/curve/max/graticule/ticks/showLegend、无障碍要求与可复制模板并给出常见语法陷阱与实战案例。读完你可以在任何.md文档中直接写出专业、可读、可被 AI 解析的多维对比雷达图用于技能评估、性能画像、竞争分析与候选对比等场景。一、雷达图是什么适用场景与边界雷达图Radar Chart又称蜘蛛图 / Web Chart通过从中心辐射的多条轴在同一坐标上绘制多个维度的取值用多边形面积直观呈现多实体在多维度上的相对强弱。在 radar.md 中它被定位为 24 类 Mermaid 图型中的一员拥有独立的语法关键字radar-beta。Best for最佳场景多维度比较Multi-dimensional comparisons——同一组对象在多个维度上的横向对比技能评估Skill assessments——团队成员、候选人的能力雷达图性能画像Performance profiles——方法、模型、实验方案在多指标上的表现轮廓竞争分析Competitive analysis——多个产品/方法/研究路线在同一组评价维度上的优劣分布。When NOT to use不适用场景时间序列数据——应使用 XY Chartxychart-beta雷达图的轴是无序的维度而非时间刻度简单比例 / 构成占比——应使用 Pie Chartpie如预算分配、时间分配等「部分占整体」的语义。 从 mermaid_style_guide.md 的选型表可以看到仓库对图型选择的要求是「Pick the right type, not the easy one」象限图Quadrant用于双轴优先级矩阵雷达图用于多维对比XY Chart 用于数值趋势三者各司其职不要混用。二、语法关键字与版本要求Syntax keyword语法关键字radar-beta项目值语法关键字radar-betaMermaid 版本要求v11.6.0无障碍注解支持❌ 不支持accTitle/accDescr替代方案在代码块上方放一段描述性的斜体Markdown 段落版本前提是硬性约束mermaid_style_guide.md 的「Known Parser Gotchas」表中明确记录Radar— Requires v11.6.0 — Verify GitHub supports it before using也就是说在使用雷达图之前必须确认你的渲染平台GitHub、VS Code Mermaid 预览扩展等内置的 Mermaid 版本不低于 v11.6.0否则语法无法被解析。GitHub 对 Mermaid 的支持是持续演进的版本过旧时建议先在 Mermaid Live Editor 或本地预览中验证。三、核心语法逐项详解radar-beta的语法模型是「先定义轴维度再定义数据曲线系列」与常见的xychart-beta完全不同。以下是 radar.md 中所有核心指令的逐项拆解1.title—— 图表标题标题使用普通文本即可作为图表最上方的标题行显示。2.axis id[Label]—— 定义维度轴每条轴由短标识符id与方括号引号中的显示标签Label组成多条轴用逗号分隔标签保持简短1–2 个词否则会在雷达图外圈互相拥挤损害可读性轴的顺序决定了后续curve数据值的对应顺序必须一一对应。3.curve id[Label]{val1, val2, ...}—— 定义数据曲线每条曲线同样由短标识符、显示标签和花括号中的数值列表组成花括号中的数值必须与axis中定义的轴顺序一一匹配第一个值对应第一条轴依此类推多条curve可叠加在同一张图上形成多系列对比。4.max—— 统一量纲max将整个坐标系的所有轴统一到同一量纲所有曲线值都在 0 到max之间不设置时各轴刻度可能不同导致形状失真务必显式设置max以归一化所有值保证不同系列之间的面积对比有意义。5.graticule—— 网格形状graticule控制雷达图的网格骨架形状有两个选项circle默认值——同心圆网格polygon——同心多边形网格与雷达图的外框形状一致视觉上更贴合。示例图与模板中均使用polygon以获得更紧凑的视觉效果。6.ticks—— 同心环刻度数ticks控制同心网格环的数量默认值 5它决定雷达图在径向方向上的刻度精细度值越大网格越密适合取值跨度大的数据。7.showLegend—— 图例开关当图中存在多条curve时showLegend true会在图例中标注每条曲线的标签只有单条曲线时可以不启用。语法参数速查表指令作用取值/说明默认值title图表标题任意文本—axis定义维度轴id[Label]逗号分隔—curve定义数据系列id[Label]{v1, v2, ...}值与轴顺序对应—max统一坐标系量纲数值—graticule网格形状circle或polygoncircleticks同心环刻度数数值5showLegend是否显示图例true/false视曲线数量而定四、完整示例技能评估雷达图radar.md 提供的生产级示例用六项核心能力对比两位候选人展示互补优势雷达图对比两位工程候选人在六项核心能力上的表现展示互补优势从数据可以直观读出Candidate A 在系统设计与团队协作上占优Candidate B 在算法与 DevOps 上突出——这正是雷达图相对表格的最大价值多边形面积的形状差一眼可辨适合呈现「互补型」多维度对比结论。五、常见语法陷阱正确与错误写法对比雷达图是新加入 Mermaid 的图型语法极易与 XY Chart 混淆。SKILL.md 的「Common pitfalls」章节专门用 WRONG / CORRECT 对照强调了三个高频错误陷阱 1把radar当成关键字WRONGCORRECT❌radar关键字并不存在正确写法必须是radar-beta❌ 不能用x-axis定义维度必须用axis❌ 不能用Series : [1, 2, 3]这种键值对语法必须用curve加花括号数值。陷阱 2Radar 与 XY Chart 语法混淆图表关键字轴语法数据语法XY Chart柱状/折线xychart-betax-axis [Label1, Label2]bar [10, 20]或line [10, 20]Radar蜘蛛/网络图radar-betaaxis id[Label]curve id[Label]{10, 20}两者虽同为 v11.x 的 beta 图型但轴语法与数据语法完全不同复制模板时最容易张冠李戴。陷阱 3误以为雷达图支持无障碍注解Radar 不支持accTitle/accDescr。因此必须在代码块上方添加描述性的斜体Markdown 段落例如Radar chart comparing three methods across five performance dimensions. Note: Radar charts do not support accTitle/accDescr.这条规则同样适用于 Mindmap、Timeline、Quadrant、Sankey、XY Chart、Block、Kanban、Packet、Architecture、Treemap 等不支持无障碍注解的图型见 mermaid_style_guide.md 的 Accessibility Requirements 一节。六、可复制模板radar.md 提供了开箱即用的模板替换标题、轴、曲线和max即可描述正在对比的维度与实体模板设计要点5 条轴、2 条曲线、max 5的量纲——这是文档作者精心挑选的「默认安全配置」在没有特殊需求时直接套用即可保证可读性。七、实战案例科研报告中的雷达图雷达图并不只用于团队管理场景。仓库的示例文档 example-research-report.mdmarkdown-mermaid-writing技能的完整科研报告范例在「与已发表基准的对比」一节中用雷达图对比三种 CRISPR 递送方法在五个性能维度上的表现雷达图对比三种 CRISPR 递送方法在五个性能维度上的表现。注意Radar 图不支持accTitle/accDescr——描述已在上方提供。这个案例展示了科研场景下的标准用法轴Efficiency效率、Specificity特异性、Delivery ease递送便捷度、Cost成本、Cell viability细胞活力——五个实验核心指标曲线本研究方案This study与文献中的 Plasmid Cas9、Electroporation RNP 两个基准方法量纲max 100与百分制指标对应graticule polygonticks 5使用默认风格结论驱动雷达图直观呈现「本研究在效率与递送便捷度上平衡、成本与活力俱佳」的对比结论与文档结论章节的论述互为印证。这也正是 SKILL.md 所倡导的「文本即图源」哲学——雷达图以纯文本形式存在于.md中可被 git 干净地 diff、无需构建步骤、可在 GitHub/GitLab/Notion 原生渲染、可被 AI 无视觉解析并在需要时随时转换为正式图片。八、可读性最佳实践综合 radar.md 的 Tips 与 mermaid_style_guide.md 的通用规范雷达图的工程化建议如下用axis定义轴标签 1–2 个词——过长的标签会在外圈重叠用curve定义数据数值顺序与轴一致——顺序错位是雷达图最常见的「无声错误」图形不报错但语义全错始终设置max——将不同系列归一到同一量纲面积对比才有意义graticule按需选型——circle默认或polygon均可示例多用polygonticks控制环数——默认 5通常无需修改多条曲线时加showLegend true轴数控制在 5–8 条曲线控制在 2–4 条——超过这个规模雷达图会因线条交织而难以阅读应拆分为多张图或用表格呈现永远在代码块上方配一段描述性斜体段落——这是雷达图替代accTitle/accDescr的唯一无障碍通道面向屏幕阅读器与无法渲染 Mermaid 的场景。九、在 markdown-mermaid-writing 技能中的定位本仓库的markdown-mermaid-writing技能SKILL.md确立了「Markdown 内嵌 Mermaid 作为默认与规范文档格式」的标准Radar Chart 是其中 24 类图型参考之一。它的完整工作流是先读 mermaid_style_guide.md 掌握通用样式与无障碍规则再打开对应的图型文档本文件即references/diagrams/radar.md获取范例、Tips 与模板最后按 markdown_style_guide.md 的规范撰写文档。若你的内容涉及多维度对比例如「对比三种方法的性能画像」「评估团队技能矩阵」「分析多个候选方案」雷达图就是 SKILL.md 选型表中指明的第一选择——不要在需要雷达图的场景降级使用 flowchart 或大段文字描述。【免费下载链接】scientific-agent-skillsTurn any AI agent into an AI Scientist. The #1 Agent Skills library for science, used by 190,000 scientists worldwide. 165 ready-to-use validated skills plus 100 scientific databases covering biology, chemistry, medicine, and drug discovery. Compatible with Cursor, Claude Code, Codex, Pi, Antigravity, and the open Agent Skills standard.项目地址: https://gitcode.com/GitHub_Trending/cl/scientific-agent-skills创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表