mermaid-sop-check

Focused SOP for writing Mermaid and preventing rendering failures with mermaid-cli. Use when Codex creates or edits Mermaid diagrams, validates standalone .mmd files, validates Mermaid code blocks embedded in Markdown, or debugs Mermaid parse/render errors before delivery.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "mermaid-sop-check" with this command: npx skills add ziyang-oyxy/agent-skills/ziyang-oyxy-agent-skills-mermaid-sop-check

Mermaid SOP

安装与环境确认

先全局安装 Mermaid CLI:

npm install -g @mermaid-js/mermaid-cli

确认命令可用:

mmdc -V

执行步骤

  1. 编写 Mermaid 图。
  2. 做一次“常见语法坑”自检。
  3. 运行 mmdc 渲染检查。
  4. 若失败,先修语法再重跑,直到退出码为 0

常见语法坑(优先排查)

  • 声明行缺失或拼写错误(例如 flowchart TDsequenceDiagramclassDiagram)。
  • 图类型与语法混用(例如在 flowchart 中写 sequence 语法)。
  • flowchart 中使用裸 end 导致解析异常(改词或加引号)。
  • 节点文本包含特殊字符但未加引号。
  • %% 注释写法或位置不当导致解析异常。

mmdc 检查命令

检查单个 .mmd 文件:

mmdc -i <file.mmd> -o /tmp/<name>.svg -q

检查 Markdown 中的 Mermaid 代码块(mermaid ... ):

mmdc -i <doc.md> -o /tmp/<name>.check.md -a /tmp/<name>-artefacts -q

失败处理顺序

  1. 先回到“常见语法坑”逐项排查。
  2. 用最小改动修复单一问题后立刻重跑 mmdc
  3. 仅在命令成功(退出码 0)后再继续后续工作。

交付前检查

  • 对每个新增或修改的 Mermaid 图至少运行一次 mmdc
  • 不跳过 Markdown 内嵌 Mermaid 的检查。
  • 不以“肉眼阅读通过”替代 mmdc 实际渲染。

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

Coding

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Repository Source
214K23Kvercel
Coding

svelte5-best-practices

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

apify-actor-development

No summary provided by upstream source.

Repository SourceNeeds Review
2.1K-apify
Coding

code-simplifier

No summary provided by upstream source.

Repository SourceNeeds Review